Web 可访问性：为什么 W3C 标准经常被忽略

已发表: 2022-03-11

du jour 一词是Web 可访问性——在我看来，这是 Web 设计中最常被误解和应用最差的方面之一。 常见的误解是无障碍功能是专为残疾人设计的。 事实上，每个人都从无障碍内容中受益，您的受众将通过在不同平台或以不同方式访问无障碍内容而增加，因为他们可以在较少限制的情况下使用您的内容。

不幸的是，许多 Web 开发人员不使他们的内容可访问，也不遵循 Web 可访问性指南； 因此，许多人在使用他们的设计和享受内容时遇到了不必要的困难。 在极端情况下，某些用户群体根本无法有效地使用这样的网站。

构建可访问的内容应该是任何开发人员、设计师或内容创建者的第二天性，就像考虑坡道、楼梯和电梯对于建筑师设计新建筑而言一样。

让我们仔细看看幕后是什么，以及为什么这么多开发人员似乎无缘无故地忽视了 Web 可访问性标准。

1. “无障碍设计”是什么意思？

无障碍内容是每个人都可以使用的内容。 我们不知道用户如何访问我们的内容的所有方面，因此我们需要提前考虑可访问性的设计。

正如我之前强调的那样，这与残疾人无关，他们约占世界人口的 15%。 在现实生活中，用户通常最终不会以与开发过程中设想的完全相同的方式消费内容并与设备交互。 在许多司法管辖区，出于法律原因，也需要可访问的内容。 阅读“为您的组织开发 Web 可访问性业务案例的法律和政策因素”，了解有关可访问性合规性的更多信息。

在考虑用户可访问的内容时，请考虑以下场景：

  • 听不清楚。 全世界有 3.6 亿人患有听力障碍。 音频内容应该有转录，视频应该有字幕。

  • 看不清楚。 据估计，全世界有 2.85 亿人视力受损：3900 万人失明，246 人视力低下。 视障用户使用屏幕阅读器（使用合成语音阅读内容）、可刷新的盲文显示器（屏幕内容出现在盲文显示器上，用户可以使用显示器上的按键导航和与他们的设备交互）或高-对比模式。

  • 受到阅读障碍的影响。 患有阅读障碍的人在阅读和理解内容时发现困难，尤其是，例如，合理的文本或全部大写。

  • 遭受身体限制。 并非所有人都可以使用所有设备。 例如，内容导航必须不仅对鼠标用户可用，而且对不能使用鼠标的用户也可用。

  • 使用移动设备。 使您的内容适应小屏幕。 允许用户缩放或增加字体大小。

2. 如何确保良好的 Web 可访问性

人们使用非常不同的方式来浏览和消费内容。 有些用户需要其他软件工具的支持，以帮助他们更轻松地访问内容。 这些工具被称为辅助技术，范围从屏幕阅读器到触摸屏和头指针。

但是，您的应用程序和辅助技术需要相互通信。 对于辅助技术，并非所有用 HTML 编写的内容都可以完全理解。 为了帮助将内容从“技术语言”“翻译”成更易于人类阅读的语言，已经创建了附加的可访问性 API 标准。

这个基本的 Web 可访问性图表应该让您更好地了解辅助技术的工作原理。

资料来源：W3C
资料来源：W3C

为了说明它是如何工作的，让我们看一个简单的代码示例：

 <a href="#” class=”button”>Delete</a>

这个简单的代码，对于使用屏幕阅读器的人来说，意义不大。 它甚至具有误导性，并且仅作为带有“删除”文本的链接阅读。 为了帮助用户了解使用什么样的方法来执行动作，我们可以使用ARIA （Assistive Rich Internet Applications）属性（在 https://www.w3.org/TR/wai-aria/ 中指定）来覆盖原来的角色。 我们通过添加属性role="button"来改变按钮链接的含义。 这样，屏幕阅读器会将其作为按钮而非链接阅读。 哪个更合适。

简而言之，属性 ARIA：

  • 赋予或增强非语义或其他语义元素的语义，

  • 确保动态（实时）内容仍然可以访问。

  • 提供角色来描述已定义小部件的类型（菜单、树项、滑块、进度表等）。

  • 提供描述网页结构（标题、区域和表格）的角色。

  • 提供小部件的状态（已选中、已弹出等）。

  • 提供描述拖放源和拖放目标的拖放属性。

什么是网页设计中的可访问性？

每当您设计内容时，请考虑两件事：内容的可感知性和可操作性。 让我们检查一些示例来说明网页设计中的可访问性。

假设您要设计一个自定义选择下拉元素。 以下是设计元素时要考虑的事项：

  • 标记不同的状态：启用、禁用、只读。

  • 当元素获得焦点/悬停状态时标记元素。

  • 在获得焦点/悬停状态时标记每个选项元素。

  • 确保仅将文本放大到 200% 级别时内容仍然可读。

  • 确保文本与其背景之间有足够的对比度。 它可以帮助中度低视力或在极端照明条件下（例如，暴露在直射阳光下或在低亮度显示器上）的设备上阅读内容。

另一个例子可能是选择一种颜色来描述一个状态。 以下是在设计用户能够选择颜色的部分时要考虑的事项：

  • 有些人难以区分某些颜色。 所以绿色并不意味着对所有访客都是绿色的。 要修复它，请为描述用途的每种颜色添加描述。

  • 当每个元素获得焦点/悬停状态时标记它。

  • 确保元素之间有足够的空间，以便可以轻松激活每个元素，例如，在具有较小视口的设备上。

3. 可访问性测试：从哪里开始？

没有一种方法可以检查并确保 Web 内容完全可访问。 需要使用多种技术来验证和修复可访问性问题。 您可以从定义问题、解决方案和优先级开始。

定义问题

在处理可访问性问题时，请始终尝试为每个问题创建一张带有明确标题的票。 这应该可以简化对问题的理解，并有助于确定优先级。

不好的例子：用户不能在页面上使用键盘。

很好的例子：无法在主菜单中使用键盘导航。

糟糕的例子导致了一个很难在短时间内结案的案例。 关于多个主题的讨论也可能从评论部分开始，因为票的标题太笼统了。

很好的例子准确地指出了问题并且只关注一件事：主菜单中的键盘导航。

优先考虑 Web 可访问性问题

优先级很重要，因为它们定义了必须首先解决哪些问题。 例如，WCAG 分为三个一致性级别：A、AA、AAA，这意味着您应该从最低级别 A 开始，但这并不意味着 AA 和 AAA 级别仅仅是“很高兴拥有”。 所有级别都很重要，重要的是不要假设仅 A 级就足够了。

但是，WCAG 级别（或任何其他指南）有时可能很难理解，为了简化一点，您还可以考虑以下优先级定义：

  • 严重- 阻止用户使用应用程序的问题。 没有可用的解决方法。

  • 主要– 使应用程序的使用变得困难和/或迷失方向的问题，但不会妨碍用户完成操作的能力。

  • 次要- 烦人但不妨碍使用的问题，或可以对应用程序进行的改进。

  • 信息- 不遵守最佳实践。 改进的一般建议。

解决方案

没有任何指南——我的意思是 WCAG、Section 508 或 ADA——将在技术代码方面为您提供关于如何解决特定问题的直接解决方案。 他们只定义预期的行为。 但是，WCAG 还定义了有助于理解如何重现问题的测试程序，并且有一个自动化的 WCAG 监控社区组，这是一个 W3C 社区，专注于为 Web 可访问性测试开发可靠的规则，包括自动化和半自动化。

WCAG 技术 G4 的示例（“允许内容暂停并从暂停的地方重新开始”）：

测试程序

在具有移动或滚动内容的页面上，

  1. 使用网页中或用户代理提供的机制来暂停移动或滚动内容。

  2. 检查移动或滚动是否已停止并且不会自行重新启动。
  3. 使用提供的机制重新启动移动内容。
  4. 检查移动或滚动是否从停止点恢复。

预期成绩

2号和4号是真的。

正如我们所见，没有技术解决方案，而是定义了预期的行为。 Web 开发人员如何实现它取决于他们。

Web 可访问性指南和 W3C 标准

遵循基本的 Web 标准应该是您的起点：

  • 最常见的是被称为 WCAG 的 Web 内容可访问性指南。 WCAG 2.0 是“一个稳定的、可参考的技术标准。 它有 12 条指导方针，按照 4 项原则组织：可感知、可操作、可理解和稳健。 对于每条指南，都有可测试的成功标准，分为三个级别：A、AA 和 AAA。”

  • WCAG 2.0 技术是针对 Web 内容作者的综合指南。

  • W3C 媒体可访问性用户要求 - 本文档介绍了残障用户对 Web 上的音频和视频的可访问性要求。

  • 20 世纪通信和视频无障碍法案 — CVAA 分为两个广泛的标题或部分。 标题 I 涉及通信访问，以使使用宽带的产品和服务对残疾人完全可访问。 无障碍法案第二章开辟了新天地，使残疾人更容易在电视和互联网上观看视频节目。

  • 第 508 节——适用于所有联邦机构开发、采购、维护或使用电子和信息技术时的信息和通信技术 (ICT) 的可访问性要求。

  • 美国残疾人法案 (ADA) 标题 II 下的网站可访问性 — 在那里，您将了解 ADA 标题 II 的非歧视要求如何适用于州和地方政府网站。

Web 可访问性测试：我如何知道我的内容是否可访问？

以下是一些基本的检查点，可以帮助您从第一步开始就更容易访问您的 Web 内容：

  • 验证您的 HTML。 确保 HTML 结构没有错误，因为辅助技术在解释页面内容时可能会出现问题。

  • 单独使用键盘进行测试。 确保仅使用键盘即可访问所有可操作的元素。 此外，您还必须能够使用键盘执行所有操作，例如提交表单。

  • 使用可访问性测试工具和验证器进行测试。 使用扫描和验证潜在可访问性错误的工具。

  • 动态内容。 通知屏幕阅读器用户动态变化，例如当搜索结果发生变化时。

  • 不要依赖颜色来描述含义。 使用颜色和描述，例如，[黄色框]警告。

  • 不要删除焦点上的轮廓。 这是一个使用 CSS 属性outline: 0; 不要这样做，因为键盘用户将失去页面上的方向。 您可以考虑为非键盘用户移除焦点轮廓，但始终为键盘用户提供焦点轮廓。

  • 错误消息。 始终告诉用户如何纠正错误。 不要只说数据无效。

  • 标签顺序。 确保基于选项卡的导航遵循图形用户界面中建立的约定。 至少，它应该遵循应用程序默认语言的阅读方向。 以英语为例，阅读顺序是从上到下，从左到右； 在阿拉伯语中，它是从上到下，从右到左。

  • 飞涨。 确保将文本放大至 200% 时页面内容仍然可读。

  • 关闭图像。 您仍然能够以舒适的方式使用该页面吗？ 所有图像都有替代文本吗？

  • 屏幕阅读器。 测试您是否可以使用至少一个屏幕阅读器（例如 VoiceOver、Windows Narrator 或 NVDA）阅读和浏览内容。

  • 高对比度模式。 在切换到高对比度模式时检查内容是否仍然可读。

  • 字体大小。 确保页面上的字体大小不小于 10 像素。

4. Web 可访问性的常见错误

最常见的错误是未能在开发之前确定可访问性要求。 不幸的是，可访问性越晚成为开发的一部分，实施解决方案就越困难。

下面列出了开发人员在实现可访问性时最常犯的一些错误：

  • 仅使用键盘无法浏览内容。

  • 滥用 CSS 大纲属性。 大多数情况下， outline: 0; 使用，这意味着每个可操作元素周围的轮廓不再可见。 不要使用outline: 0; 或outline: 0 !important; . 用户在浏览内容时将失去查看当前焦点元素的能力，除非有任何其他替代方法，例如使用border CSS 属性。

  • 从当前元素失去焦点，例如，由于 DOM 操作或使用blur()方法。 这通常发生在单页应用程序中。

  • 屏幕阅读器用户不会收到任何更改的通知，例如，已使用 XMLHttpRequest API 下载内容并且已呈现 UI 上的新更改，但尚未通知用户。 这通常发生在单页应用程序中。

  • 无法访问的日期选择器。 在许多情况下，使用了不可访问的日期选择器。 用户无法使用键盘浏览日历选项。

  • 使用声称可以自动修复可访问性问题的扩展。 小心使用它们并检查结果。 滥用它们会产生比解决方案更多的问题。

  • 给元素添加索引号大于 0 的tabindex属性。使用索引大于 0的tabindex的目的主要是为了“更正”导航路径。 但是，请考虑更改 HTML 结构以获得自然的导航路径。 使用tabindex操作它可能会导致维护问题和不可预测的导航路径。

  • 错误的标题层次结构。 不幸的是，它仍然很常见，但是没有正确构建标题层次结构，例如<h1> 、 <h5>和<h2> 。 屏幕阅读器用户使用标题来浏览各个部分，不正确的结构令人困惑，因为很难理解上下文。

  • 缺少高对比度支持。 有些人在高对比度模式下使用他们的软件。 确保您的内容仍然是可感知的。

  • 使用无法访问的 CAPTCHA 解决方案。 不幸的是，我知道的所有验证码要么无法访问，要么很难使用。

  • 太多和/或不可暂停的动画。 自动播放视频、广告或图像轮播非常分散注意力。

  • 大块的文本。 压缩在一个非常大的单个块中的文本，没有空格、逗号或点。 非常难读。 拆分成更小的块、更多的段落和子标题有助于更好地组织文本内容。

  • 缩放问题。 确保内容在放大到 200% 时仍然可读和可导航。

  • 依靠颜色。 很多时候，一个元素的状态只用颜色标记，例如，警告状态只用黄色子弹标记； 对于色盲的人来说，这种颜色的感知方式不同。

  • 小的可点击/可点击目标。 可点击/可点击的区域通常太小。 让它更大可以让用户更容易地激活它们。

但是如何提高 Web 可访问性？

定义问题是一回事。 修复它是另一回事，而且通常不像看起来那么容易。 这是因为可访问性 API 实现并不一致，有时我们需要找到解决方法，甚至接受这样一个事实，即当我们试图解决问题时，某些东西根本不起作用。

在工具方面，没有一个工具可以检查所有可能的组合，但作为一个好的开始，这些工具应该会有所帮助：

  • W3C 标记验证服务——只是为了确保 HTML 内容没有错误。 如果 HTML 结构有错误，则输出是不可预测的并且无法正确处理，尤其是通过不同的辅助技术。

  • https://www.w3.org/WAI/ER/tools/ — 帮助您确定 Web 内容是否符合可访问性指南的程序或在线服务列表。

  • 我的工具ASLint https://www.aslint.org/ 可以帮助您找到可访问性问题。

始终牢记，没有可访问性工具可以替代手动测试，因为并非所有场景都可以完全或完全自动化，例如，检查具有position: fixed; .

关注阻碍应用程序使用的问题，例如，用户无法使用键盘浏览菜单。

为什么使内容可访问很重要

每个人都希望尽可能广泛地传播他们的内容。 可访问性在许多层面上都有助于该领域，从吸引更多的受众到改善所有用户的用户体验。 此外，可访问性不仅仅适用于您传统上可能认为的残疾人。 无论是正在经历衰老并伴随着身体变化的个体，或是晴天慢跑需要手机自动调节对比度的人，还是双手捧满购物袋想要通过语音发送短信的家长，都触手可及技术是所有用户可能不时使用的技术。

作为额外的好处，积极的影响是完全符合 WCAG 2.0 标准的可访问内容更容易被搜索引擎抓取和理解，并且可以对网站的排名产生重大影响。 因此，可访问的设计可以为网站带来额外的流量。

最后，这里有一些你需要考虑的统计数据：

  • 全世界有超过10 亿人患有某种类型的残疾。

  • 人口老龄化。 从 2015 年到 2030 年，世界上 60 岁或以上的老年人人数预计将增长 56%，从 9.01 亿增加到 14 亿多。

  • 通用设计是关键。 通用设计是指用于生产服务、产品和环境的广泛的想法和实践，这些服务、产品和环境本质上可以被所有能力的人访问和使用。

  • 残疾类型：有五种广泛的残疾类别，包括视觉、行动能力、言语、认知和听力。

我们都需要高质量的服务。 让我们也交付它们。