您如何确保您的网站符合 WCAG 标准?理想情况下,您应该获得专业的可访问性审核。首先,您可以尝试在线提供的自动可访问性评估工具,以了解基本问题并制定全面的监控策略。
本文中将介绍最流行且大部分免费的工具。

WAVE Web 可访问性评估工具
WAVE 是一种流行的网站可访问性检查器,您可以通过在其网站上输入 URL 或下载 Firefox 或 Chrome 扩展程序来使用它。它添加了错误图标的视觉覆盖,其中包含有关检测到的可访问性问题的详细信息和建议。
它可以提取多余的标题、结构元素、指向 HTML 的链接、较差的颜色对比度、这些问题如何影响不同类型的用户、他们违反了什么 WCAG 等。还有一个代码面板可以让您查看问题的确切位置。

谷歌灯塔
Google Lighthouse 是内置在 Chrome 开发者工具中的可访问性测试工具。该工具检查所有按钮是否具有可访问的名称、所有图像是否具有 ALT 属性以及该页面是否具有标题。好处是您可以检查与 SEO 优化、渐进式 Web 应用程序合规性、一般性能和 Web 开发最佳实践相关的其他问题。

Axe Chrome 扩展
就像斧头重量轻且摆动速度快,有助于劈开和刺穿一样,斧头镀铬扩展件也可以让您准确有效地消除可访问性缺陷。
它允许您单独扫描整个页面或组件,并测试可通过自动化准确检测到的可访问性问题,例如颜色对比度和 ALT 文本。该扩展利用 ax 开源 JavaScript 库——基于 HTML 的 UI 的第三代可访问性规则——使其不同于所有其他应用程序和方法。

Siteimprove Accessibility Checker Chrome 扩展
Siteimprove Accessibility Checker 是一个 Chrome 扩展程序,它通过在页面上突出显示检测到的问题来提供有关您的内容的直观视觉反馈。它与其他工具的不同之处在于,它不仅为您提供页面可访问性问题的概览,还提供有关它们如何影响您的用户的详细说明 - 以及有关如何解决这些问题的具体建议。

WCAG 亮度对比度分析器 Chrome 扩展
此 Chrome 扩展程序允许您检查文本和图像与背景或前景的颜色对比,查看内容是否符合 WCAG 要求,并提供有关您可以改进的建议。此外,它还提供了预览您的设计对于具有不同色觉缺陷类型的用户的外观的可能性。

光敏癫痫分析工具 (PEAT)
PEAT 是一款独立工具,可帮助您确定视频或动画是否可能导致癫痫发作。并非所有内容都需要由 PEAT 评估,但它对于包含在浅色和深色背景颜色之间闪烁或快速过渡的内容至关重要。从本质上讲,该工具指示了扣押风险以及设计人员或开发人员可以付出更多努力并修改内容以消除高风险点的地方。

哈丁试验
Harding 测试旨在分析视频中可能导致癫痫患者癫痫发作的闪烁和模式。这个原始的在线哈丁测试是一项付费服务,提供两种类型的测试——即时自动测试和手动测试。假设您的视频没有通过测试。在这种情况下,该服务提供对素材进行细微编辑以纠正它,以及其他服务,如删除产品放置和冒犯性语言、录像带复制、编码、转码等。

Figma 插件——Able
Able允许您检查颜色对比度。它可以分析您选择的任何两种颜色之间的颜色对比度,让您预览它们在不同对比度下的外观,并模拟这些颜色对于有色觉缺陷的人的外观。最重要的是,Able 还在预览中显示了受每种颜色缺陷影响的人的百分比,因此您将准确地知道有多少用户会以某种方式看到您的设计。
复制所选颜色的对比度并将它们粘贴到您的样式指南中以保持设计一致。

Figma 插件——对比度检查器
Stark 的对比度检查器显示字体和背景之间的对比度。它还分析您的字体是否符合 WCAG 要求的 AA 和 AAA 级别,以及不同的标准和更大的文本标准。Stark 插件也可用于 Sketch 和 Adobe XD。
通过将前景不透明度调整为 < 100% 来检查不透明层的对比度。

Figma 插件——Color Blind
Color Blind 可以帮助您了解您的颜色对于不同类型色盲的人的看法。与其他插件不同,它不仅可以预览您选择的配色方案,还可以创建您的设计副本,并更改颜色以反映特定视觉组的人如何看待它们。
切换插件设置中的复选框以仅查看某些类型的色盲。

VoiceOver Apple 屏幕阅读器
与其他屏幕阅读器一样,VoiceOver 通过朗读文档和窗口中的文本来描述设备屏幕上发生的一切。您可以通过触摸屏、触控板或键盘轻松导航。最大的好处是它内置于所有 Apple Inc. 的操作系统中,如果你想使用它,你不需要安装任何东西。使用屏幕阅读器浏览您的网站可以帮助您了解视障用户将如何体验您的内容。
将常用键盘快捷键(例如用于复制的 Command-C 或用于剪切的 Command-X)与 VO 命令结合使用可以更快地工作

Chrome 扩展程序——频谱
如果您看到页面与用户看到的完全一样,那不是很酷吗?Spectrum Chrome 扩展程序允许您这样做。它以具有不同色觉缺陷的人如何看待它们的方式显示网页,这对于具有数据可视化的网站至关重要,因为某些颜色可能无法与图表中的其他颜色区分开来。

Chrome 扩展程序——色彩增强器
Color Enhancer 是一种不同类型的工具,它的目标对象不是开发人员,而是遇到可访问性困难的人。它是一种可自定义的颜色过滤器,您可以将其应用于可访问性较低的网页以改善颜色感知。用户可以选择最容易混淆的颜色组合,并根据个人需求调整颜色校正级别。事实上,开发人员和设计人员也可以使用此扩展程序来查看不同颜色对视力障碍者的影响。
设置完成后,您可以启用该功能将更改应用到所有网站,这样您就不必每次都调整颜色。
本文内容为转载
网友评论