所謂 WAI-ARIA 是指 Web Accessibility Initiative’s Accessible Rich Internet Applications, 究竟何謂也？ＷAI 的部分指 “無障礙網頁倡議" 或是 “可訪問性倡議”. 就字面上來看, 就是一種讓網路使用變簡單的提案.
根據 [1], W3C 在 WCAG 2.0 裡將無障礙定義為: “縱使使用者能力不一，也能輕易使用網頁所提供的資訊和服務。“ (Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make Web content more accessible to people with disabilities. [2])
舉例來說, 網頁上放了一張圖, 那麼也要有文字說明. 如果使用顏色來區隔, 那麼也要有顏色以外的替代方案. 考慮到這些, 至少對於視障或是色盲的人上網比較方便. 同樣也有人行動不便, 那麼易於瀏覽或是輸入就對他們很重要.
WCAG 2.0 已經把可以用的招數分為 4 個 原則, 每個原則底下又有 guideline. 主要就是讓使用者可以容易感知, 操作, 了解, 並且穩固.
Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
Operable – User interface components and navigation must be operable.
Understandable – Information and the operation of user interface must be understandable.
Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
WCAG 2.0 將符合規範的程度 (Conformance Level) 分為 3 級: level A~ level AAA. 不過, 即使是到了最高級的 AAA, WCAG 2.0 也說不能保證沒問題. (“Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive – 認知 language and learning areas.")
至於 ARIA 有 1.0 和 1.1 [3] 兩個版本, 他們描述了如何具體實踐 WAI. 根據 [4], [5], ARIA 最明顯的實現方式在於加入 role 屬性 (landmark roles). 所謂的 role 就是角色, 在既有的 HTML 網頁當中, 額外描述這段 HTML 的功能. 例如:
- role=”banner”
- role=”navigation” (e.g., a menu)
- role=”main” (the main content of the page)
- role=”complementary” (e.g., a sidebar)
- role=”contentinfo” (meta data about the page, e.g., a copyright statement)
- role=”search”
- role=”form”
- role=”application” (a web application with its own keyboard interface)
如果一個網頁中有兩個同樣的 role, 就要進一步用不同的 (aria-)label 來區隔.
- <div role=”navigation” aria-label=”Main menu”>
- <div role=”navigation” aria-label=”User menu”>
除了 role 之外, 另外一個特色是多了 state (狀態) 和 property (屬性). 重要的有下面這些:
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-describedby
- aria-disabled (state)
- aria-dropeffect
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
state 的好處是, 讓使用者可以知道這個控制項的狀態, 例如 aria-checked 的狀態有 true, false, mixed 三種, 我們就知道 checkbox 點了沒有? 至於 propoerty 可以描述一個欄位允許的最大值, 最小值. 這的確也是很重要. State 和 property 的細節, 以及略過不提的其他特點等等, 可多參考中文的 [5], 這裡就先略過了.
最後來看一眼和我們工作有關的部分. 增加了 WAI-ARA 的支援之後, 它需要強大的底層支援, 如果要把文字敘述唸出來給視障的人聽, 系統就要具備文字轉語音 (TTS – Text to Speech) 的能力. 這些基礎建設相當於下圖 (來自[2]) 最右邊的方塊, 這個 Assistive Technology 就是系統要提供的了.
[REF]
Cash Chou's Blog 