Hi there!

讀過前篇文章，對 WAI-ARIA 已經有基本認知，就可以來認識 ARIA 的基本要素：角色、狀態、屬性，它提供特殊的可訪問性「屬性 Attributes」，可以添加到任何標記中。

TL;DR

本篇文章學習目的：

• 瞭解何時才需要使用 ARIA
• 知道角色是一種加在 HTML 上的屬性
• 知道角色的分類

使用原生語法時，不需用 ARIA 覆蓋原生語義

<input type="checkbox"> <!-- 不用加上 role="checkbox" -->

需要使用 ARIA 的狀況

以 MDN 的進度條範例說明：

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /></div>

這個進度條是使用 <div> 建立的，它不是非常具有描述性。

• HTML 4 中沒有更多的語義標記可供開發人員使用，因此我們需要包含 ARIA 角色和屬性。 通過向元素添加屬性來指定這些屬性。在這個範例中， role 的值「 progressbar」通知瀏覽器該元素實際上是一個基於 JavaScript 的進度條 Ｗidget。
• aria-valuemin 和 aria-valuemax 屬性指定進度條的最小值和最大值， aria-valuenow 描述其當前狀態。

// 找到 <div> 客製的進度條
var progressBar = document.getElementById("percent-loaded");

// 透過 JS 加上 ARIA 屬性，使輔助工具可以知道它是什麼，並且設好最小值與最大值
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// 建立一個準備作為 callback 的 function，當進度一更動，將設定值改成目前進度。
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

角色 Role

（來源：Google Developers）

2.1 WAI-ARIA Roles in WAI-ARIA 1.1
A WAI-ARIA role is set on an element using a role attribute, similar to the role attribute defined in Role Attribute.

WAI-ARIA 中定義一系列的角色模型，讓我們可以賦予給元素，充當沒有提供定義結構的 UI Wiget，每個角色有其定位與可以使用的 aria-* 屬性，以讓使用者能夠預期該功能的操作行為。

角色一共分為六類

1. Abstract Roles 抽象：用於定義通用角色概念，開發者不可使用。
   • command、composite、input、landmark、range 、roletype、section、sectionhead 、select、structure、widget、window。
2. Document Structure Roles 文件結構：描述文件頁面內容的結構，通常不是可互動式的。
   • application、article、cell、columnheader、definition、directory、document、feed 、figure、group、heading、img、list、listitem、math、none、note、presentation、row、rowgroup、rowheader、separator(當無法取得焦點時)、table、term、toolbar 、tooltip
3. Widget Roles 組件功能：
   • 作為小組件或較大組件中的小項目之一：
     • button、checkbox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、progressbar、radio、scrollbar、searchbox、separator（當可取得焦點時）、slider、spinbutton、switch、tab、tabpanel、textbox、treeitem。
   • 通常做為組件的容器的角色：
     • combobox、grid、listbox、menu、menubar、radiogroup、tablist、tree、treegrid。
4. Landmark Roles 標誌：最容易實現的 Role 角色之一，也是為螢幕閱讀器使用者提供顯著直接好處的屬性之一
   • banner、complementary、contentinfo、form、main、navigation、region、search。

<!-- 一個頁面中若有重複的導航列 -->
<div role=”navigation” aria-label=”Main menu”> ... </div>
<div role=”navigation” aria-label=”User menu”> ... </div>

5. Live Region Roles 實時區域：隨時依據狀況更新的角色。
   • alert、log、marquee、status、timer。
6. Window Roles 視窗：在應用程式中作為新視窗來展示資訊的角色。
   • alertdialog、dialog。

詳細的角色分類列表與其定義請直接參考 5.3 Categorization of Roles 。

角色分成這麼多類型，還真的都有其目的與走向，看了有點眼花！不過我們也不用全背，這篇文章只是根據官方文件先整理起來的快速查閱表，之後實作會以 3~5 為主，這是我比較想知道的地方！

Reference

• ARIA 標籤和關係 - Google Developers
• ARIA Landmark Roles - University of Washington
• Using ARIA - Working Draft of W3C
• Introduction to WAI ARIA - Opera