Wai-Aria

什麼是 Wai-Aria

WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一組用於提高網頁和網頁應用程式的可訪問性的技術規範。WAI-ARIA 提供了一組標準的 HTML 屬性，用於描述網頁元素的角色、狀態和屬性，以幫助使用者獲取和使用網頁內容。

為什麼需要 Wai-Aria

WAI-ARIA 的出現是為了解決傳統 HTML 在無障礙性方面的不足。HTML 是一種用來描述網頁結構和內容的標記語言，但對於一些較複雜的網頁元素，像是動態內容或單頁應用程式（SPA），HTML 的描述能力相對有限，無法完全滿足使用者的需求。

舉個例子，假設我們有一個網頁上的按鈕組合，這個按鈕用來顯示或隱藏某些內容。雖然按鈕可以正常操作，但對於使用螢幕報讀器的使用者來說，他們可能無法清楚地知道這個按鈕的功能，或者內容是否已經被顯示或隱藏。

<button onclick="toggleContent()">顯示/隱藏內容</button>
<div id="content" style="display: none;">
  <p>這是一些隱藏的內容。</p>
</div>

<script>
  function toggleContent() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>

下面的範例，我們使用 WAI-ARIA 屬性來改進按鈕的可訪問性，

• aria-expanded 屬性用於指示按鈕的展開狀態，值為 true 或 false。
• aria-controls 屬性指示按鈕控制哪個內容區域，這有助於螢幕報讀器用戶理解按鈕的功能和影響範圍
• role="region" 和 aria-labelledby 屬性幫助確定內容區域的角色和它與按鈕的關聯，使輔助技術能夠提供更多上下文信息

<button
  id="toggleButton"
  aria-expanded="false"
  aria-controls="content"
  onclick="toggleContent()"
>
  顯示/隱藏內容
</button>
<div
  id="content"
  style="display: none;"
  role="region"
  aria-labelledby="toggleButton"
>
  <p>這是一些隱藏的內容。</p>
</div>

<script>
  function toggleContent() {
    var content = document.getElementById("content");
    var button = document.getElementById("toggleButton");
    if (content.style.display === "none") {
      content.style.display = "block";
      button.setAttribute("aria-expanded", "true");
    } else {
      content.style.display = "none";
      button.setAttribute("aria-expanded", "false");
    }
  }
</script>

Wai-Aria 的三大屬性

WAI-ARIA 定義了三大類屬性，分別是 role、state 和 property。

Role

Role 屬性是用來定義或重新定義 HTML 元素在輔助技術中的角色。這使得螢幕報讀器等輔助技術能夠更準確地理解和解釋網頁內容，即使這些內容包含動態或自定義的元素。

以下是一些常見的 role 屬性及其用途的介紹：

• role="button": 將非按鈕元素（如 <div> 或 <span>）轉變為按鈕，讓輔助技術將其視為一個按鈕。

<div role="button" tabindex="0" onclick="alert('Button clicked!')">點擊我</div>

• role="checkbox": 將非複選框元素轉變為複選框，讓輔助技術將其視為一個複選框。

<div
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  onclick="toggleCheckbox()"
>
  未選中
</div>

• role="tablist" 和 role="tab": 用於定義標籤頁的結構，讓輔助技術能夠理解標籤頁之間的關係。

<div role="tablist">
  <div role="tab" aria-selected="true">標籤1</div>
  <div role="tab" aria-selected="false">標籤2</div>
</div>

• role="alert": 用於定義警告，讓輔助技術能夠提醒使用者。

<div role="alert">請注意，您的訂單已經送出。</div>

• role="dialog": 用於定義對話框，讓輔助技術能夠識別並處理對話框。

<div role="dialog" aria-labelledby="dialogTitle">
  <h2 id="dialogTitle">確認</h2>
  <p>您確定要刪除此項目嗎？</p>
  <button onclick="closeDialog()">取消</button>
  <button onclick="deleteItem()">刪除</button>
</div>

<script>
  function closeDialog() {
    // 關閉對話框
  }

  function deleteItem() {
    // 刪除項目
  }
</script>

• role="region": 用於定義區域，讓輔助技術能夠識別並處理區域。

<div role="region" aria-labelledby="regionTitle">
  <h2 id="regionTitle">最新消息</h2>
  <p>這是一些最新的消息。</p>
</div>

State

State 是用來描述網頁元素目前的狀態，比如是否展開、是否選取、是否禁用等。WAI-ARIA 定義了一系列標準的狀態，通常使用 aria- 屬性來表示。開發者可以利用這些狀態，讓輔助技術更容易理解網頁元素當下的狀態。

以下是一些常見的 state 屬性及其用途的介紹：

• aria-expanded: 用於指示元素的展開狀態，值為 true 或 false。

<button aria-expanded="false" aria-controls="menu" onclick="toggleMenu()">
  顯示選單
</button>
<div id="menu" style="display: none;">
  <ul>
    <li>選項一</li>
    <li>選項二</li>
    <li>選項三</li>
  </ul>
</div>

<script>
  function toggleMenu() {
    var button = document.querySelector("button");
    var menu = document.getElementById("menu");
    var expanded = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", !expanded);
    menu.style.display = expanded ? "none" : "block";
  }
</script>

• aria-checked: 用於指示元素的選取狀態，值為 true、false 或 mixed。

<div
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  onclick="toggleCheckbox()"
>
  我同意條款和條件
</div>

<script>
  function toggleCheckbox() {
    var checkbox = document.querySelector('[role="checkbox"]');
    var checked = checkbox.getAttribute("aria-checked") === "true";
    checkbox.setAttribute("aria-checked", !checked);
  }
</script>

• aria-selected: 用於指示元素的選中狀態，值為 true 或 false。

<ul role="listbox">
  <li role="option" aria-selected="false">選項 1</li>
  <li role="option" aria-selected="true">選項 2</li>
  <li role="option" aria-selected="false">選項 3</li>
</ul>

• aria-disabled: 用於指示元素的禁用狀態，值為 true 或 false。

<button aria-disabled="true">禁用按鈕</button>

• aria-hidden: 用於指示元素的隱藏狀態，值為 true 或 false。

<div aria-hidden="true">這是一個隱藏的元素。</div>

Property

Property 是用來提供更多關於網頁元素的資訊，這些資訊通常是固定的，或是不會隨著使用者互動而經常變動的。這些屬性有助於輔助技術（像是螢幕報讀器）理解元素的角色、關聯性和行為，讓網頁應用變得更容易被使用。

以下是一些常見的 property 屬性及其用途的介紹：

• aria-label: 用於提供元素的人類可讀標籤，通常用於描述元素的功能或目的。

<button aria-label="關閉">X</button>

• aria-labelledby: 用於將一個元素與另一個標籤元素關聯起來，這個標籤元素的文本會被當作目標元素的標籤。這通常用於當標籤是網頁上的其他元素時。

<h2 id="sectionTitle">重要資訊</h2>
<div role="region" aria-labelledby="sectionTitle">
  <p>這是一些關於重要資訊的內容。</p>
</div>

• aria-describedby: 用於將一個元素與另一個描述元素關聯起來，這個描述元素的文本會被當作目標元素的描述。這通常用於提供更多關於元素的說明。

<input type="text" aria-describedby="usernameHelp" placeholder="請輸入用戶名" />
<p id="usernameHelp">請輸入您的用戶名。</p>

• aria-required: 用於指示元素是否為必填項，值為 true 或 false。

<input type="text" aria-required="true" placeholder="請輸入您的姓名" />

• aria-invalid: 用於指示元素的值是否無效，值為 true 或 false。

<input
  type="email"
  aria-invalid="true"
  placeholder="請輸入有效的電子郵件地址"
/>

參考資料

• WAI-ARIA 基礎
• WAI-ARIA 1.1 規範