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