資訊專欄INFORMATION COLUMN
簡介
無障礙、DOM 小細節(jié)、前端開發(fā)、a11y、Accessibility
無障礙的英文為 Accessibility 由于單詞拼寫過長往往被縮寫為 a11y 其中 11 指的是中間有11個字母。
無障礙指的是在使用過程中，不管什么類型的用戶都可以正常使用。生活中最常見的就是無障礙設施 相信很多人都吐槽過，讓我們先從生活例子到前端開發(fā) 探討探討 無障礙 相關內容。
本文內容偏科普，作為接下來幾篇前端 無障礙 文章的引子。生活例子
盲道 是生活中最常見到的無障礙設施了，它的本意是幫助盲人和 老花眼等視力障礙人群進行方向指引，讓所有人都可以無障礙的行走在道路上。可是現實生活中的盲道往往和實際意義背道而馳：
這樣的盲道相信大家肯定不止一次吐槽過它到底有沒有用，除了盲道生活中還有很多這樣的無障礙設施：
公交車的 特殊座椅，設計初衷給 老弱病殘孕 使用，但是更多的時候是被 年輕人 給占用。
動車站的 無障礙電梯，設計初衷給使用 輪椅 和 老人 等行動不便的人使用，但是每次都能看到很多人去占用它。
電梯中的數字鍵下設置著 盲文 方便所有人無障礙使用。
紙幣上的也有 盲文 方便所有人無障礙使用。
與我何干很多同學可能會有這樣的問題 與我何干？其實除了基數較多的 特殊群體，我們有時候也會 暫時性 的成為 特殊群體。在特殊群體時間性上分為了：暫時性、永久性、情景性。
暫時性離小二身邊最近的例子便是 阿零 同學，打籃球摔倒時不小心用手去支撐地板導致骨折脫臼。在一些需要雙手操作的情景下會無能為力，比如有些手機應用需要用到 兩指縮放等操作，iPhone 提供了 輔助觸控 來實現無障礙：
誰能保證自己一輩子都 完好無恙 呢？就算是 兩塊胸肌八塊腹肌 的叉叉學長在連續(xù)一個多月加班下，由于脊柱壓迫導致了暫時性失明，并不是身強力壯就不會出事。同學們還是要多運動運動，不要久坐和埋頭在電腦面前。
永久性小二的小姨夫就是天生的 紅綠色盲，大家不要以為這個比例很低：
我國男色盲率：4.71+-0.074%
我國女色盲率：0.67+-0.036%
我國色盲基因攜帶者的頻率 ：8.98%
大多數的 PC 游戲都有幫助 色盲 的顏色反轉，例如大家常玩的 LOL 就有提供大家可以試試。iPhone 在輔助功能中也提供了：顯示調節(jié)、色彩濾鏡、對比度增強等功能來幫助 色盲、色弱、視力困難用戶。
情景性情景性 是生活中最經常接觸的無障礙。在會議和上班有時需要將手機調制靜音，當 微信 好友發(fā)來 語音 可以通過長按語音將其轉化為 文字。
很多同學沒想到吧？生活中的一些情景下也是需要無障礙來幫助我們。
無障礙分類無障礙主要分為：運動覺、視覺、聽覺、知覺，下面介紹幾個相關例子來幫助理解：
運動覺運動覺指的 運動障礙 和 靈巧性障礙：
骨折導致的操作不便，可以使用語音或者輔助設備等。
頸椎病導致頭部不能方便轉動，可以使用頭部、眼部跟蹤器等。
筆記本電腦的觸控面板失靈 或者 正在乘坐公交、地鐵等不方便使用鼠標的場景 ，可以利用 鍵盤快捷鍵 和 網頁無障礙功能等（下篇文章講到）。
視覺老花眼和視力障礙，使用 手機放大器 和 顯示放大器 等，不得不提的就是有些網站使用 maximum-scale=1.0 來禁止頁面被縮放，這些用戶該如何是好？
色盲、色弱，網頁提供一定的 對比度 和 顏色 使用或者切換的工具。
盲人，提供可以幫助 閱讀器辨識頁面 的工具，其實程序員中還有 盲人程序員。
聽覺聽力障礙，使用助聽器、人造耳蝸等，在使用軟件或者網頁，不能僅僅只給出 錯誤提示音 還需要對錯誤進行視覺提示。
知覺對于 ADD 難語證，應該減少 頁面干擾 和 認知負擔。
力所能及在前端頁面開發(fā)過程中，可以在 力所能及 的范圍內使用 無障礙閱讀 相關技巧：
如果目標群體并不需要 無障礙閱讀 可以考慮不使用。
日常開發(fā)任務重無暇顧及時，可以力所能及使用一部分，當閑暇時對前端頁面進行優(yōu)化。
四個參照可感知，并不是所有人可以看清頁面上的東西，例如針對色盲、色弱用戶對頁面的顏色進行一些處理。
可操作，并不是所有人都可以使用和常人一樣的工具，例如是否可以不使用 鼠標 和 觸摸屏 就能操作網頁。
易理解，設計過于 復雜 和 不一致 會對使得用戶困惑，例如輸入框只有設置 placeholder 而沒有設置 描述標簽，用戶可能輸入到一半就忘記自己在操作什么。
兼容性，用戶是否能夠通過盲人鍵盤、屏幕閱讀器來使用頁面，最熟知的便是 霍金大大 使用三個手指頭來操作設備。
三個主題接下來的文章將圍繞下面三個主題，其中 語義化 相關的內容在 SEO 系列文章中就提到過 H1 の 小秘密 和 img の 小九九、SEO 初體驗 便是 語義化 的一部分，實現 SEO 的同時還能幫助到 特殊群體用戶 豈不是妙哉。
焦點：使用鍵盤 tab 下一項選擇，tab + shift 上一項選擇，合理的設置頁面的焦點幫助用戶提供更多使用可能。
語義化：通過語義化幫助 無障礙相關 工具理解頁面。
視覺設計：通過顏色和對比度、空間布局等幫助用戶方便感知和理解頁面。
一起成長在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103438.html
showImg(https://segmentfault.com/img/remote/1460000018891197); 簡介 無障礙、WAI、ARIA、a11y、Accessibility、框架選擇 如何向 視障用戶 介紹兔子長什么樣？有的同學可能會說： 毛茸茸的長耳朵。 短短圓圓的小尾巴。 紅紅的眼睛。 那如何向 視障用戶 介紹網頁長什么樣？有看過 語義化與無障礙樹 的同學可能會說： ...
簡介 無障礙、HTML 小細節(jié)、焦點、a11y、Accessibility、框架選擇 無障礙開發(fā)還是應該從 HTML 開始聊起，無論是盲人閱讀器還是瀏覽器等工具最核心的部分還是在 HTML，畢竟沒了 CSS 只是不美觀了，沒了 JavaScript 只是少了交互和無限擴展的可能性。 有的同學會說了產品和老板拿著鞭子在后頭趕馬車哪里有時間寫這些。現實是這樣的，但是在選擇UI框架的時候可以選擇 無障礙...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡介 heading 標簽、SEO、無障礙閱讀 ps: 內容有點多，本來只想講一個點，但是關聯性太強了，所以辛苦大家了。 在學習 HTML 標簽的時候，很多教程只告訴你 怎么用 而沒有講清楚 是什么，讓我們一起從 h1 到 h6 開始重新認識 HTM...
showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/img-tag/poster.png); 簡介 SEO、跨域、無障礙閱讀、事件、圖片標簽 小九九 最直接的聯想便是 九九乘法表，但是 小九九 也用在形容一個人在心里打著算盤 小主意 和 小秘密。小秘密已經被 H1 の...
showImg(https://segmentfault.com/img/remote/1460000018825131); 簡介 SEO、robot.txt、搜索引擎優(yōu)化 在浩海的互聯網世界中： 互聯網 宛如 宇宙 站點 宛如 星系 網頁 宛如 星球 網頁內容 宛如 生靈萬物 而在互聯網世界漫游的搜索引擎爬蟲小蜘蛛，就好比一搜穿梭在宇宙里的星際漫游器，想想是不是還挺浪漫的。對于不同的星系有著...
閱讀 4122·2022-09-16 13:49
閱讀 1398·2021-11-22 15:12
閱讀 1519·2021-09-09 09:33
閱讀 1039·2019-08-30 13:15
閱讀 1720·2019-08-29 15:30
閱讀 654·2019-08-27 10:52
閱讀 2643·2019-08-26 17:41
閱讀 1896·2019-08-26 12:11
