每日 30 秒 ⏱ 无障碍世界

简介

无障碍、DOM 小细节、前端开发、a11y、Accessibility

无障碍的英文为 Accessibility 由于单词拼写过长往往被缩写为 a11y 其中 11 指的是中间有11个字母。

无障碍指的是在使用过程中，不管什么类型的用户都可以正常使用。生活中最常见的就是无障碍设施 相信很多人都吐槽过，让我们先从生活例子到前端开发 探讨探讨 无障碍 相关内容。

本文内容偏科普，作为接下来几篇前端 无障碍 文章的引子。

盲道 是生活中最常见到的无障碍设施了，它的本意是帮助盲人和 老花眼等视力障碍人群进行方向指引，让所有人都可以无障碍的行走在道路上。可是现实生活中的盲道往往和实际意义背道而驰：

这样的盲道相信大家肯定不止一次吐槽过它到底有没有用，除了盲道生活中还有很多这样的无障碍设施：

很多同学可能会有这样的问题 与我何干？其实除了基数较多的 特殊群体，我们有时候也会 暂时性 的成为 特殊群体。在特殊群体时间性上分为了：暂时性、永久性、情景性。

离小二身边最近的例子便是 阿零 同学，打篮球摔倒时不小心用手去支撑地板导致骨折脱臼。在一些需要双手操作的情景下会无能为力，比如有些手机应用需要用到 两指缩放等操作，iPhone 提供了 辅助触控 来实现无障碍：

谁能保证自己一辈子都 完好无恙 呢？就算是 两块胸肌八块腹肌 的叉叉学长在连续一个多月加班下，由于脊柱压迫导致了暂时性失明，并不是身强力壮就不会出事。同学们还是要多运动运动，不要久坐和埋头在电脑面前。

小二的小姨夫就是天生的 红绿色盲，大家不要以为这个比例很低：

大多数的 PC 游戏都有帮助 色盲 的颜色反转，例如大家常玩的 LOL 就有提供大家可以试试。iPhone 在辅助功能中也提供了：显示调节、色彩滤镜、对比度增强等功能来帮助 色盲、色弱、视力困难用户。

情景性 是生活中最经常接触的无障碍。在会议和上班有时需要将手机调制静音，当 微信 好友发来 语音 可以通过长按语音将其转化为 文字。

很多同学没想到吧？生活中的一些情景下也是需要无障碍来帮助我们。

无障碍主要分为：运动觉、视觉、听觉、知觉，下面介绍几个相关例子来帮助理解：

运动觉指的 运动障碍 和 灵巧性障碍：

老花眼和视力障碍，使用 手机放大器 和 显示放大器 等，不得不提的就是有些网站使用 maximum-scale=1.0 来禁止页面被缩放，这些用户该如何是好？
色盲、色弱，网页提供一定的 对比度 和 颜色 使用或者切换的工具。
盲人，提供可以帮助 阅读器辨识页面 的工具，其实程序员中还有盲人程序员。

在前端页面开发过程中，可以在 力所能及 的范围内使用 无障碍阅读 相关技巧：

可感知，并不是所有人可以看清页面上的东西，例如针对色盲、色弱用户对页面的颜色进行一些处理。
可操作，并不是所有人都可以使用和常人一样的工具，例如是否可以不使用 鼠标 和 触摸屏 就能操作网页。
易理解，设计过于 复杂 和 不一致 会对使得用户困惑，例如输入框只有设置 placeholder 而没有设置 描述标签，用户可能输入到一半就忘记自己在操作什么。
兼容性，用户是否能够通过盲人键盘、屏幕阅读器来使用页面，最熟知的便是 霍金大大 使用三个手指头来操作设备。