{%hackmd @s6102161021/greenTheme %}

## 章節9 - WAI-ARIA
Web Accessibility Initiative (Web 可訪問性計畫組織)
Accessible Rich Internet Applications Suite (可訪問的豐富網路應用程式規範)

### WAI-ARIA
- 增強網頁的可訪問性:
- 補充、加強 HTML 的語義
- 例如:頁籤元件使用 role=”tablist”、role=”tab”、role=”tabpanel” 來呈現 HTML 缺少的含意
- 例如:＜button aria-label="關閉"＞X＜/button＞
- 例如:頁面中有多個＜nav＞ 時，用不同的 aria-label 區分其位置或功能
- 針對動態的網頁內容，補充元件當前的狀態、提示互動後可能會產生的結果
- 例如:暫停按鈕被按下前後的狀態:
- ＜button aria-pressed="false">暫停＜/button＞
- ＜button aria-pressed="true">暫停＜/button＞

### ARIA 屬性對網頁的影響
- 會補充 Accessibility Tree 的內容
- 例如:提供元素當前的狀態
- 會修改 Accessibility Tree
- 例如:ul > li 變成 menu > menuitem
- WAI-ARIA 其實是「只修改或補充 Accessibility Tree 的標示或資訊」
- 它不影響元素外觀、它不影響元素的行為
- 它無法新增取得焦點的能力（Focusability）
- 無法監聽鍵盤事件處理器（Event Handler）

### 謹慎使用 ARIA 屬性
- 沒有寫好的 ARIA 屬性反而會對螢幕閱讀器使用者造成誤導
- 或可能造成結構上的錯誤，例如:

<ul role="navigation">
    // 因為 role 的設定,瀏覽器會將上面這個 <ul> 辨識為 navigation 
    <li><a href="url1">nav link 1</a></li>
    <li><a href="url2">nav link 2</a></li>
    // 由於 <li> 必須放在 list 元件(<ul> 或 <ol>)內，這裡就會報錯
</ul>

### 較常用的 ARIA 屬性
- role
- 加強 HTML 結構的語義
- 常見:alert、button、dialog、grid、gridcell、group、tab、tablist、tabpanel...
- aria-label、aria-labelledby
- aria-hidden
- aria-haspopup、aria-modal
- aria-current
- aria-controls、aria-expanded

<div class="aStyle">

[補充: W3C ARIA屬性](https://www.w3.org/WAI/ARIA/apg/example-index/)
</div>

### role 的使用時機
- 使用語義化 HTML tag 有困難時(例如前面提到的模擬表格)
- 相較原生 HTML，瀏覽器或輔具確實提供 ARIA role 更好的支援
- 維護舊版本內容，要更新全部的 HTML tag 會使成本過高
- 建構自定義元件，該自定義元件沒有正確或足夠的語義時
- 例如 tab、menu...

### aria-label
- aria label 會為當前元素增加文字說明
- 使用時機:
- 頁面中有多個相同類型的元素,用 aria-label 來區分:
- 例如: header 裡有 nav、 footer 裡也有 nav
- 元件沒有足夠的文字讓使用者理解其功能:
- 例如: ＜button aria-label="關閉">X＜/button＞ [範例](https://codepen.io/judyshyu/pen/wvjzGKr)

### aria-labelledby
- 與 aria-label 剛好反過來，用來表示當前物件的標籤是誰
- 注意如果同時使用 aria-label,aria-labelledby 的權重較高 [範例](https://codepen.io/judyshyu/pen/wvjzGKr)
- 值是一個或多個 id，用空白隔開
- 與 aria-describedby 的差別：
- aria-labelledby：提供簡要的標籤敘述
- aria-describedby：提供詳細的說明資訊

<i>[講義p.74 ~ p.81]</i>