HTML5中的aria與role,WAI-ARIA無障礙

WAI-ARIA無障礙

ARIA：Accessible Rich Internet Applications，它是W3C的 Web無障礙推進組織 (WAI) 在2014年3月20日釋出的 可訪問富網際網路應用 實現指南。

WAI：Web Accessibility Initiative （由 W3C 在1997年發起）是一系列計劃供 web 開發者、創作者以及設計者使用的指導方針 - 關於如何使內容對殘障人士更易用。

這些指導方針的目標是易用性（accessibility），但是也有助於使 web 內容可用於更多的瀏覽器（語音瀏覽器、行動電話、手持裝置），以及更多工作於困難環境的使用者（非手持式的、強光、黑暗、弱視、噪音等）。

為殘疾人士等提供無障礙訪問動態、可互動Web內容的技術規範

ARIA 是對 HTML 語義化的補充。它具備比現有的 HTML 元素和屬性更完善的表達能力，並讓你頁面中元素的關係和含義更明確

WAI 對您的網站來說很重要嗎？

是的。

每天都有百萬計的殘障人士在網上衝浪，並且甚至超過百萬計的人們正在使用著不良的瀏覽器裝置。
你知道網頁的無障礙是幹嘛的嗎？不，你不知道，你不會關心殘障人士是怎麼瀏覽網頁的，你只關心你自己！

假如您的網站缺乏諸如可調節字型尺寸、帶有文字描述的圖形以及便捷的導航，那些人們就無法訪問您的資訊。

事實上：您的網站剝奪了這些人的權利。

增強網站易用性的理由還有：

可提升網站的美譽度和形象
可提升使用者滿意度
可增加訪問者的數量
可增加訪問者在站點的停留時間
可增加訪問者的回訪數量
可同樣為無殘疾人士增加可用性
可為關閉圖形功能的訪問者增加可用性
可為使用老式裝置的人群增加可用性
可使您的網站為增長速度最快的人群提供服務：老年人群

如何使用ARIA

應用於HTML的ARIA有兩部分組成： role （角色）和帶 aria- 字首的屬性，其作用：

• role (角色)標識了一個元素的作用
• aria- 屬性描述了與之有關的事物（特徵）及其是什麼樣的（狀態）

ARIA 的角色 role

role 屬性值	含義
alert	表示警告
dialog	表示Modal彈出窗
presentation	表示描述
application	表示應用
button	表示按鈕
raido	表示單選框
checkbox	表示核取方塊
combobox	表示表單控制元件
grid	表示網格
gridcell	表示單元格
group	表示組合並
heading	表示標題、h1
listbox	表示列表框、select
option	表示選項
menu	表示選單
menubar	表示選單欄
menuitem	表示選單項
menuitemradio	只能單選的選單項
menuitemcheckbox	可複選的選單項

上表中並沒有列出所有ARIA的角色，當然並不是所有的HTML元素都具有對應的ARIA的 role

ARIA的屬性

下表介紹了ARIA相關屬性的使用方法。

屬性名	說明
aria-activedescendant	字串。當工具欄獲取焦點時，它的子控制元件獲取焦點，屬性值取：後代元素的 id 值
aria-atomic	字串。表示區域內容是否完整播報。值為 true 和 false
aria-autocomplete	字串。表示表單的自動完成，可選值有 inline 、 list 、both 和 none。
aria-busy	字串。表示當前區域的忙碌狀態。預設為 false。取值為 true 時，表示該區域正在載入。取值為 error 時，表示該區域驗證無效
aria-controls	字串。如果指定了不只一個 id , 所有元素會合並在一起共同建立一條單獨的描述。
aria-dropeffect	字串。表示拖拽效果。可選值有 copy , move , reference , execute , popup , none , 依次表示 複製，移動，參照，執行，彈出以及沒有效果。
aria-flowto	字串。如果對應的是多個 id , 則輔助技術會讓使用者去選擇、導航到目標元素。
aria-grabbed	字串。拖拽中元素的捕獲狀態。預設為 undefined ，表示元素捕獲狀態未知。 true 表示元素可以捕獲； false 表示不能被捕獲。
aira-haspopup	字串。true 表示點選的時候會出現選單或是浮動元素； false 表示沒有pop-up效果。
aria-label	字串。定義一個字串值標記當前元素。
aria-labelledby	字串。一般用在區域元素上，對應的 id 一般為對應的標題或是標籤元素的 id 關係型屬性。
aria-live	字串。預設為off, 表示不宣佈更新；polite 表示只有使用者閒時宣佈；assertive 表示儘快對使用者宣佈；rude 表示即時提醒使用者，必要的時候甚至中斷使用者。
aria-multiselectable	字串。表示是否可多選。預設為 false , 表示一次只能選擇一個項。 true 表示一次可以選擇多個項。
aria-owns	字串。表示元素所擁有的、值為目標元素 id
aria-readonly	字串。表示是否只讀。預設為 false , 表示元素值可以被修改。
aria-relevant	字串。表示區域內哪些操作行為需要做出反應。additions 新增時, removals 刪除時, text 改變時, all 同時使用以上三個屬性值。
aria-required	字串。表示元素值是否必須，預設為false。
aria-secret	字串。表示機密狀態
aria-sort	字串。表示表格或格柵中的項是以升序排列還是降序排列，值ascending (↑), descending (↓), none , other
aria-valuetext	字串。定義等同於 aria-valuenow 可讀的文字
aria-level	數值。表示等級
aria-posinset	數值。用在設定和獲取一個集合內某項的當前位置
aria-valuemax	數值，允許的最大值
aria-valuemin	數值，允許的最小值
aria-valuenow	數值，表示當前值

ARIA狀態

下表介紹了ARIA相關狀態的使用方法。

屬性狀態	說明
aria-checked	字串。表示檢查的狀態。 true 表示元素被選擇； false 表示元素未被選擇； mixed 表示元素同時有選擇和未選擇狀態。
aria-disabled	字串。表禁用狀態， true 表示當前是非啟用狀態； false 表示清除非啟用狀態。
aria-expanded	字串。表示展開狀態。預設為 undefined , 表示當前展開狀態未知。其它可選值： true 表示元素是展開的； false 表示元素不是展開的。
aria-hidden	字串。可選值為 true 和 false , true 表示元素隱藏(不可見)， false 表示元素可見。
aria-invalid	字串。表示元素值是否錯誤的。預設為 false , 表示是OK的，如果為 true , 則表示值驗證不通過。
aria-pressed	字串。表示按下的狀態，預設為 undefined , 表示按下狀態未知； true 表示元素往下（按鈕按下）； false 表示元素抬起； mixed 表示元素同時有按下和沒有按下的狀態。
aria-selected	字串。表示選擇狀態。 預設為 undefined ，表示元素選擇狀態未知。 true 表示元素已選擇； false 表示未被選中。

使用 “alt” 屬性

alt 屬性允許你為影像（也可以為其它的元素）提供一條相對應的文字。

例項:

<img src="images/banana.jpg" alt="Banana">

有時候瀏覽器會無法顯示影像。具體的原因有：

使用者關閉了影像顯示
瀏覽器是不支援圖形顯示的迷你瀏覽器
瀏覽器是語音瀏覽器（供盲人和弱視人群使用）

如果您使用了 alt 屬性，那麼瀏覽器至少可以顯示或讀出有關影像的描述。