每日 30 秒 ⏱ 無障礙工具

zhangxiangliang發表於2019-04-18

前言

無障礙、工具、外掛、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

一款谷歌瀏覽器外掛使用後可以提高頁面的 對比度 模擬 顏色不明感 使用者訪問頁面的效果，幫助我們找出頁面中需要改進的地方。例如在掘金主頁：

對比度工具

無障礙相關內容

一起成長

在困惑的城市裡總少不了並肩同行的 夥伴 讓我們一起成長。

  • 如果您想讓更多人看到文章可以點個 點贊。
  • 如果您想激勵小二可以到 Github 給個 小星星。
  • 如果您想與小二更多交流新增微信 m353839115。

微信公眾號

本文原稿來自 PushMeTop

相關文章