每日 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上一項選擇，合理的設定頁面的焦點幫助使用者提供更多使用可能。 - 語義化：通過語義化幫助
無障礙相關工具理解頁面。 - 視覺設計：通過顏色和對比度、空間佈局等幫助使用者方便感知和理解頁面。