无障碍的 Web 环境应该如何打造？

2020 年，让我们都开始器重无障碍的 Web 情况。

                               
登录/注册后可看大图

作者 | Andrew Koenig-Bautista
译者 | 弯月，责编 | 屠敏
以下为译文：

                               
登录/注册后可看大图

全球残疾人数量超过十亿
美国四分之一（26%）的人口都患有某种类型的残疾。虽然并非每一种疾病都会直接影响用户欣赏网页，但许多疾病确实会带来一定的困扰。
根据世界银行：
“残疾人比正常人更加轻易遭受不利的社会经济后果，例如教育程度较低、康健状况较差、就业程度较低、以及贫苦率较高。”
残疾人在争取包涵性上面临着巨大的挑战。而我们这些开发者有机会以独特的方式来突破此中的一些障碍，并制止新的障碍。下面让我们来看一看在新年伊始之际，为打造无障碍情况我们可以做出哪些简单的努力。

                               
登录/注册后可看大图

辅助技术简介
辅助技术是指能够让残疾人按照个人的需求和喜好欣赏网络的功能。每天都有数以百万计的人利用这些技术欣赏网络。了解这些工具的利用可以进步构建无障碍情况的能力。下面是一些辅助技术的简要概述。
屏幕阅读器
这些软件步调能够读取欣赏器中出现的文本，并通过合成器将其转换为语音，或者通过盲文显示器将其转换为盲文。屏幕阅读器还可以提供更高级的功能，例如定位页面上的特定内容，或充当菜单导航工具。
语音识别软件
这些软件能够帮助计算机处理人类的语音命令。苹果的Siri 和 亚马逊的 Alexa 都是这类的软件。虽然有人认为这项技术许多余，然而对于残障人士来说，这些软件是绝对必要的。
特殊键盘
对于无法利用标准键盘的用户，可以将特殊键盘作为计算机输入工具，这些键盘经过了特殊定制，可以满足运动障碍者（如脑瘫或弱视者）的需求。

                               
登录/注册后可看大图

开发人员可以做些什么？
这些辅助技术通过各自的方式为残疾人提供了网络，而开发人员也可以为打造无障碍的Web情况贡献本身的力量。从今天开始，你就可以迈出这一步：
提供图像的替换本文
屏幕阅读器可以通过访问图像的 Alt 属性读取视觉内容，而且还可以为启用了欣赏语音功能的网站或利用语音输入软件的残疾人提供便利。假如图像包罗了对理解网页必不可少的内容，则更应该提供替换文本。
此外，假如图像包罗按钮或链接，也应该提供替换文本。是否需要提供 Alt 属性应该视情况而定，但是在一般的测试中，你应该想一想：假如没有这个图像，会影响用户对网页的理解吗？假如图像纯粹是装饰性的，则可以提供一个空文本替换：alt=””。
除了进步网络的可访问性之外，提供替换文本还有助于网页的搜刮引擎优化，因为你可以在文本中添加有意义的关键字。
编写有意义的HTML

编写语义准确的HTML可以进步Web应用步调的可访问性。平凡的HTML只包罗一些常见的HTML元素。标签应用于标记最重要的本文标题。应表示某个段落。
这些工作看似很明显，但是有的时候我们不乐意花时间思考为什么我们的代码不能按照预期的方式出现，这些因为懒惰或偶然而产生的HTML会带来意想不到的效果。有些开发人员说，最好的代码就是能够正常工作的代码，但是面条式代码会带来许多复杂性，此中之一就是降低网站的可访问性。
语义化的HTML在页面的出现之上提供了一层含义，屏幕阅读器和特殊键盘能够读出这些含义。清晰的HTML可以方便辅助技术的利用。
表单
类似的原则同样实用于表单。表单在Web交互中起着不可或缺的作用。除了在视觉上清晰地标记外，还必须准确标记表单的字段和控件，例如利用元素等。
准确标记的标签可以被键盘、屏幕阅读器和语音输入访问。此外，表单还应向用户说明如何利用和填写表单。
准确地构造网页的内容
良好的内容结构与语义化的HTML密不可分。那些依赖屏幕阅读器的用户通常需要通过软件阅读标题，从而了解网页的轮廓。假如没有标题或没有准确的标题，那么网站的导航就会难上加难。
当用户欣赏网页内容、指定的标题、段落、有序/无序列表等时，屏幕阅读器还会读出HTML元素。如下是一个结构良好的网页示例（来自MDN）：
My heading



This is the first section of my document.

• Here is
  
• a list for
  
• you to read
  

My subheading



This is the first subsection of my document. I'd love people to be able to find this content!


My 2nd subheading



This is the second subsection of my content. I think is more interesting than the last one.
提供音频字幕
视力有障碍的人会因图像感到头疼，同样，听力有障碍的人无法获取音频或视频的内容。为了进步多媒体网站的可访问性，我们必须提供文字记录和字幕。
字幕应该：

• 同步：文字应与音频同步显示
  
• 等效：字幕和文本应该与音频内容等效
  
• 可访问性：字幕应具可访问性，供需要的人利用
  

                               
登录/注册后可看大图

为什么我们要在意网站的可访问性？
无障碍的Web应用步调是经过精心设计的应用步调，尽大概地让更多的用户访问。根据W3，可访问性可以推动创新、加强品牌的力量、扩展市场范围，并最大程度地降低法律风险。无障碍网站在搜刮效果中的排名更靠前，而且还可以降低维护成本并增加受众范围。
更重要的是，可访问性可赋予网站很大的力量。因为无障碍网站具有包涵性，不排除任何人，这些网站欢迎所有人通过各自的方式访问网站。
希望你能与我一起在新的一年中为打造无障碍情况而努力。欣赏网络应该是所有人的权利，而不是某些人的特权。我们所有人都可以为打造无障碍情况贡献本身的力量，哪怕是一行代码。
原文：https://medium.com/better-programming/a-new-years-resolution-for-web-developers-prioritize-web-accessibility-in-2020-e02ab51b0292
本文为 CSDN 翻译，转载请注明来源出处。