缩短可访问性测试流程

在 eBay,我们认真对待可访问性,并致力于“为所有人服务”。 为此,我们拥有一支专家团队,他们孜孜不倦地工作,以确保所有人都能访问我们的页面。 我们坚信,可访问性问题应该被视为错误,并以同等程度的谨慎来解决,因此我们很高兴地宣布我们开源前端开发工具的下一个进展。 这 Marko 的可访问性 linter 为开发人员提供直接有关源代码的可访问性反馈,就像文字处理程序中的拼写检查一样。 在详细介绍之前,让我们先介绍一下为什么这是一个如此重要的功能。

eBay 辅助功能测试的历史

手动测试

2014 年之前,所有辅助功能测试都是手动完成的。 鼓励开发人员和测试人员从屏幕阅读器或仅使用键盘的用户的角度逐步浏览每个页面,并找出任何潜在的问题,例如没有替代文本的图像或仅使用键盘无法访问的按钮。 这是一个有效的捕捉方法 明显的 可访问性问题,但它也有一些难以调和的缺点。

首先,开发人员和测试人员需要了解页面中出现的所有可能的可访问性错误。 为了协助实现这一目标,eBay 的无障碍团队创建了 麦片 (针对专家和外行人士的开放式可访问性测试方法),一站式可访问性测试,旨在让每个人都能理解,无论他们在可访问性方面的经验如何。 这有助于提高我们手动测试的质量,但无法完全克服我们想要帮助解决的手动测试的一些固有限制。

手动测试很难进行快速原型设计和迭代,特别是当开发人员和测试人员是不同的人时。 测试人员通常在构建整个页面后才开始工作,这意味着不太可能出现需要开发人员重做大部分工作的问题。 此外,反馈不是即时的,因此如果存在多次变更迭代,创建每个新功能所需的时间可能会显着增加。

依赖的根本缺点之一 纯粹 手动测试的一个缺点是,大部分工作时间都花在测试结构性的、基于规则的可访问性问题上,例如没有替代文本的图像和具有无效咏叹调角色的元素。 这使得测试人员专注于非结构化规则的时间更少,例如确保 Tab 键顺序有意义以及屏幕阅读器用户可以轻松找到他们在页面中位置的上下文。

由于这些缺点,我们在 eBay 逐步开发了工具,帮助自动化部分可访问性测试过程。 我们用于此自动化测试的主要工具是一个称为 Web Accessibility Evaluator(WAE)的内部工具。

使用 WAE 进行自动化测试

当我们开始开发可访问性的自动化测试时,尚未存在成熟的社区解决方案。 因此,我们开发了一个工具,可以发现 HTML 的结构可访问性问题并将其标记为错误。 借助 WAE,团队能够自动筛选已完成的应用程序,以查找可访问性错误和违反最佳实践的情况。 该工具分析页面的 HTML,并找到可以通过简单规则识别的所有错误。

WAE 有助于减轻手动测试的负担。 开发人员和测试人员不再需要记住或参考一系列简单的规则,筛选几乎是即时的,并且由于所有基本错误都可以通过工具发现,因此在手册中更容易关注更主观和非结构化的规则测试阶段。

虽然该工具为我们团队的开发人员体验提供了重大改进,并将继续成为开发人员的资产,但我们认为有一些领域可以从额外的工具中受益。

自从我们开始这个项目以来的几年里,建立了一个用于可访问性测试的开源社区解决方案,称为 斧芯,由 Deque Systems 提出。 但我们发现 axe-core 并不是满足我们需求的完美解决方案。

一项挑战是现代应用程序不是直接用 HTML 代码编写的; 在 eBay,我们使用名为 马尔科。 该框架看起来像 HTML 并为浏览器生成它,但没有从渲染页面的代码到 Marko 代码的直接映射。 这意味着,尽管 WAE 非常擅长通过可访问性在页面上查找错误,但开发人员必须找出每个错误的来源。 这就是为什么,对于一些最简单的错误,我们创建了一个新工具来实时标记可访问性问题 当开发人员编写代码时

Marko 的动态 Linting

linter 是一种分析代码并查找代码中可能需要开发人员关注的部分的工具。 这包括错误,但也包括其他建议,例如样式不一致和逻辑反模式。 马可的 语言服务器 最近我们进行了一次巨大的升级,添加了对 TypeScript 的完整 linting 支持,这有助于开发人员在键入时捕获代码中的逻辑错误。 在开发此功能时,我们为另一个集成的工具奠定了基础 Deque的斧核引擎 也进入语言服务器。

例如,如果开发人员编写了一个不包含替代文本的 img 标签,他们会立即收到一条错误消息,指出其标签不可访问,并描述了问题的解决方法。

231020 Marko 技术博客 v1 inc 1600x 图片 3

Axe-core 给出了解决问题的所有可能方法,通常按照从最容易接受到最不接受的顺序排列。

这个新工具会检查是否违反大量规则,其中许多规则对于未接受过可访问性培训的开发人员来说可能并不明显。 由于可访问性错误与代码中的其他错误以相同的方式突出显示,因此我们希望该工具能够鼓励开发人员立即编写可访问的代码,而不是事后才想到。 这是我们为确保默认情况下可访问 eBay 网站而采取的下一步。

在 eBay,像这样的项目帮助我们实现我们的目标: 适合所有人。 我们相信可访问性中的错误与任何其他类型的错误一样重要。 随着我们改进检测可访问性错误的工具,我们希望继续为使用该网站的每个人(无论他们是谁)提供出色的体验。 我们对开发人员现在可以使用的实时可访问性修正感到兴奋,并且由于 Marko 及其工具是开源的,我们希望这不仅有助于将更多可访问的网站引入互联网,而且还能提高开发人员对可访问性问题的认识。 这是我们迈向无障碍互联网之旅的重要一步,我们期待未来开发人员默认为无障碍编写。

1713284404
#缩短可访问性测试流程
2023-11-27 08:00:00

Leave a Reply

Your email address will not be published. Required fields are marked *

近期新闻​

编辑精选​