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