數位發展部無障礙網路空間服務網

當瀏覽器焦點走到頁籤各項分類標題時，各項分類標題項目應加入 role="tab" 讓使用螢幕報讀軟體之使用者可以知道其為頁籤(索引標籤)之設計，並在被選取之頁籤加入 aria-selected="true" 讓螢幕報讀軟體可以報讀「已選取」之狀態訊息。

範例原始碼：

<ul>

    <li>

       <button type="button" class="active" role="tab" aria-selected="true">頁籤 一</button>

    </li>

    <li>

       <button type="button" role="tab" >頁籤二</button>

    </li>

    <li>

       <button type="button" role="tab" >頁籤三</button>

    </li>

 </ul>

 

參考資料：

【網站無障礙規範(110.07)】

指引4.1：相容性

針對目前及未來的使用者代理與輔助科技，最大化其相容性

 

成功準則4.1.2：名稱、角色和值

對於所有的使用者介面元件(包括但不限於表單組件、鏈結及由腳本所產生的組件)來說，其名稱及角色要能用程式化的方法判定；其能由使用者所設定的狀態、屬性、值，則要能用程式化的方式設定；而使用者代理，包括輔助科技，則要有這些項目變更的通知。

 

GN1410200E 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知