讀過前篇文章,對 WAI-ARIA 已經有基本認知,就可以來認識 ARIA 的基本要素:角色、狀態、屬性,它提供特殊的可訪問性「屬性 Attributes」,可以添加到任何標記中。
本篇文章學習目的:
<input type="checkbox"> <!-- 不用加上 role="checkbox" -->
以 MDN 的進度條範例說明:
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /></div>
這個進度條是使用 <div>
建立的,它不是非常具有描述性。
role
的值「 progressbar」通知瀏覽器該元素實際上是一個基於 JavaScript 的進度條 Widget。aria-valuemin
和 aria-valuemax
屬性指定進度條的最小值和最大值, aria-valuenow
描述其當前狀態。