每日 30 秒 ⏱ 無障礙世界

簡介

無障礙、DOM 小細節、前端開發、a11y、Accessibility

無障礙的英文爲 Accessibility 因爲單詞拼寫過長每每被縮寫爲 a11y 其中 11 指的是中間有11個字母。

無障礙指的是在使用過程當中，無論什麼類型的用戶均可以正常使用。生活中最多見的就是無障礙設施 相信不少人都吐槽過，讓咱們先從生活例子到前端開發 探討探討 無障礙 相關內容。

本文內容偏科普，做爲接下來幾篇前端 無障礙 文章的引子。

生活例子

盲道 是生活中最多見到的無障礙設施了，它的本意是幫助盲人和 老花眼等視力障礙人羣進行方向指引，讓全部人均可以無障礙的行走在道路上。但是現實生活中的盲道每每和實際意義背道而馳：

這樣的盲道相信你們確定不止一次吐槽過它到底有沒有用，除了盲道生活中還有不少這樣的無障礙設施：

• 公交車的 特殊座椅，設計初衷給 老弱病殘孕 使用，可是更多的時候是被 年輕人 給佔用。
• 動車站的 無障礙電梯，設計初衷給使用 輪椅 和 老人 等行動不便的人使用，可是每次都能看到不少人去佔用它。
• 電梯中的數字鍵下設置着 盲文 方便全部人無障礙使用。
• 紙幣上的也有 盲文 方便全部人無障礙使用。

與我何干

不少同窗可能會有這樣的問題 與我何干？其實除了基數較多的 特殊羣體，咱們有時候也會 暫時性 的成爲 特殊羣體。在特殊羣體時間性上分爲了：暫時性、永久性、情景性。

暫時性

離小二身邊最近的例子即是 阿零 同窗，打籃球摔倒時不當心用手去支撐地板致使骨折脫臼。在一些須要雙手操做的情景下會無能爲力，好比有些手機應用須要用到 兩指縮放等操做，iPhone 提供了 輔助觸控 來實現無障礙：

誰能保證本身一生都 無缺無恙 呢？就算是 兩塊胸肌八塊腹肌 的叉叉學長在連續一個多月加班下，因爲脊柱壓迫致使了暫時性失明，並非身強力壯就不會出事。同窗們仍是要多運動運動，不要久坐和埋頭在電腦面前。

永久性

小二的小姨夫就是天生的 紅綠色盲，你們不要覺得這個比例很低：

• 我國男色盲率：4.71+-0.074%
• 我國女色盲率：0.67+-0.036%
• 我國色盲基因攜帶者的頻率 ：8.98%

大多數的 PC 遊戲都有幫助 色盲 的顏色反轉，例如你們常玩的 LOL 就有提供你們能夠試試。iPhone 在輔助功能中也提供了：顯示調節、色彩濾鏡、對比度加強等功能來幫助 色盲、色弱、視力困難用戶。

情景性

情景性 是生活中最常常接觸的無障礙。在會議和上班有時須要將手機調製靜音，當 微信 好友發來 語音 能夠經過長按語音將其轉化爲 文字。

不少同窗沒想到吧？生活中的一些情景下也是須要無障礙來幫助咱們。

無障礙分類

無障礙主要分爲：運動覺、視覺、聽覺、知覺，下面介紹幾個相關例子來幫助理解：

運動覺

運動覺指的 運動障礙 和 靈巧性障礙：

• 骨折致使的操做不便，可使用語音或者輔助設備等。
• 頸椎病致使頭部不能方便轉動，可使用頭部、眼部跟蹤器等。
• 筆記本電腦的觸控面板失靈 或者 正在乘坐公交、地鐵等不方便使用鼠標的場景 ，能夠利用 鍵盤快捷鍵 和 網頁無障礙功能等（下篇文章講到）。

視覺

• 老花眼和視力障礙，使用 手機放大器 和 顯示放大器 等，不得不提的就是有些網站使用 maximum-scale=1.0 來禁止頁面被縮放，這些用戶該如何是好？
• 色盲、色弱，網頁提供必定的 對比度 和 顏色 使用或者切換的工具。
• 盲人，提供能夠幫助 閱讀器辨識頁面 的工具，其實程序員中還有 盲人程序員。

聽覺

• 聽力障礙，使用助聽器、人造耳蝸等，在使用軟件或者網頁，不能僅僅只給出 錯誤提示音 還須要對錯誤進行視覺提示。

知覺

• 對於 ADD 難語證，應該減小 頁面干擾 和 認知負擔。

力所能及

在前端頁面開發過程當中，能夠在 力所能及 的範圍內使用 無障礙閱讀 相關技巧：

• 若是目標羣體並不須要 無障礙閱讀 能夠考慮不使用。
• 平常開發任務重無暇顧及時，能夠力所能及使用一部分，當閒暇時對前端頁面進行優化。

四個參照

• 可感知，並非全部人能夠看清頁面上的東西，例如針對色盲、色弱用戶對頁面的顏色進行一些處理。
• 可操做，並非全部人均可以使用和常人同樣的工具，例如是否能夠不使用 鼠標 和 觸摸屏 就能操做網頁。
• 易理解，設計過於 複雜 和 不一致 會對使得用戶困惑，例如輸入框只有設置 placeholder 而沒有設置 描述標籤，用戶可能輸入到一半就忘記本身在操做什麼。
• 兼容性，用戶是否可以經過盲人鍵盤、屏幕閱讀器來使用頁面，最熟知的即是 霍金大大 使用三個手指頭來操做設備。

三個主題

接下來的文章將圍繞下面三個主題，其中 語義化 相關的內容在 SEO 系列文章中就提到過 H1 の 小祕密 和 img の 小九九、SEO 初體驗 即是 語義化 的一部分，實現 SEO 的同時還能幫助到 特殊羣體用戶 豈不是妙哉。

• 焦點：使用鍵盤 tab 下一項選擇，tab + shift 上一項選擇，合理的設置頁面的焦點幫助用戶提供更多使用可能。
• 語義化：經過語義化幫助 無障礙相關 工具理解頁面。
• 視覺設計：經過顏色和對比度、空間佈局等幫助用戶方便感知和理解頁面。

無障礙相關內容

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

一塊兒成長

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

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

本文原稿來自 PushMeTop