語(yǔ)義HTML和可訪問(wèn)的豐富的Internet應(yīng)用程序（ARIA）對(duì)于構(gòu)建包容性和性能的Web界面至關(guān)重要。它們?yōu)閮?nèi)容提供了基本背景，使瀏覽器，搜索引擎，屏幕讀取器和用戶(hù)可以理解。盡管有好處，許多開(kāi)發(fā)人員卻忽略了他們。引用的一個(gè)常見(jiàn)原因是對(duì)他們的優(yōu)勢(shì)缺乏認(rèn)識(shí)。

本文探討了語(yǔ)義HTML和ARIA的好處，主張使用語(yǔ)義HTML的優(yōu)先級(jí)，并且僅將ARIA用作最后的度假勝地。

從純文本開(kāi)始：?jiǎn)栴}

這元素包含頁(yè)面的主要內(nèi)容。沒(méi)有構(gòu)造元素，瀏覽器無(wú)法區(qū)分標(biāo)題和段落等內(nèi)容類(lèi)型的能力?？紤]此示例：

 <code>A Study of Butterflies Butterflies are little bugs with cute wings. Butterfly Habitats Butterflies live in flower houses and hang out at dank coffeeshops.</code>

缺乏結(jié)構(gòu)導(dǎo)致幾個(gè)問(wèn)題：

• 無(wú)法樣式的標(biāo)題與段落不同。
• 搜索引擎索引和可發(fā)現(xiàn)性受損。
• 與輔助技術(shù)的內(nèi)容溝通無(wú)效。
• 視覺(jué)表現(xiàn)不佳。

添加基本??結(jié)構(gòu)<div>s<p>包裝文字<code><div>元素提供了略有改進(jìn)：<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;div&gt;蝴蝶的研究。&lt;/div&gt; &lt;div&gt;蝴蝶是帶有可愛(ài)翅膀的小蟲(chóng)子。&lt;/div&gt; &lt;div&gt;蝴蝶棲息地&lt;/div&gt; &lt;div&gt;蝴蝶住在花房里，在潮濕的咖啡店閑逛。&lt;/div&gt;&lt;/code&gt;</pre> <p>但是，這仍然缺乏語(yǔ)義含義。內(nèi)容的類(lèi)型對(duì)于輔助技術(shù)和搜索引擎仍然是模棱兩可的。</p> <h3 id="使用CSS造型-有限的解決方案">使用CSS造型：有限的解決方案</h3> <p>CSS可以樣式<code><div>使用類(lèi)或ID的元素，增強(qiáng)視覺(jué)呈現(xiàn)。但是，這只會(huì)使視力用戶(hù)受益，并且不能為其他技術(shù)提供語(yǔ)義含義。<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;div class=&quot;heading1&quot;&gt;蝴蝶的研究&lt;/div&gt; &lt;div class=&quot;paragraph&quot;&gt;蝴蝶是帶有可愛(ài)翅膀的小蟲(chóng)子。&lt;/div&gt; &lt;div class=&quot;heading2&quot;&gt;蝴蝶棲息地&lt;/div&gt; &lt;div class=&quot;paragraph&quot;&gt;蝴蝶住在花房里，在潮濕的咖啡店閑逛。&lt;/div&gt;&lt;/code&gt;</pre> <p>這種方法是脆弱的，缺乏固有的語(yǔ)義含義。</p> <h3 id="語(yǔ)義HTML的力量">語(yǔ)義HTML的力量</h3> <p>語(yǔ)義html元素喜歡<code><h1>，，，，<code><h2> ， 和<code><p>提供固有的含義。使用這些元素而不是通用<code><div>S優(yōu)越：<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;h1&gt;蝴蝶的研究&lt;/h1&gt; &lt;p&gt;蝴蝶是帶有可愛(ài)翅膀的小蟲(chóng)子。&lt;/p&gt; &lt;h2&gt;蝴蝶棲息地&lt;/h2&gt; &lt;p&gt;蝴蝶住在花房里，在潮濕的咖啡店閑逛。&lt;/p&gt;&lt;/code&gt;</pre> <p>這種方法提供了許多優(yōu)勢(shì)：</p> <ul> <li>默認(rèn)的瀏覽器樣式和改進(jìn)的視覺(jué)呈現(xiàn)。</li> <li>增強(qiáng)的搜索引擎優(yōu)化。</li> <li>通過(guò)輔助技術(shù)進(jìn)行適當(dāng)?shù)慕忉尅?lt;/li> <li>更清潔，更簡(jiǎn)潔的代碼。</li> <li>與HTML處理器的未來(lái)防護(hù)兼容性。</li> </ul> <h3 id="語(yǔ)義HTML的進(jìn)一步好處">語(yǔ)義HTML的進(jìn)一步好處</h3> <p>語(yǔ)義HTML提供了其他好處。例如，使用<code><input type="tel">在移動(dòng)設(shè)備上提供數(shù)字鍵盤(pán)。 Safari的讀者模式之類(lèi)的瀏覽器也受益于語(yǔ)義HTML，從而提供了更清潔的閱讀體驗(yàn)。

ARIA：必要的補(bǔ)充

ARIA（可訪問(wèn)的互聯(lián)網(wǎng)應(yīng)用程序）補(bǔ)充語(yǔ)義HTML，改善了輔助技術(shù)的可訪問(wèn)性。這對(duì)于由JavaScript操縱的動(dòng)態(tài)內(nèi)容特別有用。

例如，使用ARIA將錯(cuò)誤消息與表單字段相關(guān)聯(lián)確保正確宣布錯(cuò)誤：

 <code><label for="first-name">First name</label><input type="text" id="first-name" aria-describedby="first-name-error"> <span id="first-name-error" aria-live="assertive">This field is required</span></code>

避免濫用詠嘆調(diào)

避免使用ARIA來(lái)補(bǔ)償差的語(yǔ)義HTML至關(guān)重要。嘗試使用使用的本機(jī)HTML元素（例如，復(fù)選框）<div> S和Aria比使用適當(dāng)?shù)谋緳C(jī)元素過(guò)于復(fù)雜且可靠。<h3 id="結(jié)論">結(jié)論</h3> <p>包容性設(shè)計(jì)優(yōu)先考慮所有用戶(hù)的可訪問(wèn)性。語(yǔ)義HTML是基礎(chǔ)，提供了固有的含義并改善了各種技術(shù)的用戶(hù)體驗(yàn)。應(yīng)明智地使用ARIA來(lái)補(bǔ)充語(yǔ)義HTML，以應(yīng)對(duì)動(dòng)態(tài)接口中的特定可訪問(wèn)性挑戰(zhàn)，但絕不是替代適當(dāng)?shù)恼Z(yǔ)義標(biāo)記。優(yōu)先考慮語(yǔ)義HTML是創(chuàng)建真正包容性網(wǎng)絡(luò)體驗(yàn)的最有效，最可靠的途徑。</p> </div>