简介
无障碍、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 上一项选择，合理的设置页面的焦点帮助用户提供更多使用可能。
语义化：通过语义化帮助 无障碍相关 工具理解页面。
视觉设计：通过颜色和对比度、空间布局等帮助用户方便感知和理解页面。
一起成长在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
如果您想让更多人看到文章可以点个 点赞。
如果您想激励小二可以到 Github 给个 小星星。
如果您想与小二更多交流添加微信 m353839115。
本文原稿来自 PushMeTop
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103438.html
showImg(https://segmentfault.com/img/remote/1460000018891197); 简介 无障碍、WAI、ARIA、a11y、Accessibility、框架选择 如何向 视障用户 介绍兔子长什么样？有的同学可能会说： 毛茸茸的长耳朵。 短短圆圆的小尾巴。 红红的眼睛。 那如何向 视障用户 介绍网页长什么样？有看过 语义化与无障碍树 的同学可能会说： ...
简介 无障碍、HTML 小细节、焦点、a11y、Accessibility、框架选择 无障碍开发还是应该从 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、搜索引擎优化 在浩海的互联网世界中： 互联网 宛如 宇宙 站点 宛如 星系 网页 宛如 星球 网页内容 宛如 生灵万物 而在互联网世界漫游的搜索引擎爬虫小蜘蛛，就好比一搜穿梭在宇宙里的星际漫游器，想想是不是还挺浪漫的。对于不同的星系有着...
阅读 3380·2022-09-16 13:49
阅读 1212·2021-11-22 15:12
阅读 1330·2021-09-09 09:33
阅读 910·2019-08-30 13:15
阅读 1598·2019-08-29 15:30
阅读 463·2019-08-27 10:52
阅读 2482·2019-08-26 17:41
阅读 1724·2019-08-26 12:11
