每日 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 上一项选择，合理的设置页面的焦点帮助用户提供更多使用可能。
• 语义化：经过语义化帮助 无障碍相关 工具理解页面。
• 视觉设计：经过颜色和对比度、空间布局等帮助用户方便感知和理解页面。

无障碍相关内容

• H1 の 小秘密
• img の 小九九
• 无障碍世界
• 扼住焦点的喉咙
• 语义化与无障碍树
• HTML Cosplay
• 无障碍工具

一块儿成长

在困惑的城市里总少不了并肩同行的 伙伴 让咱们一块儿成长。

• 若是您想让更多人看到文章能够点个 点赞。
• 若是您想激励小二能够到 Github 给个 小星星。
• 若是您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop