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

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

從純文本開始：問題

這元素包含頁面的主要內(nèi)容。沒有構(gòu)造元素，瀏覽器無法區(qū)分標(biāo)題和段落等內(nè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)致幾個問題：

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

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

ARIA：必要的補充

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

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

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