何為無障礙？
好的網站設計是具有人文氣息的，不僅僅是視覺的美觀，載入渲染速度的快慢。而是使盡可能多的人能夠使用Web站點，即便他們有或多或少的缺陷。而「無障礙設計」，就是現代Web 開發中一個值得關注的分支，來讓我們開發易訪問的內容的網站。它主要體現在以下幾點：
- 讓視覺障礙者可以通過「螢幕閱讀器」（Screenreaders）得到友善的聽覺體驗。
- 設計需要對聽力障礙者友好，通過視覺內容能夠做出替代。這部分相關的程式事實上仍未得到足夠重視，任重道遠。
- 行動障礙者的優化更多的著重於是否能讓使用者僅用滑鼠的寥寥幾個按鍵就能得到有效的操作。
- 認知障礙者的優化主要體現在風格統一，使用者資訊展示要明確，業務邏輯要簡潔明瞭等等。
何為 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 應用的最大問題，為了實現複雜需求會大量使用非語義元素來實現一個控制元件，對於螢幕閱讀器而言是災難，對於使用者而言頁面等於不可用。
- 首先還是離不開角色，如果你想用 a 標籤做一個 button。可以，加上
role="button"即可。 - 熟悉表單驗證用的常規狀態屬性aria-required/aria-disabled/aria-selected 等屬性。
- 另外理解剛剛說過的aria-setsize 和 aria-posinset 能最大化給螢幕閱讀器提供資訊。
- 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.
推薦閱讀：