如何提高 Web 可访问性，让残障人士拥有更好的体验？

作者 | Melissa Foley译者 | 平川本文最初发布于 viget。如果你创建了 Web 内容，那么即使从未写过一行代码或登录 CMS，你也可以在可访问性方面发挥作用。你知道装饰性图片、信息性图片和功能性图片之间的区别吗？你知道为它们编写好的替换文本意味着什么吗？你知道所有直播和预录视频都需要……

作者 | Melissa Foley

译者 | 平川

本文最初发布于 viget。

如果你创建了 Web 内容，那么即使从未写过一行代码或登录 CMS，你也可以在可访问性方面发挥作用。

你知道装饰性图片、信息性图片和功能性图片之间的区别吗？你知道为它们编写好的替换文本意味着什么吗？你知道所有直播和预录视频都需要音频描述吗？

让你的内容更容易访问不能仅仅依靠 Web 开发人员，或者只是勾选视频字幕和替换文本框。这需要内容创建者，包括作者、平面设计师、摄影师和视频编辑，理解这些指导方针，更重要的是，这些指导方针对于内容在网站上的实现方式意味着什么。

因为可访问性是每个人的责任。

创建可访问 Web 内容的准则是什么？

万维网联盟 Web 可访问性推进组织制定了 Web 内容可访问性指南，即 WCAG，以便残疾人士（包括视觉、听觉、身体、语音、认知、语言、学习和神经系统残疾）可以更方便的访问 Web 内容。

第一套指南 WCAG 1.0 于 1999 年 5 月发布，并于 2008 年 12 月更新为 WCAG 2.0，于 2018 年 6 月更新为 WCAG 2.1。WCAG 2.2 计划于 2022 年 6 月发布，WCAG 3.0 则计划于几年后发布。

WCAG 的更新总是向后兼容。因此，如果符合 WCAG 2.1，也必将符合 WCAG 2.0。

对于 WCAG 指南的每个版本，成功标准有三个等级 —— A、AA 和 AAA。

等级 A：最低要求

等级 AA：一般要求

等级 AAA：强化要求

成功标准的赋级需要综合考虑以下因素：

是否有可能所有网站和内容类型都达标

该标准是否会限制外观、感受或功能

如果不符合标准，不存在变通方法

目前，大多数政府标准要求网站满足 WCAG 2.1 AA 级标准。目前，所有涉及组件设计或开发的 Viget 项目都致力于实现 WCAG 2.1 AA 级标准。

现在，你对创建可访问 Web 内容的准则及其历史已经有了一些了解，让我们看看这对于你的网站究竟意味着什么。

让多媒体内容可访问

大部分人都知道，所有视频都需要字幕。为了满足 AA 级要求，你必须为所有预录和直播视频提供字幕。要达到 AAA 级强化标准则需要提供手语翻译。

大多数人不知道的是，为了达到 AA 级标准，还需要为所有预录和直播视频提供音频描述。而要达到 AAA 级强化标准，则需要对所有视频进行扩展音频描述。

但什么是音频描述？音频描述是提供视频中视觉元素信息的解说，为盲人和视力障碍者提供帮助。

下面是一个例子，说明音频描述在理解视频方面带来了什么不同。闭上眼睛，听一听其中的差别。

迪士尼《冰雪奇缘》预告片（无音频描述）：

迪士尼《冰雪奇缘》预告片（带音频描述）：

关于视频，你还应该知道的是，视频应该可以控制，甚至是背景视频。要达到最低标准 A，就需要针对所有自动播放的音频和视频提供暂停和停止按钮。要满足 AAA 级标准，则需要有控制背景音频的能力。

不仅仅要考虑视频的控制问题。对于由交互触发的运动动画，如当鼠标悬停或滚动时移动的图片，要满足 AAA 级标准，就必须提供一种方法来禁用这些动画。

最后，闪光灯也是需要注意的，因为那可能会引起头痛、恶心、头晕，甚至没有癫痫的人也可能出现光敏性癫痫发作。对于等级 A，在任何一秒钟内，低于一般闪光灯和红色闪光灯阈值的闪动都不能超过三次。对于等级 AAA，在任何一秒钟内都不能有任何东西闪动超过三次。

让图片可访问

在 Web 上使用图片时，其中一个最好的做法是尽可能不使用带有文字的图片或文字密集的图形。事实上，为了满足 AAA 级标准，所有带文字的图片都必须是装饰性的。

什么是装饰性图片？就可访问性而言，图片基本类型分为 3 类：

装饰性：不增加页面内容的信息

信息性：传达一个简单的概念或信息，可以用一个简短的短语或句子来表达

功能性：用于触发动作，而不是传递信息

装饰性图片

按照 W3C 的说法，在以下情况下，图片可能是装饰性的：

作为页面设计的一部分，比如用一副章节分割线图片来分割页面上的内容

作为文本链接的装饰性部分，如包括 Twitter 标志和文本的 Twitter 链接

有相邻的替代文本，比如一张带有说明（详细说明了图片的内容）的照片

用来增加页面的视觉乐趣，基本上是用来养眼的，比如一张使页面看起来漂亮但不增加任何信息的照片

对于装饰性图片，因为它们没有给内容增加任何信息，所以你应该使用一个空的 alt 属性（alt=""）。

示例：有相邻替代文本的图片

建议：alt=""

信息性图片

按照 W3C 的说法，在以下情况下，图片可能是信息性的：

用于标记其他信息，如电话号码旁边的电话图片

用来补充其他信息

用来传达简单的信息，比如一张图片显示了起瓶盖的方向

传达一种印象或情感

传达文件格式，比如在 PDF 或 Word 的下载链接旁有一个 PDF 或 Word 图标

信息性图片的 alt 文本应传达视觉上显示的意义或内容，但通常不是图片的文字描述。

示例：用于传达简单信息的图片

建议：alt="Astronaut Sally Ride"

功能性图片

根据 W3C 的说法，在以下情况下，图片可能是功能性的：

单独作为一个链接使用，比如指向 Twitter 的 Twitter 标志链接，无附加文本

在链接中传达信息的图标，比如新建窗口图标，表明该链接将把你带到一个新窗口

有功能的独立图标，比如打印机图标，告诉用户如果他们点击它，就可以打印

作为一个按钮使用，比如用于发起网站搜索的放大镜图标

功能性图片的 alt 文本应该传达将发起的操作（图片的用途），而不是图片的描述。

W3C 还提供了一个很好的 alt 文本决策树，可以帮助你确定图片是什么类型的以及需要什么样的 alt 文本。

图标和符号

为了帮助有认知和学习障碍的人，你应该使用人们已经知道的标准图标和符号——如播放、打印、电子邮件、日历、搜索用的放大镜——这样他们就不必学习新图标。

但是，即使使用这些易于识别的符号，也至少应该包括功能性的 alt 文本，或者最好提供一个可见的文本标签。

为图片编写 alt 文本

不仅要知道什么时候需要 alt 文本，还要知道 alt 文本应该写什么。是否应该包括 alt 文本要根据上下文来确定。

你可以试下 Alex Chen 的对象 - 行动 - 上下文法，所编写的 alt 文本应该描述图片的主要焦点，这个主要焦点正在做什么以及周围的环境。

理解图片上下文的内容也很重要。这可以帮助你决定什么样的 alt 文本最合适。

好的 alt 文本：煎饼 | 更好的 alt 文本：双手捧着一个白色的盘子，上面放着一迭覆盖着蓝莓和草莓的蓝莓煎饼。

如果你正在撰写一个关于不同种类的早餐食品的故事，也许“好”的 alt 文本“煎饼”就足以描述图片。但是，如果你正在谈论不同种类的煎饼，那么你也许应该使用“更好”的描述，即“一迭加了砂糖的蓝莓煎饼”。

这个公鸡的图片也是如此。如果你只是泛泛谈论不同种类的农场动物，那么说这幅图片是一只公鸡可能就够了。但如果你谈论的是农场动物发出的不同声音，那么使用“正在打鸣的公鸡”可能会更好。最后，如果你谈论的是不同种类的公鸡，那么使用“正在打鸣的红冠公鸡”可能效果最好。

好的 alt 文本：公鸡｜更好的 alt 文本：正在打鸣的公鸡 | 最好的 alt 文本：正在打鸣的红冠公鸡

或许你有时间也有能力来详细描述每张图片，但如果没有，那么你应该提供到与上下文内容相符的详细程度。

宜在 alt 文本中描述的内容

物体的摆放位置

图片风格，如绘画或图表

颜色

人名

服饰

动物

情绪，如微笑或哭泣

周围环境

不宜在 alt 文本中描述的内容

颜色描述

图片类型，如“……图片”或 “……标志”

显而易见的细节，如某人有两只眼睛、一个鼻子和一张嘴

和图片焦点无关的细节，或与相关文案上下文无关的细节

描述过于诗意或详细

对于 alt 文本的最大字符数，还存在争议。一些可访问性建议建议 alt 文本要少于 125 个字符，因为如果超过这个长度，屏幕阅读器可能会停止阅读。但有一些用户做了测试，发现这个说法并不对，所以这一限制可能只是出于 SEO 的考虑。

不管实际上是否有 125 个字符的限制，你都应该尽量保持 alt 文本短而精。如果需要用超过 200 个字符来说明图片，那么你可能得调整图片周围的内容，以提供更好的上下文信息。

当涉及到在 alt 文本中描述人时，需要格外谨慎。或许你可以准确地描述某人的衣服或发型，但你可能无法说出一个人的具体情况。外表可能具有欺骗性。你可能无法仅凭外表就准确了解某人的种族、民族、性别认同或能力。

除非这些具体情况与上下文有关，否则你应该完全避免包括它们。如果你确实想包括这些内容，那么你应该设法询问对方他们会如何描述自己。

让文本可访问

语言

为了使文本易于理解，你应该使用简单明了的语言。在短句和文本块中使用简单的词语。要达到 AAA 级标准，阅读难易程度不要超过 8 年级（初中以下）。这可以帮助有认知障碍或学习障碍的用户。

这也有助于依赖屏幕阅读器的用户。屏幕阅读器用户每秒钟听到的字数明显多于视力正常的读者。视力正常的读者平均阅读速度为每秒 2-5 个单词（或 10-12 个音节），而屏幕阅读器用户的阅读速度为每秒 35 个音节。

这种速度上的差异意味着，屏幕阅读器用户需要比视力正常的用户更快地理解你的内容，所以内容越简单效果越好。使用简单的词语也意味着屏幕阅读器不容易误读。

同样，还应该避免使用技术术语或缩略语，否则要对其进行解释或注明全称。AAA 级指南要求，除非提供解释，否则不要使用不常见的词语。

也不要使用“在右边”或“在左边”这样的语言，因为屏幕阅读器是从上往下读的，所以没有左右之分。这也可能会成为一个可用性问题，因为在响应式设计中，在台式机上出现在右边或左边的东西，在不同的设备上可能是在上面或下面。

当缩略语的字母应单独读出时，尽量使用英文句号隔开（U.S.A. 和 C.I.A.），这样屏幕阅读器就能理解，它们是独立的字母，而不会试图将它们当作一个词来读。

你还应该在话题标签中使用 PascalCase 或 camelCase，这也是为了让屏幕阅读器可以识别出其中的每个单词，而不是试图将整个标签作为一个单词来读。PascalCase 是指每个词的第一个字母大写，camelCase 是指第一个词的第一个字母小写，而后面每个词的第一个字母大写。

文本大小和间距

为了满足 AA 级标准，文本应可以调整到 200% 而不损失内容或功能，这意味着你仍然可以看到所有的文本，即使是必须水平滚动才能看到。然而，为了满足 AAA 级标准，文本必须能够调整到 200% 而且不会出现滚动条。

AAA 级指南还指出，内容块的宽度不应超过 80 个字符，而且文本不应该两端对齐，也就是说，不应该左右边距同时对齐。

标题

如果使用得当，标题是一种组织和分割内容的好方法。它们就像一个目录或页面大纲，这是 AAA 级标准的要求。如果使用了恰当的标题结构（H1、H2、H3、H4 等），并配以描述主题或小节意图的文字，那么视力正常的人和屏幕阅读器用户就都可以快速、轻松地找到他们要找的具体内容。

屏幕阅读器能够按标题来浏览页面，所以它们可以读取所有的 H2，直到找到想要的内容，然后它们可以读取所有的 H3，不断缩小信息的查找范围，直到找到所需的具体内容。

标题不仅仅是一个视觉元素，不应该使用标题来给文本添加样式。不要仅仅为了在页面上加大显示某些东西而使用它们，也不要通过加粗文本来避免它们。

应该尊重标题的层次结构，就像你在大纲中所做的一样。因此，不要从 H1 跳到 H3 或从 H2 跳到 H4。不过，当内容由具体转回宽泛时，你可以从 H4 跳到 H2，比如从大纲的第三层回到第一或第二层。

示例：恰当的标题结构

美国（H2）这是关于美国的信息。

俄勒冈州（H3）这是关于美国俄勒冈州的信息。

波特兰市（H4）这是关于美国俄勒冈州波特兰市的信息。

加拿大（H2）这是关于加拿大的信息。

不列颠哥伦比亚省（H3）这是关于加拿大不列颠哥伦比亚省的信息。

列表

当你要列举的内容超过 3 项，可以考虑把这些项做成一个列表。除了可以吸引视力正常的用户的注意，列表还为屏幕阅读器用户提供了有关列表的信息，帮助他们决定如何继续。

在添加列表时，要正确选用列表格式（无序或有序列表），而不只是使用符号或数字。屏幕阅读器可以识别列表的 HTML，并据此向用户提供列表项的数量，以及识别任何嵌套列表及其项数。如果是用户不感兴趣的东西，那么屏幕阅读器还允许用户跳过列表，而不是强迫他们把整个列表听完。

链接

就像使用列表对视力正常者和屏幕阅读器用户都有好处一样，使用恰当的链接对这两个群体也都有帮助。链接可以吸引视力正常的用户的注意，而屏幕阅读器用户可以只使用页面上的链接来浏览页面。为了使两者都更容易，所有链接都应该使用简明的描述性文字。

这实际上是 AAA 级标准。应该让用户能够仅通过链接文本就知道链接的用途。只要读下实际的链接文本，无需任何语境，你就知道它的用途以及它将去到哪里。这就是为什么说像“点击这里 ”和“更多内容”这样的链接文本不是好链接文本的原因。对于它们，用户得了解上下文内容，才能知道链接的用途。

示例：不好的链接文本

要查看 Viget 的服务列表，请点击这里。

访问 Viget 的网站，查看服务列表。

告诉我们更多关于 Viget 的信息。

示例：好的链接文本

查看 Viget 的服务清单。

要了解更多信息，请阅读“你的网站可访问吗？”

告诉我们更多关于 Viget 的信息。

关于链接的一些补充说明。不要把标点符号放在链接里面，除非它是链接描述的一部分。不要使用原始 URL 作为链接，不管多长，屏幕阅读器都会把它读给用户听。最后，永远不要在不是链接的地方加下划线。因为链接的标准设计模式有下划线，如果在非链接文本处使用下划线，用户会感到困惑，他们会不知道页面上哪些带下划线的文本是链接哪些不是。虽然这对所有用户来说都是一个问题，但对有认知或学习障碍的用户来说，这个问题尤其突出。

颜色

颜色是一个既能影响内容又能影响设计的方面。

从设计的角度来看，应该经常检查文本的颜色，以确认是否有足够的颜色对比。AA 级标准要求所有常规大小的文本对比度不低于 4.5:1，大型体文本为 3:1（正常字体至少为 18pt 或 24px，粗体至少为 14pt 或 18.5px）。AAA 级标准将这些比例提高到普通文本 7:1，大型文本 4.5:1。

对于用户界面组件（包括其所有的状态和边界）以及图形对象，色彩对比度应达到 3：1 才能满足 AA 级标准。

有很多程序可以帮助你确定色彩对比度是否满足要求。Figma 中有插件，也有像色彩对比度分析器这样的独立应用程序。

从内容的角度来看，永远不应该使用颜色作为重要性或功能性的唯一标志。这是等级 A 的最低要求。也就是说，你不能告诉别人点击“红色”按钮，或者有一个只根据颜色来显示信息的图表或图形。

示例：错误的颜色用法

不要告诉别人点击“红色”按钮，也不要使用只根据颜色来显示信息的图表或图形

示例：正确的颜色用法

用适当的文字而不是单纯的颜色来决定点击哪个按钮，用不同类型的线条来区分不同的信息

当涉及到内容时，了解 WCAG 指南是使网站可访问的第一步，也是很重要的一步。但这也只是第一步。你需要花费时间和精力来理解这些准则以及如何实现它们。

希望你现在对提高可访问性需要做的一些事情有了更多的了解，因为使网站内容可访问不仅仅是 Web 开发人员的责任。即使你从来没有写过一行代码或登录 CMS，作为内容创造者的你所采取的步骤也可以影响可访问性。因为当你使网站具有可访问性时，就会使每个人都可以访问它。

查看英文原文：

How to Make Your Web Content Accessible()

声明：本文为InfoQ翻译，未经许可禁止。

点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！

今日好文推荐

马斯克称Twitter将专注“硬核软件工程”：要么加班，要么走人

GitHub 前 CTO：全面微服务是最大的架构错误！网友：这不是刚改完 GitHub 吗

我们这群90后，正在字节跳动“死磕”Linux内核 | 卓越技术团队访谈录

硅谷技术新焦点：摆脱缝合怪的多云设计，才是云计算的归宿

你可能想看：

如何正确地称呼残障人士？

当今世界，残疾人已经越来越多地融入到生活中，和正常人群一起，共同为社会发展贡献了自己的聪明才智，理应受到社会各界人士的关注和重视。对于那些有歧视性的称呼，我们应该予以谴责。如使用聋子，哑巴，精神病，弱...

webshell是什么意思，如何避免网站被留下webshell后门？

webshell实际是以asp、php、jsp，ini、cgi等网页文件形式存在的一种代码执行环境，也可以将其称做为一种网页后门。通常有很多黑客都通过使用webshell来让其在入侵一个网站后留下这个...

如何提高网站页面的交互性体验？

明明网站上是有提供相关的投票功能的，只是链接真的不好找，明明网站投票 是要先注册用户名的，却点了不知道多少次按钮页面都没有响应或者给出提示。所以，一个网站的页面交互性对于用户来说的重要性就不言而喻了。...

拥有一部VERTU是什么样的体验？

11年当了一段时间暴发户，威图成为了不堪回首的记忆。买成12万发票开了40多张，当时苹果4s刚刚上市，大部分人都追捧智能机。见客户也被质疑是中年人，本人有点老相。最关键的是这vertu经常坏，对你没有...

35岁的杨丞琳笑起来依旧甜美可人，拥有这样的女友是一种怎样的体验？

杨丞琳从出道到现在，永远不能让人忽视的标签就是甜美，她的甜美不是所谓的矫揉造作的装腔拿掉，是一种从长相到生活态度渗透出来的甜美。杨丞琳最可爱的造型，就是齐刘海加上笑容了，特别是她的笑容，真的非常的有感...

如何提高教师的积极性，怎样才能做到按劳分配，多劳多得？

实际上，你已经说出了答案了，就是按劳分配，多劳多得。按劳分配多劳多得是我国社会主义国家的分配制度，不过在教育上有点不太好操作。首先按劳分配中的劳怎样衡量，是按劳动量、劳动成果还是劳动效率。这个民办学校...

网站提高用户体验方面，这些地方需要注意，提高用户体验方面

结合自己经营网站的一些习惯，与大家一起分享一下在提高用户体验方面，到底哪些地方需要注意的。据有关统计显示，一个网站如果打开的速度超过5秒，流量就会损失10%。它不仅影响网站的排名优化，更影响网站的用户...

据西方报道新冠之后还有更厉害的病毒，会让西医有更多失败吗？

不能否定西医，从希伯克拉底到现在，也有几千年的历史了，他为解除人类的疾患作出过很大的贡献。西医的最大好处就是短时间快速的解决问题。即使西医面临有更多的失败，也不意味着中医有更多的机会，中医西医相辅相成...

怎么旅游才能有最好的体验？

怎样旅游才是最好的体验？一百个人可能有一百个回答。我认为首先是适合自己的旅游才是最好的旅游，确切地说把旅游变成旅行更好些。在旅行中不止看到风景，还能发现不一样的生活，不一样的人文情怀，不一样的文化，还...

国家之间正式访问和非正式访问有什么区别？

两国领导人的访问一般分为正式和非正式两种。越正式的访问规格越高，礼宾接待和双方会见的形式存在巨大差别。正式的访问一般提前半年甚至一年就已经决定好，没有特别重大或极其特殊变的情况不会取消和更改安排。

访问win7共享文件夹拒绝访问解决办法

windows7共享拒绝首先，已经很明确的知道对方Win7电脑存在默认共享，已经“启用文件和打印机共享”功能，而且有访问的账号（该账号可以正常登陆操作系统）：没错，这都是Win7的UAC（用户账户控制...

广告公司如何运作，才能有更好的发展呢？

先决条件，当然得看你想成立什么性质的广告公司了。 但无论什么性质的广告公司，其成立的先决条件当然是资 金了。 我觉得中小城市的广告公司定位最好是在设计、 制作这两块发展。因为是城市小，你搞企划、品牌推...

在Facebook工作是怎样一番体验？

Facebook宣布将在爱尔兰都柏林取得长期租约，并使该公司的员工人数增加一倍以上。该公司目前在该国雇佣了4000名员工，他们雇佣了超过6000名员工，Facebook可以在爱尔兰增加5000名员工。...

你觉得牡丹江会有更好的发展吗？

身为牡丹江人，谈谈我的感受。牡丹江要发展首要解决的是领导干部的思想，不能搞跟不上时代的那一套。不能搞贪污腐败那一套；对人才要重视起来；切实抓好工厂的发展，让牡丹江人有信心建设牡丹江。在牡丹江想要有个好...

余额宝七日年化收益率跌破2%，还值得存吗？有没有更好的选择？

不知你还记得七日年化收益率高达6%以上的余额宝吗？余额宝刚推出的时候，可谓是让人眼前一亮，因为它不仅能随存随取，收益率比银行定期存款的还要高。据了解，余额宝年化收益率已经跌破了2%，这让不少余额宝的忠...

良好的写作是网站的滋补 如何提高自己的写作水平

良好的写作是网站的滋补，抄袭将意味着网站没有发展，而你，作为一个网站管理员，是个作家。你知道什么想法，什么故事和观念要传达给网友，以及应如何最有效地传达给大家。你不必成为一个专业作家让别人读你的博客或...

如何让自己拥有更多的财富？

大家好，我是交易无大事，一名资深小散，从事期货股票交易好多年。在回答题主问题之前，先聊聊什么叫财富？一个人的财富包括哪些东西？什么是财富？对个人而言就是你身上一切可以利用的资源，有无形的，有形的，有价...

Web安全漏洞如何修复？

作为信息安全领域的从业人员很高兴回答你的问题。关于Web安全如何修复我认为漏洞修复分四步发现漏洞、确定漏洞的危害、确定有那些修复方案及成本、综合比较选择修复方案进行修复。可以通过专业的漏洞扫描工具或者...

如何快速解决网站中存在的Web漏洞？

最直接的可能就是通过URL 跳转漏洞。而且URL跳转漏洞的测试难度小，其次那些细节可能会存在漏洞呢？认证的正常页面可能存在URL跳转漏洞；可能存在URL跳转漏洞的是站内的一些其他外部链接，当你点击跳转...

如何通俗地讲解Web是什么意思？

简单的说Web就是为用户提供的一种在互联网上浏览信息的服务，Web服务是动态的、可交互的、跨平台的和图形化的。说到Web开发就一定会涉及到Web技术的基本呈现方式，用户通过浏览器把回应的内容（HTML...

（来源：问答百科）

免责声明：本文内容来源于第三方或整理自互联网，本站仅提供展示，不拥有所有权，不代表本站观点立场，也不构成任何其他建议，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容,不承担相关法律责任。如发现本站文章、图片等内容有涉及版权/违法违规或其他不适合的内容， 请及时联系我们进行处理。