2020 年，让我们都开始重视无障碍的 Web 环境。

作者 | Andrew Koenig-Bautista

译者 | 弯月，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下为译文：

全球残疾人数量超过十亿

美国四分之一（26%）的人口都患有某种类型的残疾。虽然并非每一种疾病都会直接影响用户浏览网页，但很多疾病确实会带来一定的困扰。

根据世界银行：

“残疾人比正常人更加容易遭受不利的社会经济后果，例如教育程度较低、健康状况较差、就业水平较低、以及贫困率较高。”

残疾人在争取包容性上面临着巨大的挑战。而我们这些开发者有机会以独特的方式来打破其中的一些障碍，并阻止新的障碍。下面让我们来看一看在新年伊始之际，为打造无障碍环境我们可以做出哪些简单的努力。

辅助技术简介

辅助技术是指能够让残疾人按照个人的需求和喜好浏览网络的功能。每天都有数以百万计的人使用这些技术浏览网络。了解这些工具的使用可以提高构建无障碍环境的能力。下面是一些辅助技术的简要概述。

屏幕阅读器

这些软件程序能够读取浏览器中呈现的文本，并通过合成器将其转换为语音，或者通过盲文显示器将其转换为盲文。屏幕阅读器还可以提供更高级的功能，例如定位页面上的特定内容，或充当菜单导航工具。

语音识别软件

这些软件能够帮助计算机处理人类的语音命令。苹果的Siri 和 亚马逊的 Alexa 都是这类的软件。虽然有人认为这项技术很多余，然而对于残障人士来说，这些软件是绝对必要的。

特殊键盘

对于无法使用标准键盘的用户，可以将特殊键盘作为计算机输入工具，这些键盘经过了特殊定制，可以满足运动障碍者（如脑瘫或弱视者）的需求。

开发人员可以做些什么？

这些辅助技术通过各自的方式为残疾人提供了网络，而开发人员也可以为打造无障碍的Web环境贡献自己的力量。从今天开始，你就可以迈出这一步：

提供图像的替代本文

屏幕阅读器可以通过访问图像的 Alt 属性读取视觉内容，而且还可以为启用了浏览语音功能的网站或使用语音输入软件的残疾人提供便利。如果图像包含了对理解网页必不可少的内容，则更应该提供替代文本。

此外，如果图像包含按钮或链接，也应该提供替代文本。是否需要提供 Alt 属性应该视情况而定，但是在一般的测试中，你应该想一想：如果没有这个图像，会影响用户对网页的理解吗？如果图像纯粹是装饰性的，则可以提供一个空文本替代：alt=””。

除了提高网络的可访问性之外，提供替代文本还有助于网页的搜索引擎优化，因为你可以在文本中添加有意义的关键字。

编写有意义的HTML

编写语义正确的HTML可以提高Web应用程序的可访问性。普通的HTML只包含一些常见的HTML元素。<h1>标签应用于标记最重要的本文标题。<p>应表示某个段落。 

这些工作看似很明显，但是有的时候我们不愿意花时间思考为什么我们的代码不能按照预期的方式呈现，这些因为懒惰或偶然而产生的HTML会带来意想不到的结果。有些开发人员说，最好的代码就是能够正常工作的代码，但是面条式代码会带来很多复杂性，其中之一就是降低网站的可访问性。

语义化的HTML在页面的呈现之上提供了一层含义，屏幕阅读器和特殊键盘能够读出这些含义。清晰的HTML可以方便辅助技术的使用。

表单

类似的原则同样适用于表单。表单在Web交互中起着不可或缺的作用。除了在视觉上清晰地标记外，还必须正确标记表单的字段和控件，例如使用<label>元素等。

正确标记的标签可以被键盘、屏幕阅读器和语音输入访问。此外，表单还应向用户说明如何使用和填写表单。

正确地组织网页的内容

良好的内容结构与语义化的HTML密不可分。那些依靠屏幕阅读器的用户通常需要通过软件阅读标题，从而了解网页的轮廓。如果没有标题或没有正确的标题，那么网站的导航就会难上加难。

当用户浏览网页内容、指定的标题、段落、有序/无序列表等时，屏幕阅读器还会读出HTML元素。如下是一个结构良好的网页示例（来自MDN）：

<h1>My heading</h1>

<p>This is the first p of my document.</p>

<ol>
  <li>Here is</li>
  <li>a list for</li>
  <li>you to read</li>
</ol>

<h2>My subheading</h2>

<p>This is the first subp of my document. I'd love people to be able to find this content!</p>

<h2>My 2nd subheading</h2>

<p>This is the second subp of my content. I think is more interesting than the last one.</p>

提供音频字幕

视力有障碍的人会因图像感到头疼，同样，听力有障碍的人无法获取音频或视频的内容。为了提高多媒体网站的可访问性，我们必须提供文字记录和字幕。

字幕应该：

• 同步：文字应与音频同步显示

• 等效：字幕和文本应该与音频内容等效

• 可访问性：字幕应具可访问性，供需要的人使用

为什么我们要在意网站的可访问性？ 

无障碍的Web应用程序是经过精心设计的应用程序，尽可能地让更多的用户访问。根据W3，可访问性可以推动创新、增强品牌的力量、扩展市场范围，并最大程度地降低法律风险。无障碍网站在搜索结果中的排名更靠前，而且还可以降低维护成本并增加受众范围。

更重要的是，可访问性可赋予网站很大的力量。因为无障碍网站具有包容性，不排除任何人，这些网站欢迎所有人通过各自的方式访问网站。

希望你能与我一起在新的一年中为打造无障碍环境而努力。浏览网络应该是所有人的权利，而不是某些人的特权。我们所有人都可以为打造无障碍环境贡献自己的力量，哪怕是一行代码。

原文：https://medium.com/better-programming/a-new-years-resolution-for-web-developers-prioritize-web-accessibility-in-2020-e02ab51b0292

本文为 CSDN 翻译，转载请注明来源出处。

热 文 推 荐 

☞腾讯 QQ 产品已经实现全量上云；中科院计算所发明新编程语言“木兰”；Electron 7.1.9 发布 | 极客头条

☞“整洁代码根本就是个骗局！”

如何建立“开箱即用”的数据安全防护系统 | 专家对话

2020 及以后的八大最显著技术趋势！

☞为什么 k8s 在阿里能成功？| 问底中国 IT 技术演进

☞170个新项目，579个活跃代码仓库，Facebook开源年度回顾

☞掌握 8 种语言、被阿里点赞，这名德国程序员简直开挂了！

☞K8s 实践 | 如何解决多租户集群的安全隔离问题？

你点的每个“在看”，我都认真当成了喜欢