Hi there!

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

TL;DR

本篇文章學習目的:

使用原生語法時,不需用 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> 建立的,它不是非常具有描述性。