无障碍的 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 翻译，转载请注明泉源出处。