美文网首页
设计可访问性——可访问性评估工具

设计可访问性——可访问性评估工具

作者: 嘎嘎开心 | 来源:发表于2022-04-14 10:16 被阅读0次

您如何确保您的网站符合 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 是一种不同类型的工具,它的目标对象不是开发人员,而是遇到可访问性困难的人。它是一种可自定义的颜色过滤器,您可以将其应用于可访问性较低的网页以改善颜色感知。用户可以选择最容易混淆的颜色组合,并根据个人需求调整颜色校正级别。事实上,开发人员和设计人员也可以使用此扩展程序来查看不同颜色对视力障碍者的影响。

网站

设置完成后,您可以启用该功能将更改应用到所有网站,这样您就不必每次都调整颜色。

本文内容为转载

相关文章

  • 设计可访问性——可访问性评估工具

    您如何确保您的网站符合 WCAG 标准?理想情况下,您应该获得专业的可访问性审核。首先,您可以尝试在线提供的自动可...

  • 设计可访问性——表单

    表单是用户与其设备进行日常交互的关键。它们也是最具挑战性的 UI 元素之一,可以在不失去勇气的情况下进行导航。在本...

  • 设计可访问性——链接

    超链接是互联网的支柱之一(另外两个是模因和搞笑猫视频)。这里有一些提示和技巧,可以使您的链接功能性、实用性和所有人...

  • 设计可访问性——文本

    文本是一种强大的工具,可以鼓励访问者在您的网站上做任何您想让他们做的事情。在本文中,学习如何使用这些功能,使您的副...

  • 设计可访问性——癫痫

    根据世界卫生组织的数据,全世界有 5000 万人患有癫痫症。患有这种神经系统疾病的人容易癫痫发作、抽搐和/或失去知...

  • 设计可访问性——焦虑

    一个人的焦虑确实是对担心和恐惧的自然反应。但是,对于某些人来说,它可能会变成一个严重的健康问题,并影响他们在日常生...

  • web可访问性

    目前理解为在页面开发时,要为不同条件用户提供可读性 , 例如视觉障碍 , 强光阅读,为图片内容提供文本,这样即使图...

  • 设计可访问性——听力障碍

    世界卫生组织确定,世界上约 6% 的人口(约 4.66 亿人)患有致残性听力障碍。 不幸的是,一些开发人员和设计人...

  • 设计可访问性——视力障碍

    世界卫生组织发现,全世界约有 4% 的人患有视力障碍。此外,全球 4% 的人口视力低下,0.6% 为盲人。 作为一...

  • 辅助功能

    可用性和可访问性之间存在显着的重叠。尽管可访问性主要关注残障人士,但研究和设计可以提升所有人的产品体验。 有效的无...

网友评论

      本文标题:设计可访问性——可访问性评估工具

      本文链接:https://www.haomeiwen.com/subject/xnxarrtx.html