每日 30 秒 ⏱ 無障礙工具
無障礙、工具、外掛、a11y、Accessibility
其實 無障礙 離我們挺近的例如：
- 色盲：男生患有的比例為
1/12，女生患有的比例為1/200。 - 老年人：看不清字需要使用放大鏡、視覺靈敏度降低需要對比度太低的內容看不清。
- 孕婦：抱著小孩不能雙手進行操作。
在編碼和設計的時可以對這部分人群做出相應的幫助。對於無障礙設計方面可以看看下面這篇文章無障礙設計 非常詳細，下面也給出一些用於無障礙開發的相關工具。
更多內容可以閱讀無障礙世界
工具
WAI-ARIA
在上一篇文章HTML Cosplay 已經對 WAI-ARIA 有了一定的瞭解，其實WAI-ARIA 與前端開發並不衝突，你也可以把它當做開發的一個工具。例如在開發一個前端的按鈕時：
<style>
.button {}
.button.pressed {}
</style>
<!-- 按鈕 -->
<div class="button">
我是一個按鈕
</div>
<!-- 按鈕被啟用 -->
<div class="button pressed">
我是一個按鈕
</div>
複製程式碼
用上 WAI-ARIA 的 aria-pressed 來替代 pressed 還增加了按鈕的語義：
<style>
.button {}
.button[aria-pressed="true"] {}
</style>
<!-- 按鈕 -->
<div class="button"
role="button"
aria-pressed="false">
我是一個按鈕
</div>
<!-- 按鈕被啟用 -->
<div class="button"
role="button"
aria-pressed="true">
我是一個按鈕
</div>
複製程式碼
系統自帶
系統偏好設定>輔助功能 設定>通用>輔助功能 oppo r9
VoiceOver
一款蘋果公司出品的無障礙輔助工具，內置於 Mac 電腦和 iPhone、iPad 等裝置中。對於 Mac 電腦的使用在語義化與無障礙樹中已經有提到過，這裡給出幾個能流利使用的快捷鍵：
-
control+option+右箭頭/左箭頭：切換導航，相當於焦點中的tab。 -
control+option+shift+下箭頭/上箭頭：進入或退出當前導航選中的內容。 -
control+option+command+h：閱讀網頁內容中的heading。 -
control+option+space：模擬滑鼠點選事件。 -
control+option+u：使用轉子。
對於 iPhone 和 iPad 快捷鍵：
- 單指輕點一次：選著專案。
- 單指輕點兩次：模擬點選專案。
- 單指左右滑動：切換專案。
- 雙指點選：停止閱讀。
- 雙指旋轉：選擇切換模式，只瀏覽連結、heading 等。
- 三指上下滑動：進行滾動或翻頁。
Chrome Accessibility
在語義化與無障礙樹 中提到過這是谷歌瀏覽器自帶的一個功能，當你在控制檯 Elements 下選擇節點或者審查元素的時候會給出 無障礙樹 的相關內容：
在 Audits 中也增加了 Accessibility 的選項：
當點選 Run audits 谷歌瀏覽器會給出當前頁面無障礙相關的 評分 和 可優化 的地方而且內容十分詳細：
在 Color Contrast Is Satisfactory 中還可以看到當前頁面對於 顏色的建議 ，當然也可以在 Elements 中直接點選顏色：
在上面圖片中可以看到，給出了兩條對比曲線可以提供 選擇 ，並且給出了相應的評分，當然這只是作為一個參考並不是強制要求當做教條來使用。
NoCoffee
一款谷歌瀏覽器外掛使用後可以模擬 色盲使用者 訪問頁面的效果，幫助我們找出頁面中需要改進的地方。例如在掘金主頁選擇 綠色盲模擬 ：
可以很清楚的看出掘金的 藍色系 統統變成了 紫色系 ，對於紅色的重點內容被變為了 黃色 。