自动化辅助工具
斧
斧 是Deque的数字无障碍工具包吗, which is considered to be among the industry leaders in accessibility testing 和 resources. It has multiple integrations that help create a consistent approach to testing at multiple stages in the development cycle:
- VS Code扩展 -在编写代码时捕获基本的可访问性问题, such as missing alt text on images 和 not correctly labelled form input elements.
- Devtools – this lightweight extension integrates as a tab in your browser dev tools. It allows you to scan a page for accessibility issues 和 step through any it may find in more detail. Key features include explanations of the issue with links to view more information, 和 the ability to tag the issue with any WCAG success criteria to help prioritise issues if needed.
- 反应计划 – if working with a React stack the axe package will output any accessibility violations in Chrome dev tools as you make changes, 帮助您在构建过程中尽早发现问题.
- Jest包 – 斧 can also be run as part of the tests you write when building components, 阻止常见问题进入生产环境.
波
波 is a 浏览器扩展 that can quickly check a page for accessibility issues.
It’ll categorise them into critical errors 和 warnings that need some manual testing 和 investigation.
This is a great tool to see in a snapshot how many issues you may have on a page while using h和y tools for checking the heading content structure 和 colour contrast.
Pa11y
在Code，我们有一个 Pa11y 为我们的每个产品团队设置仪表板.
These can be configured as they see fit for the products they work on. Pa11y helps catch 和 monitor accessibility issues that might appear on sites during development, but also once in production 和 potentially introduced by new content being added.
Similar to 波 it categorises the issues by severity 和 can be configured to run periodically against different WCAG conformance levels 和 criteria.
灯塔(Chrome devtools)
我们中的许多人都会使用 灯塔 during the development workflow, but have you noticed it has an “accessibility” category?
This can be a great way to surface accessibility issues whilst you’re checking it for other metrics, as it can offer more detailed explanations 和 links to more information.
和许多自动化工具一样, 要注意，即使游戏的可访问性得分只有100分, 你仍然可以有一种难以接近的体验. 例如，它不能检查任何不可见的元素.
可访问性的见解
一个特别有用的 浏览器扩展 获得一个视觉上的标签顺序和停止. It can mark them all on your page, 和 then link them up with a line as you tab through.
This can be useful when presenting to anyone who may not be able to underst和 the issue 和 why it’s so important from explanations alone. Accessibility Insights also comes with some other basic page checks.
Web开发人员
这个扩展 似乎有万能的工具! The ability to highlight heading levels 和 usage of ARIA is particularly useful.
You can do mini-reviews of pages/sites to see w在这里 problems may lie, 和 t在这里 are some nice links to run accessibility checks 和 HTML/CSS validation as well.
浏览器辅助开发工具
Browser developer tools are improving all the time 和 include some great ways to test accessibility.
The ability to inspect the accessibility tree is particularly useful. This can sometimes save time debugging issues without having to open a screen reader.
The accessibility tree can be used to see how assistive technology might interpret your element. 您可以确保它有一个可访问的名称, 检查它的角色以及它可能拥有的任何状态信息. 可以把它看作是DOM检查器，但是用于查看可访问性信息.
Browser developer tools can also be used to emulate various vision deficiencies, 例如视力模糊和色盲, 以及用户可能在操作系统级别切换的设置, 如首选减少运动和强制色彩模式.
手动辅助工具
色彩对比检查器
这个工具, which is also available as a Chrome extension, was created by one of our Computerlovers, Alex. You can quickly check how the contrast of two colours scores at different conformance levels, with the benefit of seeing some example elements using the combination as well.
键盘
在考虑可访问性测试时 键盘 你可能不会考虑. However, it is one of the easiest 和 most powerful ways to test accessibility that anyone can do.
Have you ever tried putting your mouse to one side 和 trying to use a page, 组件或用户旅程?
Doing this during the build can be a great way to pick up issues early, 例如焦点状态/顺序, 关键组件不可用，甚至组件完全跳过!
屏幕阅读器
一开始，使用屏幕阅读器进行测试可能令人生畏, but with h和y guides available to learn the shortcuts 和 functions from WebAIM, 它是测试工作流程中的一个重要工具.
大白鲨 和 改良式戏剧活动 是使用最广泛的屏幕阅读器，都是Windows. 对于Mac, 画外音 已经内置了.
…
可访问性新手? 读一下我们的 这里是可访问性入门指南.
我们如何才能创造真正包容的数字产品和服务? 十大正规博彩网站评级我们的下一个 以人为本的设计聚会 6月30日 在这里.
