为什么优秀的前端开发人员应该关注网页可访问性
什么是网络无障碍访问？
什么是残疾？
可以帮助浏览网站的工具
如何让网站更易于访问？
如何测试我的网站是否可访问
实现无障碍功能真的那么耗时吗？
为什么一个易于访问的网站就是一个好网站
概括
重要链接
AWS 安全直播！
封面图片来自Poakpong ，根据CC 2.0许可发布。
2017年，我刚开始从事前端开发时，听过我以前的同事Francesco Schwarz做的一个题为“不可见之美”的精彩演讲。演讲内容主要围绕网站的可访问性展开，而相应的博客文章开头就有一句非常精辟的论述：
有时，HTML 标记中一个隐藏的字形就能决定一个前端是优秀还是卓越。
我很快就了解到，无障碍设计是一个极具争议性的话题。以下是我听到的一些与此相关的典型观点：
- “我们没有时间考虑无障碍功能”
- “盲人数量很少，我们没有必要扶持这个少数群体。”
- “我讨厌这些丑陋的边框，我总是把它们去掉。”
- “如果用户更多了，我们可以稍后再考虑无障碍功能。”
在这篇博文中，我想告诉大家什么是可访问性，为什么它对网站很重要，为什么我关心它，以及为什么你也应该关心它。
什么是网络无障碍访问？
如果让我用自己的话来描述它，我会把它定义为：
任何人都可以完全访问网站并与之互动。
官方维基百科文章将其描述为：
包容性做法是指确保残疾人士不会因任何障碍而无法与网站互动或访问网站。
因此，一个好的网站应该让所有人都能访问其内容，即使是残疾人士也不例外。
顺便一提，无障碍设施通常缩写为A11Y。
A11Y 是一种数字缩写词，它与首字母缩略词有些类似。与首字母缩略词不同的是，数字缩写词用数字代替字母来缩短术语。您可能已经熟悉其他一些数字缩写词，例如“K-9”代表“Canine”（犬类），“W3C”代表“World Wide Web Consortium”（万维网联盟）。
什么是残疾？
正如我在开头提到的，人们误以为网络无障碍功能只与盲人用户相关。
根据世界卫生组织的一份报告，约有13亿人患有某种形式的视力障碍，其中3600万人失明。但即使是轻度或重度视力障碍患者，也可能难以阅读网站内容。
当然，障碍不仅仅局限于视觉障碍。谷歌的“无障碍基础知识”通过一些真实案例展示了部分无障碍访问方面的障碍：
| 情境 | 暂时的 | 永恒的 | |
|---|---|---|---|
| 视觉的 | 分心驾驶 | 脑震荡 | 失明 |
| 发动机 | 抱着婴儿 | 手臂骨折 | |
| 听力 | 嘈杂的办公室 | 聋 | |
| 认知的 | 脑震荡 |
因此，我们每个人都可能遇到需要与网站互动，但却因某种情境性、暂时性或永久性残疾而无法访问网站的情况。
我喜欢文章《无障碍很重要——以下是我们正在采取的措施》中的这句话：
我们绝不应该对用户妄加揣测。
让产品易于访问并不意味着只针对特定人群。相反，无障碍设计或通用设计旨在让尽可能多的人都能使用产品。我们不应想当然地认为我们了解用户如何使用我们的内容，而应该意识到，这些内容可能会被多种辅助技术“看到”，包括自动化工具、纯键盘导航和屏幕阅读器。
你现在可能在想：“但是我的客户不一样”。
不，我不这么认为！
如上表所示，您的网站用户中很可能有人患有暂时性、永久性或情境性残疾。
你应该关心所有人，而不是只关心少数群体。
切记：网站是您企业的大门！
当然，你肯定希望尽可能多的人加入你的企业，所以你应该重视他们。因此，请热情欢迎他们！
可以帮助浏览网站的工具
我想向您介绍一些工具，如果您有某种残疾，这些工具可以帮助您浏览网站：
- 语音识别软件允许用户向计算机口述单词和命令。对于无法使用键盘或鼠标与计算机交互的人来说非常有用。
- 为聋人提供的带字幕或手语版本。
- 能够放大显示器内容的软件，可以帮助视力障碍人士。
- 屏幕阅读器软件，利用合成语音朗读计算机屏幕上的元素。
你一定要亲自试用一下，感受一下。我尤其推荐你测试一下屏幕阅读器，你可以在这里了解更多使用方法。
这段视频演示了屏幕阅读器的使用方法：
如何让网站更易于访问？
| 用户约束 | 无障碍解决方案 |
|---|---|
| 无法使用鼠标或标准键盘 | 编写页面代码时，请确保即使没有鼠标也能正常导航。因此，切勿移除 outline 属性。 |
| 视力障碍 | 使用较大的文字和图片，并在页面上保持良好的色彩对比度。 |
| 失明 | 对于屏幕阅读器来说，拥有语义清晰的 HTML 代码（详见下表）以及图像和链接的文本描述（例如使用 alt 标签描述图像<img src =”image-location” alt=”this is where your image description goes”>）会很有帮助。 |
| 聋人和听力障碍者 | 添加带字幕的视频或提供手语版本。 |
| 色盲 | 为链接添加下划线和颜色（或以其他方式区分），以帮助色盲用户注意到它们。 |
以上仅列举部分示例，更多信息请参阅Web 内容无障碍指南 2.0中的详细清单。
一般来说，<div>应尽可能避免使用 HTML 标签。因此，您可以查看HTML5 Doctor提供的这张精彩图表：
我还建议使用一些辅助开发的工具，例如eslint-plugin-jsx-a11y，这是一个 npm 包，它提供了一个静态 AST 检查器，用于检查 JSX 元素的可访问性规则。
如何测试我的网站是否可访问
我主要使用Google Lighthouse来检查我的网站是否可访问。
您可以使用网上提供的众多辅助功能检查清单之一，但我建议使用辅助功能测试工具中描述的任何工具。
实现无障碍功能真的那么耗时吗？
是的，如果项目已经进入后期阶段，或者你有一个遗留代码库，其中存在大量可访问性问题，而你现在需要修复这些问题。
不，如果你能从项目一开始就考虑可访问性，并在整个开发过程中都关注它的话。
为什么一个易于访问的网站就是一个好网站
- 一个结构良好、语义化的HTML网站有助于提升您的SEO。例如，搜索引擎机器人是盲人，听不见声音，认知能力也只有孩童的水平。因此，它是您网站最重要的访问者之一。如果它无法正常访问您的网站，您在搜索结果中的排名就会下降。
- 几乎所有人都可以访问您的网站并与之互动。
- 重视可访问性是专业网页开发人员应具备的良好品质。
- 易于访问的网站会给人感觉更专业。
- 您无需回复残疾用户的支持问题，从而节省了费用。
概括
我希望读完这篇文章后，您能明白为什么网络无障碍访问很重要，以及为什么您应该关注它。
这不是为了支持少数人，而是为了给网站的每一位用户提供良好的用户体验。
您的网站是您企业的门面：让您的用户知道他们受到欢迎，您关心他们，并且您的企业重视质量和专业性。
希望您现在也能成为其他开发者的导师，帮助他们克服对无障碍设计的担忧。