Skip to main content
Cypress无障碍测试高级解决方案

提升可访问性

本指南介绍如何分解可访问性报告,并使用 Cypress Accessibility 制定有针对性的修复计划。

一份包含通过和未通过规则的可访问性规则列表。其中标出两个主要部分——通过规则为'当前标准',未通过规则为'待解决问题'。在未通过规则列表中,有2条规则因失败元素数量最少被特别标注为'下一步任务'

从零开始

如果您正在处理一个存在大量可访问性问题的遗留应用程序,Cypress Accessibility 提供的可操作见解能帮助您确定修复优先级。使用运行的可访问性选项卡来识别跨页面和组件的违规情况。尽管问题数量可能令人望而生畏,但关注以下关键因素能指导您的改进方向:

  • 目标:明确您的可访问性目标
  • 时间表:制定切实可行的改进时间表
  • 资源:评估可用于修复的资源
  • 未来代码变更:重点关注可能发生变化的代码区域
  • 风险评估:考虑保持不可访问状态的风险和成本

有效的修复通常需要跨部门协作,这突显了全组织对可访问性承诺的重要性,因此了解组织对可访问性的立场以及需要参与讨论的人员也很有帮助。

如果您的组织或团队刚接触可访问性,很可能会发现 Cypress Accessibility 中 Axe Core® 报告的大量问题。首次报告中的许多问题可能涉及新概念,如ARIA属性交互控件的无效嵌套。由于无法一夜之间解决所有问题,我们建议从一些容易解决的问题入手。这能帮助团队通过取得初步成果建立信心,并了解修复可访问性问题的整体思路。

理想的低垂果实

某些可访问性问题更容易解决但影响重大。考虑与WCAG SC 4.2.1 - 名称、角色、值相关的问题,该标准确保交互控件被正确标记。此类违规通常具有以下特点:

  • 在应用程序中频繁出现
  • 被Axe Core®标记为严重或重要
  • 直接影响屏幕阅读器用户的使用体验

示例:"按钮必须具有可识别文本"

现代界面中常见的问题是未标记的图标按钮。button-name规则确保按钮具有描述性文本,是理想的起点,因为:

  • 添加标签是简单的代码更新
  • 正确的标签能提升所有用户的可用性
  • 修复通常不需要跨团队协作
  • 易于通过屏幕阅读器验证

违反button-name规则的现有代码通常可以快速修复,只要明确控件的正确文本标签。对于新代码,这些文本标签内容也容易加入设计和需求阶段的讨论,从而将可访问性讨论左移。

由于Cypress中的每个违规都链接到Deque University页面,其中包含问题性质和修复方法的详细信息,即使对可访问性主题不熟悉的工程师也能获得所需背景。

即使您的首个目标规则不是"按钮必须具有可识别文本",我们建议选择类似需要较少协调或理解即可修复的规则,让团队能尽快获得成功体验。

在分支评审中检查变更

可访问性工作中最令人沮丧的体验之一是修复一个问题后,却发现引入了其他问题。特别是当反馈周期较长时,这会降低每个人对修复过程的信心。在进行可访问性改进时,您可以使用分支评审查看解决方案的效果——包括发现可能与代码变更相关的问题增加。

设定可实现的目标

为每项工作设定明确目标,例如在特定范围内修复某规则的所有违规。例如:

  • 视图聚焦:解决单个页面或组件上的所有规则违规
  • 规则聚焦:修复跨多个页面或整个应用程序的单个规则违规

实现这些里程碑能为您和团队提供明确的完成标准,同时也留出时间评估变更影响。通常,修复一个问题可能会在整个应用程序中产生连锁反应,特别是在组件化架构中:最初设定小目标完全可行,事实上也更可取。

迭代走向成功

渐进式改进是实现长期可访问性提升的关键。通过专注于可管理的目标,您的团队能够:

  • 获得特定可访问性规则的专业知识
  • 建立预防未来回归的工作流程
  • 逐步提高项目中的可访问性标准

借助Deque University报告中"了解更多"链接的支持,即使是刚接触可访问性的团队也能学习相关背景知识,并自信地解决问题。

有关预防回归和执行可访问性策略的指导,请参阅我们的阻止拉取请求章节