避免使用HTML頁面的Wai-Aria冗餘

以來，由於將ARIA角色納入HTML，因此Web開髮變得更加容易。 ARIA通過為輔助技術（ATS）提供額外的語義信息來增強對殘疾人的Web應用可用性。 但是，一個關鍵問題仍然存在：當HTML元素已經具有固有的語義時，ARIA角色屬性是否需要？

>本文探討了這個問題，重點介紹了具有隱式語義的新的HTML5結構元素如何與ARIA角色相互作用。

密鑰點：

如果HTML元素已經提供了必要的語義，則

避免使用ARIA角色。 不必要的ARIA屬性創建冗餘代碼。 HTML5元素具有默認的隱式ARIA語義；因此，添加匹配的ARIA角色或屬性通常是多餘的。
• 儘管這些隱式語義，即使它導致冗餘，也可能會考慮出於兼容原因添加ARIA角色。
• aria-* ARIA的基本原理和常見誤解：
>
• > WAI-ARIA（可訪問的富互聯網應用程序）包括增強HTML元素的屬性。 這些屬性通過瀏覽器可訪問性API將角色，屬性和狀態信息傳達給ATS。 對於Aria Newcomer來說，Stephan的“ Wai-Aria介紹”是推薦的資源。
> HTML社區中普遍的視圖是：“如果HTML已經處理，請不要使用Aria。” 更準確地說：僅在實現的HTML元素缺乏可訪問性支持時才使用ARIA。

ARIA角色和大多數元素：> ARIA角色，屬性和狀態可以揭示HTML元素的語義。 這被稱為元素的默認隱式aria語義

。

。 在添加ARIA屬性之前，

優先考慮語義上正確的HTML（利用天然語義）。 ARIA角色通常不會增加大多數HTML元素的默認語義。 保持簡單：如果HTML元素固有地提供了語義，請不要使用ARIA；這樣做會創建冗餘代碼。

ARIA角色和HTML4：>

>可訪問性專家史蒂夫·福克納（Steve Faulkner）解釋說，html4（及更早的）元素不需要其他ARIA角色即可公開其默認語義，因為它們已經被映射。 在此上下文中添加ARIA角色是毫無意義的，並且為代碼評論添加了不必要的複雜性。

html5增強：

> HTML5規範指出：“在大多數情況下，設置與默認隱式aria語義匹配的ARIA角色和/或

屬性是不必要的，不建議使用的。”

> HTML5元素具有默認的隱式ARIA語義，但不能保證每個元素在沒有驗證的情況下映射。 因此，可以考慮添加ARIA角色作為預防措施，接受冗餘。

ARIA中的冗餘： 在交互式HTML5元素（例如形式元素或>）中添加默認隱式ARIA角色沒有效果。 雖然沒有危害，但這是不必要的，並且浪費了開發時間。 交互式元素需要可訪問的名稱（為可訪問性API的可訪問名稱屬性提供值）。 例如：

<button></button>效率較低：

更有效：

<code class="language-html"><label>Title</label><input type="text"></code>

第二個示例使用和

>屬性，顯然將標籤與輸入相關聯。

<code class="language-html"><label for="title">Title</label><input type="text" id="title"></code>

>

for冗餘的示例（避免）：id>

>交互式元素上的冗餘角色：

>

• 是不必要的。

<code class="language-html"><button role="button">Submit</button></code>

ARIA角色與本機HTML對應物： role="button"

• html屬性冗餘。
>

<code class="language-html"><div hidden aria-hidden="true"></div></code>

aria在既定的結構元素上：hidden> aria-hidden

• 和>不必要。 帶有HTML5結構元素的
ARIA：

> HTML5引入了帶有默認隱式ARIA語義映射的結構元素（例如，

<code class="language-html"><h1 role="heading" aria-level="1">I am a Heading</h1></code>

，

，role）。 但是，有些映射是有條件的。例如，僅當不在aria-level>或

內時，

映射到>。 瀏覽器固有地揭示了這些默認語義。

瀏覽器支持： <aside></aside> <article></article>>大多數現代瀏覽器都支持HTML5結構和切片元素的默認隱式語義。 （Internet Explorer的實現可能會有所不同。） <main></main><footer></footer>結論： role=contentinfo <article></article> <section></section>避免ARIA角色，屬性和聲明HTML5規範是否已經定義了該功能。

許多HTML5元素具有默認的隱式ARIA語義。 在現代瀏覽器中，ARIA支持通常非常出色（例外）。

考慮將ARIA屬性添加到HTML元素並在評論中分享您的想法的含義。

常見問題（常見問題解答）：

> >（原始輸入的FAQ部分保留在此處，因為它直接與主題相關，並且不需要修改偽 - 原始性。）

>

在HTML頁面中Wai-aria的目的是什麼？財團（W3C）。它提供了一個框架來改善網絡內容和應用程序的可訪問性和互操作性，尤其是對於殘疾人。它通過定義使殘疾人更容易訪問Web內容的方法來實現此目的，例如提供其他語義來幫助輔助技術（例如屏幕閱讀者）了解Web內容的結構和功能。

>

> WAI-ARIA和HTML頁面？

>

> WAI-ARIA和HTML頁面中的冗餘，當提供相同的信息或功能多次時，可能會發生HTML頁面。例如，如果HTML元素已經具有由HTML規範定義的隱式角色，並且開發人員添加了與隱式角色相匹配的ARIA角色，則會創建冗餘。這可能會混淆輔助技術和依靠它們的用戶。

>

> HTML隱藏和ARIA隱藏屬性有什麼區別？以略有不同的方式工作。 HTML隱藏屬性隱藏了所有用戶的元素，而ARIA隱藏屬性專門隱藏了輔助技術的元素。如果隱藏了一個元素，則不使用輔助技術的用戶仍然可以看到它。

>

>在使用html中的ListItem角色時，我如何避免冗餘？對於HTML中的“ LI”元素，角色是不必要的，因為它已經具有ListItem的隱含作用。將ListItem的ARIA角色添加到“ LI”元素中會產生冗餘。為避免這種情況，只需使用“ li”元素，而不必添加ARIA角色。

>冗餘對可訪問性審核的影響是什麼？

冗餘可以導致可訪問性失敗審核。這是因為冗餘的ARIA角色會混淆輔助技術，從而導致訪問較低的用戶體驗。通過避免冗餘，您可以提高網絡內容的可訪問性並增加通過可訪問性審核的機會。

>

>我如何有效地使用ARIA角色來增強可訪問性？在HTML規範沒有提供的情況下提供其他語義。它們不應用於復制HTML已經提供的語義。通過明智地使用ARIA角色並避免冗餘，您可以增強Web內容的可訪問性。

使用ARIA角色時，有什麼常見的錯誤？

>使用ARIA角色時避免的一些常見錯誤包括冗餘使用它們，錯誤地使用它們並過度使用它們。冗餘的詠嘆調角色可能會混淆輔助技術，而錯誤的使用可能會導致語義不正確。過度使用ARIA角色可能會使您的Web內容過於復雜且難以導航。

>我如何檢查我的HTML和ARIA代碼中的冗餘？

>使用可訪問性審核工具的詠嘆調代碼。這些工具可以識別代碼中冗餘的詠嘆調角色和其他可訪問性問題。通過解決這些問題，您可以改善網絡內容的可訪問性。

>輔助技術在Web可訪問性中的作用是什麼？

>

>輔助技術在Web可訪問性中起著至關重要的作用。他們幫助殘疾人訪問並與Web內容互動。輔助技術的示例包括屏幕讀取器，屏幕讀取器讀取了視覺障礙者的Web內容和語音識別軟件，這些軟件使具有移動性障礙的人可以用聲音控制計算機。輔助技術的功能嗎？ Web內容的功能。這使輔助技術可以為其用戶提供更準確和有用的Web內容表示。

以上是避免使用HTML頁面的Wai-Aria冗餘的詳細內容。更多資訊請關注PHP中文網其他相關文章！