无障碍开发（六）之ARIA在HTML中的使用规则
ARIA使用規(guī)則一
如果你使用的元素( HTML5 )具有語義化，應(yīng)該使用這些元素，而不應(yīng)該重新定義一個添加ARIA的角色、狀態(tài)或?qū)傩缘脑亍?
瀏覽器的語義化標(biāo)簽已經(jīng)默認(rèn)隱含ARIA語義，像nav,article,button已經(jīng)隱含ARIA的role="navigation",role="article",role="button"聲明。在語義化標(biāo)簽出來之前，常見的元素如<div class="main-navigation" role="navigation">。現(xiàn)在可以使用nav
來代替div，而且不再需要添加role="navigation"。可以到W3C的目錄上去查看，哪些元素已經(jīng)隱含的ARIA屬性。
那么什么時候可用和不可用ARIA呢？
-
在HTML(HTML5)元素特性不管支持或不支持，只要不具語義化，就可以使用ARIA
-
排除視覺設(shè)計約束使用一個特定的元素，但不能是樣式上所需的元素
-
目前尚不支持的HTML特性
ARIA使用規(guī)則二
不改變原始的語義，不應(yīng)該為一個語義化的標(biāo)簽定義不同的角色，通過添加role去重定義語義化的標(biāo)簽，但是，如果必須重定義，那就使用嵌套HTML元素來替代
?
例如，開發(fā)者想創(chuàng)建一個標(biāo)題，而且它是一個按鈕。
不要這樣做：
| <h1 role=button>標(biāo)題按鈕</h1> |
建議這樣做：
| <h1><button>標(biāo)題按鈕</button></h1> |
或者說，你不使用正確的元素，但你可以這樣做：
| <h1><span?role=button>標(biāo)題按鈕</span></h1> |
如果使用一個非交互的元素做為一個交互的元素，那么開發(fā)人員必須使用ARIA添加語義和使用適當(dāng)?shù)哪_本增加交互行為。
ARIA使用規(guī)則三
所有的ARIA制作控件都必須具有鍵盤(keyboard)事件。（能獲得光標(biāo)焦點(diǎn)）
如果創(chuàng)建一個組件(widget)，用戶可以點(diǎn)擊、拖放、滑動或滾動，用戶使用鍵盤能定位到創(chuàng)建好的組件部件上，并且執(zhí)行相應(yīng)的操作動作。
例如，如果使用 role=button 必須能夠接收到焦點(diǎn)和用戶能夠使用鍵盤激活相應(yīng)動作，比如Win操作系統(tǒng)上的 enter 和iOS系統(tǒng)上的 return 或者鍵盤的空格鍵( space )。
ARIA使用規(guī)則四
不建議在可獲取焦點(diǎn)的元素上使用ARIA的角色： role=presentation 或 aria-hidden="true" 。?
可獲取焦點(diǎn)元素上使用ARIA這兩規(guī)則，會導(dǎo)致一些用戶無法獲取元素焦點(diǎn)。
不要這樣做：
| <button?role=presentation>按下我，按下我</button> |
也不要這樣做：
| <button?aria-hidden="true">按下我，按下我</button> |
如果說一個交互元素?zé)o法看到或者不能與之交互，那么可以嘗試使用aria-hidden，例如：
| button {visibility:hidden} ?<button?aria-hidden="true">按下我，按下我</button> |
如果一個交互元素使用display:none;來隱藏，那么它對應(yīng)的可訪問性也將一并被刪除，如此一來，在可交互元素上使用aria-hidden="true"就沒有必要了。
ARIA使用規(guī)則五
所有交互元素都必須有一個可訪問的名稱。
當(dāng)可交互元素的可訪問性API的可訪問名屬性只有一個值時，那么可交互元素就只有一個可訪問的名稱。
比如下面的示例，input type="text"有一個可見的<label>標(biāo)簽,但它并沒有可訪問的名稱：
| user name <input type="text"> |
或者:
| <label>user name</label>?<input?type="text"?/> |
此時MSAA(Microsoft Active Accessibility?)控制器的accName屬性是空的：
相比之下，下面示例中input type="text"有一個可見的<label>標(biāo)簽并且包含一個可訪問性名稱：
| <label>user name <input type="text"></label> |
或者：
| <label for="uname">user name</label> <input type="text" id="uname"> |
此時MSAA(Microsoft Active Accessibility?)控制器的accName屬性值是user name：
另外label標(biāo)簽元素是不能被用來給自定義控件提供一個訪問性名稱，除非label引用了HTML的labelable元素。
| <!-- HTML input element with combox role --><label> user name <input type="text" role="combobox" > </label> |
MSAA(Microsoft Active Accessibility?)控制器的accName屬性值是user name：
除此之外，使用非HTML?labelable元素來模擬控件，不管給其分配什么角色(role)都不會是HTML的labelable元素，比如下面的div元著作權(quán)歸作者所有。
| <!-- HTML div element with combox role --><label> user name <div role="combobox"></div> </label> |
?
MSAA(Microsoft Active Accessibility?)控制器的accName屬性值是空的:
ARIA使用規(guī)則六
元素只能有一個角色，一個元素不能有多個ARIA角色，role的定義如下：
| Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type. |
HTML元素不能有兩個角色，所有角色都是以這樣或那樣的方式進(jìn)行主義化的，就像定義上面說的，一個元素不可能是兩種類型的對象。你能想象一個元素既是按鈕又是標(biāo)題嗎？不可能，兩者只能選其一。選擇一個可以最可以體現(xiàn)元素功
能的角色。
轉(zhuǎn)載于:https://www.cnblogs.com/kunmomo/p/11569692.html
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的无障碍开发（六）之ARIA在HTML中的使用规则的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 无障碍开发（五）之设置获取无障碍属性值
- 下一篇： 无障碍开发（七）之实例讲解