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