如何进行无障碍功能审核

如何检查您的网站是否存在无障碍功能问题。

确定您的网站或应用是否可访问似乎是一项艰巨的任务。如果您是第一次接触无障碍功能,那么这个主题的广度可能会让您不知从何处入手。毕竟,努力适应各种能力意味着需要考虑相应的多样化问题。

在这篇博文中,我将把这些问题分解为一个合乎逻辑的分步流程,用于检查现有网站的无障碍功能。

使用键盘开始操作

键盘图标。

对于不能或不愿使用鼠标的用户,键盘导航是他们访问屏幕上的所有内容的主要方式。此受众群体包括有运动障碍(如重复性压力伤害 (RSI) 或瘫痪)的用户,以及屏幕阅读器用户。为了提供良好的键盘输入体验,应提供符合逻辑的 Tab 键顺序和易于识别的焦点样式。

要点

  • 首先,按 Tab 键浏览您的网站。元素的聚焦顺序应符合 DOM 顺序。如果您不确定哪些元素应获得焦点,请参阅重点关注基础知识,回顾相关知识。一般经验法则是,任何用户可以交互或提供输入的控件都应力求可聚焦并显示对焦指示器(例如对焦环)。常见做法是在 CSS 中使用 outline: none 停用焦点样式而不提供替代样式,但这是一种反模式。如果键盘用户看不到焦点所在的内容,则无法与页面互动。如果您需要区分鼠标和键盘焦点来设置样式,请考虑添加 what-input 等库。

  • 自定义互动控件应以可聚焦为目标。如果您使用 JavaScript 将 <div> 转换为精美的下拉菜单,它不会自动插入到 Tab 键顺序中。如需使某个自定义控件可聚焦,请为其提供 tabindex="0"

  • 避免使用 tabindex > 0 的控件。无论这些控件在 DOM 中的位置如何,这些控件都将跳到按 Tab 键顺序排列的所有其他控件。这可能会让屏幕阅读器用户感到困惑,因为他们倾向于以线性方式在 DOM 中导航。

  • 非互动内容(例如标题)应避免可聚焦。 有时,开发者会在标题中添加 tabindex,因为他们认为它们很重要。这也是一种反模式,因为它会降低能够看到屏幕的键盘用户的效率。对于屏幕阅读器用户,屏幕阅读器会读出这些标题,因此无需使其可聚焦。

  • 如果页面中添加了新内容,请尽量确保将用户的焦点定向到该内容,以便用户可以对其执行操作。如需查看相关示例,请参阅在页面级别管理焦点

  • 请避免在任何时候完全无法集中注意力。请留意自动补全 widget,因为它们可能会卡住键盘焦点。焦点可能会在特定情况下暂时卡住,例如显示模态窗口时,如果您不希望用户与页面的其余部分互动,同时您应提供一种可通过键盘访问的方法,以转义模态。如需查看示例,请参阅有关模态窗口和键盘陷阱的指南。

某个内容可聚焦并不表示它可用

如果您已构建自定义控件,则力求让用户只使用键盘就能使用其所有功能。如需了解改进键盘访问的技巧,请参阅管理组件中的焦点

不要忘记屏幕外的内容

许多网站都有屏幕外内容,此类内容存在于 DOM 中,但并不可见,例如,响应式抽屉式导航栏菜单内的链接或模态窗口内尚未显示的按钮。将这些元素留在 DOM 中可能会导致键盘输入的混乱,对于屏幕阅读器来说更是如此,因为屏幕阅读器会将屏幕外内容当作页面的一部分来读出。如需了解有关如何处理这些元素的提示,请参阅处理屏幕外内容

借助屏幕阅读器试用

演讲者备注图标

改进常规键盘支持为下一步操作奠定了基础,即检查网页的标签和语义以及屏幕阅读器导航是否存在任何障碍。如果您不熟悉辅助技术如何解读语义标记,请参阅语义简介,回顾相关知识。

要点

  • 检查所有图片中是否存在正确的 alt 文字。这种做法的例外情况是,图片主要用于展示目的,而不是重要内容。如需表示应由屏幕阅读器跳过某张图片,请将 alt 属性的值设为一个空字符串,例如alt="".

  • 检查某个标签的所有控件。对于自定义控件,可能需要使用 aria-labelaria-labelledby。如需查看示例,请参阅 ARIA 标签和关系

  • 检查所有自定义控件是否具有适当的 role 以及任何授予其状态的必需 ARIA 属性。例如,自定义复选框需要 role="checkbox"aria-checked="true|false" 才能正确传达其状态。如需大致了解 ARIA 如何为自定义控件提供缺失语义,请参阅 ARIA 简介

  • 信息的流动才有意义。由于屏幕阅读器会按 DOM 顺序浏览网页,因此如果您使用 CSS 在视觉上调整元素的位置,那么它们可能会以无意义的顺序进行公布。如果您需要让某个对象在网页中的靠前位置显示,请尝试在 DOM 中提前实际移动它。

  • 旨在支持屏幕阅读器导航到页面上的所有内容。避免让网站的任何部分被永久隐藏或阻止屏幕阅读器访问。

  • 如果内容应该对屏幕阅读器隐藏,例如在屏幕之外或仅具有演示性,请确保将相应内容设置为 aria-hidden="true"。如需进一步说明,请参阅有关隐藏内容的指南。

哪怕只熟悉一个屏幕阅读器,也能受益良多

虽然屏幕阅读器看起来可能很难学,但实际上非常容易上手。一般来说,大多数开发者只需几个简单的按键命令即可上手。

如果您使用的是 Mac,请观看这个视频,了解如何使用 VoiceOver(Mac OS 自带的屏幕阅读器)。如果您使用的是 PC,请观看这个视频,了解如何使用 NVDA。NVDA 是一款以捐款为开发资金来源的 Windows 开源屏幕阅读器。

aria-hidden 不会阻止键盘焦点

请务必注意,ARIA 只能影响元素的语义,而不会影响元素的行为。虽然您可以使用 aria-hidden="true" 将元素设为对屏幕阅读器隐藏,但这不会改变该元素的焦点行为。对于屏幕外互动内容,您通常需要结合使用 aria-hidden="true"tabindex="-1",以确保确实将其从键盘流程中移除。提议的惯性属性旨在通过结合这两个属性的行为来简化这一过程。

提供有关控件用途的视觉提示,有助于用户操作和浏览您的网站。这些提示称为可供性 (affordance)。提供可供性 (affordance) 可让用户在各种设备上使用您的网站。

要点

  • 互动元素(如链接和按钮)应与非互动元素区分开来。如果用户不知道某个元素是否可点击,就很难在网站或应用中导航。有许多有效的方法可以实现这一目标。一种常见的做法是为链接添加下划线,使其与周围的文本区分开来。

  • 与焦点要求类似,链接和按钮等互动元素需要让鼠标用户具有悬停状态,以便他们了解自己是否将鼠标悬停在了可点击的内容上。不过,互动元素本身仍必须清晰可辨。仅依靠悬停状态来指示可点击元素并无助于触摸屏设备。

利用标题和地标

map icon

标题和地标元素会让页面具有语义结构,并显著提高辅助技术用户的导航效率。许多屏幕阅读器用户表示,当他们首次到达陌生页面时,通常会尝试按标题导航。同样,屏幕阅读器也能够跳转到重要的地标,如 <main><nav>。因此,务必要考虑如何利用网页结构来引导用户体验。

要点

  • 正确使用 h1-h6 层次结构。您可以将标题视为制定网页大纲的工具。请勿依赖标题的内置样式设置;而应将所有标题视为大小相同,并针对主要、次要和第三内容使用语义上合适的级别。然后使用 CSS 使标题与您的设计相匹配。

  • 使用地标元素和角色,以便用户绕过重复性内容。许多辅助技术都提供了跳转到页面特定部分的快捷方式,例如由 <main><nav> 元素定义的部分。这些元素具有隐式地标角色。您也可以使用 ARIA role 属性明确定义网页上的区域,例如<div role="search">。如需查看更多示例,请参阅有关标题和地标的指南

  • 除非您有使用 role="application" 的经验,否则应避免使用。 application 地标角色会指示辅助技术停用其快捷方式,并将所有按键操作传递到页面。这意味着,屏幕阅读器用户通常用来在页面中移动的按键将无法正常工作,并且您需要自行实现所有键盘处理。

借助屏幕阅读器快速查看标题和标签

VoiceOver 和 NVDA 等屏幕阅读器提供了上下文菜单,用于跳至页面上的重要区域。执行无障碍功能检查时,您可以使用这些菜单快速浏览网页,并确定标题级别是否合适,以及使用中的地标。如需了解详情,请观看这些有关 VoiceOverNVDA 基础知识的教学视频。

实现流程自动化

扳手图标

手动测试网站的可访问性可能非常繁琐,并且容易出错。 最终,你会希望尽可能地将这个过程自动化。这可以通过使用浏览器扩展程序和命令行无障碍功能测试套件来实现。

要点

  • 该网页是否通过了 aXeWAVE 浏览器扩展程序中的所有测试?这些扩展只是两个可用的选项,可以作为任何手动测试流程的有用补充,因为它们可以快速发现对比度失败和缺少 ARIA 属性等细微问题。如果您更喜欢从命令行执行操作,axe-cli 可提供与 aXe 浏览器扩展程序相同的功能,但可以轻松从终端运行。

  • 为避免性能下降(尤其是在持续集成环境中),请将 axe-core 等库整合到自动化测试套件中。axe-core 是为 aXe Chrome 扩展程序提供支持的同一引擎,但采用了易于运行的命令行实用程序。

  • 如果您使用的是框架或库,它是否提供自己的无障碍工具?部分示例包括:Angular 的 protractor-accessibility-plugin 以及 Polymer 和 Web 组件的 a11ysuite。请尽可能利用可用的工具,避免重复劳动。

如果您正在构建渐进式 Web 应用,不妨考虑尝试一下 Lighthouse

Lighthouse 徽标。

Lighthouse 是一款可帮助衡量渐进式 Web 应用性能的工具,但它也使用 axe-core 库来支持一组无障碍功能测试。如果您已在使用 Lighthouse,请留意报告中是否有失败的无障碍功能测试。修正这类问题有助于改善网站的整体用户体验。

总结

将无障碍功能审核作为团队流程的常规组成部分,并尽早且经常进行此类检查,有助于提升网站的整体使用体验。请注意,良好的无障碍功能等同于良好的用户体验!

其他资源