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-live來說，設置了這個屬性的元素，哪怕不能獲得焦點，屏幕閱讀器也會讀
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"就沒有必要了。
實例：
通過一個示例來看看role="presentation"運用前后對HTML元素可訪問樹對比。
|
在上面的代碼上添加role="presentation"：
|
table元素可訪問樹前后對比示意圖如下：
前面也說到過，並不是在HTML中添加ARIA角色對屏幕閱讀器就是好的，特別是對於一些默認帶有交互功能的元素中，添加ARIA就是浪費時間，比如：
| <button role="button">按我</button> <h1 role="heading" aria-level="1">標題一</h1> |
當然在HTML5的一些特定元素上，ARIA的role和自帶的語義化元素是可以重疊的，如下表所示:
假設有一個簡單的HTML5頁面:
|
如果你不想使用HTML5的元素，可以使用div來替代：
|
如圖所示：
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>標簽並且包含一個可訪問性名稱：
|
或者：
|
此時MSAA(Microsoft Active Accessibility )控制器的accName屬性值是user name：
另外label標簽元素是不能被用來給自定義控件提供一個訪問性名稱，除非label引用了HTML的labelable元素。
|
MSAA(Microsoft Active Accessibility )控制器的accName屬性值是user name：
除此之外，使用非HTML labelable元素來模擬控件，不管給其分配什么角色(role)都不會是HTML的labelable元素，比如下面的div元著作權歸作者所有。
|
MSAA(Microsoft Active Accessibility )控制器的accName屬性值是空的:
關於 Form
form 元素需要關聯一個 label 元素，所有的 button 都已經有了一個隱含的 label，所以不再需要顯示關聯。對於 input，select， checkbox， radio, button 則都需要顯示一個 label 元素。這樣 JAWS 在面對這個表單元素的
時候才能告訴用戶這個表單的作用。例如下面的 input， JAWS 會告訴用戶這個是需要輸入名字的一個輸入框。當 label 屬性不方便使用的時候，還可以通過 title 屬性達到相同的效果，也可以滿足 Webking 檢查的需要。下面的兩種
寫法都可以。但前提是 name 不需要被顯示出來。當 title 和 label 都設置的時候 title 會被 JAWS 忽略。
|
當一個表單元素如果前后都需要描述的時候， label 就顯得力不從心了。ARIA 規范的出現解決了這一問題。aria-labelledby 屬性可以設置多個值，說明這個表單元素是被那些值所描述的, aria-describedby屬性則更詳細的擴展
了這個描述。如下圖所示：
當 JAWS 把焦點放在 10 上的時候，會告訴用戶 10 表示的是 10 分鍾刷新一次。對應的 HTML 代碼如下所示。aria-required的屬性標識這個元素是必須的，JAWS 識別此元素並告知用戶必須輸入此元素。我們可以看到中間的 input
元素被多個元素來描述（aria-labelledby 中的幾個 id 值），這樣 JAWS 就能夠識別這個標簽，並且按照這個標簽的順序讀出前后的 label， 並且提示用戶如果還有更詳細的描述以及如何獲取這個更詳細的描述。當用戶需要
時，aria-describedby 所對應的元素信息就會被讀出來。增強了視力有障礙人士與普通人了解內容的一致性。
|
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元素不能有兩個角色，所有角色都是以這樣或那樣的方式進行主義化的，就像定義上面說的，一個元素不可能是兩種類型的對象。你能想象一個元素既是按鈕又是標題嗎？不可能，兩者只能選其一。選擇一個可以最可以體現元素功
能的角色。