每日 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>
複製代碼

系統自帶

• Mac：打開 系統偏好設置>輔助功能 便可選擇視覺、聽覺、交互相關的幫助工具，例如放大鏡、色彩反轉、對比度設置等等。
• iPhone：打開 設置>通用>輔助功能 便可選擇視覺、聽覺、交互相關的幫助工具，例如放大鏡、色彩反轉、對比度設置等等。
• 原生安卓在這方面作得好像比較好，小二手頭只有一部 oppo r9 並無比較實用的輔助工具。
• Win：小二沒有使用 Win，歡迎你們到 Github 上幫助補充這部份內容。

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

一款谷歌瀏覽器插件使用後能夠模擬 色盲用戶 訪問頁面的效果，幫助咱們找出頁面中須要改進的地方。例如在掘金主頁選擇綠色盲模擬：

能夠很清楚的看出掘金的 藍色系 通通變成了 紫色系，對於紅色的重點內容被變爲了 黃色。

High Contrast

一款谷歌瀏覽器插件使用後能夠提升頁面的 對比度 模擬 顏色不明感 用戶訪問頁面的效果，幫助咱們找出頁面中須要改進的地方。例如在掘金主頁：

無障礙相關內容

• H1 の 小祕密
• img の 小九九
• 無障礙世界
• 扼住焦點的喉嚨
• 語義化與無障礙樹
• HTML Cosplay
• 無障礙工具

一塊兒成長

在困惑的城市裏總少不了並肩同行的 夥伴 讓咱們一塊兒成長。

• 若是您想讓更多人看到文章能夠點個 點贊。
• 若是您想激勵小二能夠到 Github 給個 小星星。
• 若是您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop