跳过导航
跳过mega-menu
有无障碍问题的图形.

自动化辅助工具

是Deque的数字无障碍工具包吗, 哪一个被认为是易访问性测试和资源的行业领导者. 它具有多个集成,有助于在开发周期的多个阶段创建一致的测试方法: 

  • VS Code扩展 -在编写代码时捕获基本的可访问性问题, 例如缺少图像上的Alt文本和没有正确标记的表单输入元素.
  • Devtools 这个轻量级的扩展集成为一个标签在您的浏览器开发工具. 它允许您扫描页面以查找可访问性问题,并逐步了解更多细节. 主要功能包括对问题的解释以及查看更多信息的链接, 并能够用WCAG的任何成功标准标记问题,以便在需要时帮助优先处理问题. 
  • 反应计划 -如果使用React堆栈,axe包将在Chrome开发工具中输出任何可访问性违规,因为你做了更改, 帮助您在构建过程中尽早发现问题.
  • Jest包 -在构建组件时,也可以将斧作为编写测试的一部分运行, 阻止常见问题进入生产环境.  

波  

浏览器扩展是否可以快速检查页面的可访问性问题. 

它会将它们分类为需要人工测试和调查的严重错误和警告. 

这是一个很好的工具,可以在快照中看到你在一个页面上可能有多少问题,同时使用方便的工具检查标题、内容结构和颜色对比. 

Pa11y 

在Code,我们有一个 Pa11y 为我们的每个产品团队设置仪表板. 

可以根据他们认为适合的产品来配置它们. Pa11y帮助捕获和监控在开发过程中可能出现在站点上的可访问性问题, 但一旦进入制作阶段,并可能通过添加新内容引入.

与波类似,它根据严重程度对问题进行分类,并且可以配置为根据不同的WCAG一致性级别和标准定期运行.

灯塔(Chrome devtools) 

我们中的许多人都会使用 灯塔 在开发工作流程中,但您是否注意到它有一个“可访问性”类别? 

当你检查其他指标时,这可能是一个很好的方法来处理可访问性问题, 因为它可以提供更详细的解释和更多信息的链接. 

和许多自动化工具一样, 要注意,即使游戏的可访问性得分只有100分, 你仍然可以有一种难以接近的体验. 例如,它不能检查任何不可见的元素.

可访问性的见解

一个特别有用的 浏览器扩展 获得一个视觉上的标签顺序和停止. 它可以在你的页面上标记它们,然后在你浏览的时候用一条线把它们连接起来. 

这在向那些可能无法理解问题的人展示时很有用,也不知道为什么仅仅通过解释就能理解问题的重要性. 可访问性洞察还提供了一些其他基本的页面检查.

Web开发人员 

这个扩展 似乎有万能的工具! 突出显示标题级别和使用ARIA的能力特别有用. 

您可以对页面/站点进行小型检查,看看问题可能出在哪里, 还有一些不错的链接来运行可访问性检查和HTML/CSS验证.

浏览器辅助开发工具

浏览器开发工具一直在改进,包括一些测试可访问性的好方法. 

检查可访问性树的能力特别有用. 这有时可以节省调试问题的时间,而不必打开屏幕阅读器. 

可访问性树可用于查看辅助技术如何解释您的元素. 您可以确保它有一个可访问的名称, 检查它的角色以及它可能拥有的任何状态信息. 可以把它看作是DOM检查器,但是用于查看可访问性信息.

可访问性树的一个示例.

浏览器开发人员工具也可以用来模拟各种视觉缺陷, 例如视力模糊和色盲, 以及用户可能在操作系统级别切换的设置, 如首选减少运动和强制色彩模式.

手动辅助工具

色彩对比检查器 

这个工具,这也是可用的Chrome扩展,是由我们的计算机爱好者之一,亚历克斯创建的. 您可以快速检查两种颜色的对比度在不同的一致性级别上的得分, 还可以看到一些使用组合的示例元素. 

键盘  

在考虑可访问性测试时 键盘 你可能不会考虑. 然而,这是测试可访问性的最简单和最强大的方法之一,任何人都可以做到.

你有没有试过把你的鼠标放在一边,试图使用一个页面, 组件或用户旅程? 

在构建过程中这样做是尽早发现问题的好方法, 例如焦点状态/顺序, 关键组件不可用,甚至组件完全跳过!

屏幕阅读器

一开始,使用屏幕阅读器进行测试可能令人生畏, 还提供了方便的指南来学习WebAIM的快捷方式和功能, 它是测试工作流程中的一个重要工具. 

大白鲨 和 改良式戏剧活动 是使用最广泛的屏幕阅读器,都是Windows. 对于Mac, 画外音 已经内置了. 

可访问性新手? 读一下我们的 这里是可访问性入门指南.

我们如何才能创造真正包容的数字产品和服务? 澳门十大正规赌博娱乐平台我们的下一个 以人为本的设计聚会 6月30日 在这里.

在Code Computerlove寻找工作机会

澳门十大正规赌博娱乐平台

在这里注册