說說Web 無障礙設計

何爲無障礙？

好的網站設計是具備人文氣息的，不只僅是視覺的美觀，加載渲染速度的快慢。而是使盡量多的人可以使用Web站點，即使他們有或多或少的缺陷。而「無障礙設計」，就是現代Web 開發中一個值得關注的分支，來讓咱們開發易訪問的內容的網站。它主要體如今如下幾點：

1. 讓視覺障礙者能夠經過「屏幕閱讀器」（Screenreaders）獲得友善的聽覺體驗。
2. 設計須要對聽力障礙者友好，經過視覺內容可以作出替代。這部分相關的程序事實上仍未獲得足夠重視，任重道遠。
3. 行動障礙者的優化更多的着重因而否能讓用戶僅用鼠標的寥寥幾個按鍵就能獲得有效的操做。
4. 認知障礙者的優化主要體如今風格統一，用戶信息展現要明確，業務邏輯要簡潔明瞭等等。

何爲 WAI-ARIA?

關於WAI-ARIA (Web Accessibility Initiative's Accessible Rich Internet Applications 也就是：Web 無障礙倡議-無障礙富互聯網應用) 具體能夠看我翻譯的：WAI-ARIA basics。

WAI-ARIA 核心內容有哪些？

1.Signpost and Landmark (路牌與地標)

WAI-ARIA 給瀏覽器增長了 role 屬性，這容許咱們給站點中的元素增長咱們想要的語義屬性。 ARIA 的 角色 屬性值能夠做爲地標(Landmark) 來複制 HTML5 元素的語義化（例如 nav tag）。甚至超越HTML5 的語義，給不一樣的功能塊提供路標（Signpost），例如 search, tabgroup, tab, listbox 等等。

用法舉例：

如何用role

打開地址： mdn.github.io/learning-ar…

而後使用VoiceOver 綁定鍵（你能夠在VoiceOver Utility 中設置） + U 訪問，而後使用光標或者鍵盤來選擇菜單選項。因爲是結構化的內容，你經過鍵盤上下就能聽到對應的標題內容來跳轉須要的內容。 你就能看到:

每一塊都很分明，作的很差的，Landmarks 直接沒有，或者一個頁面一個banner 三個 navigation。

2.aria-label

<input type="search" name="q" placeholder="Search query" aria-label="Search through site content"> 
複製代碼

這樣當你聚焦的時候就會VoiceOver 會念出'Search through site content'。

3.aria-labelby

<input type="search" name="q" placeholder="Search query" aria-labelby="searchLabel">
<span id='searchLabel'>Search through site content</span>
複製代碼

2.動態內容更新

內容動態更新是對於無障礙是一個很麻煩的事情，由於早年的網站並無這個困擾，因此 WAI-ARIA 增長一個新的概念：實時區域（live region）。用屬性aria-live即可以觸發實時區域（role="alert" 也能夠），它有四個值：

• off: 默認值，更新不會提醒。
• polite: 只有用戶空閒的狀況下提醒。
• assertive: 儘快提醒。
• rude: 會以打斷用戶操做的方式直接提醒。

一般來講 assertive 設置足以讓你的更新在顯示時按時序讀出，所以，若是改變屢次，那麼屏幕閱讀器也只會念出最後一個改變。

那麼就會有一個問題，若是不斷增長子元素，那就會不斷的出現提示，增長的子元素的內容。

經過添加 aria-atomic="true" 屬性告訴屏幕閱讀器去讀取整個元素的內容做爲一個總體來判斷是否提示已修改， 而不是裏頭某個子元素增長刪除了。例子以下：

<section aria-live="assertive" aria-atomic="true">
複製代碼

以上內容大略的說說了幾個重點，至於具體全面的 aria-* 屬性/狀態， 請看 Definitions of States and Properties (all aria-* attributes) ，關於角色，請看Definition of Roles

3.優化鍵盤的無障礙操做

Tab 和確認鍵是HTML 默認實現的無障礙操做，經過對tabindex 的合理使用（並非處處亂用），可讓webpage 的操做體驗變得更好，另外一方面組合aria-setsize 和 aria-posinset 能最大化給屏幕閱讀器提供信息。 tabindex 文檔

4.非語義控件的可訪問性

這是現代複雜 Web 應用的最大問題，爲了實現複雜需求會大量使用非語義元素來實現一個控件，對於屏幕閱讀器而言是災難，對於使用者而言頁面等於不可用。

1. 首先仍是離不開角色，若是你想用 a 標籤作一個 button。能夠，加上role="button" 便可。
2. 熟悉表單驗證用的常規狀態屬性aria-required/aria-disabled/aria-selected 等屬性。
3. 另外理解剛剛說過的aria-setsize 和 aria-posinset 能最大化給屏幕閱讀器提供信息。
4. aria-hidden="true" 對屏幕閱讀器進行必定程度的隱藏。

If You Can't Measure It, You Can't Improve It

彼得•德魯克（Peter F. Drucker）說過這麼一句話，那麼咱們介紹兩款相關的軟件用來測量網站對於無障礙的實現程度。

The A11y Machine

npm install -g the-a11y-machine

a11ym --standards WCAG2AA,HTML https://developer.mozilla.org/
複製代碼

而後打開當前目錄下的 ./a11ym_output/index.html ，你能夠看到它對於總體的分析結果。而後note codes 指向的會是每個Web內容無障礙指南（WCAG）的每個實現細則，你能夠就像完成一個個代碼風格錯誤同樣逐個根據狀況修復它。

Accessibility Developer Tools

這是一款由谷歌可訪問性團隊開發的谷歌 Chrome Extension。 而後操做如圖：

順帶一說，Google 的Audits 功能是基於 Lighthouse 的，關於它能夠再寫一整篇文章，按下不表。

而後獲得的結果會是這樣的：

他的評價體系比起a11ym 不可不謂溫和。可是根據它給出的信息，咱們仍是能夠進行對應的優化。

比起發達國家，國內的互聯網技術的發展突飛猛進，可是從大部分的主流網站能夠看得出，除開大廠，你們對於無障礙的支持是不夠的。但我以爲這僅僅是出於不瞭解，若是不得而知，那麼就無從作起，因此咱們更多地說起無障礙技術，推廣它，便能讓中文互聯網世界的無障礙更進一步。

因此像Leonie Watson 說的：

It doesn't have to be perfect, Just a little bit better that yesterday.

推薦閱讀：

• Web內容無障礙指南 (WCAG) 2.0
• Web 無障礙倡議-無障礙富互聯網應用 基礎

博客原文