Useful Web 辅助功能 Checks and Tools “产品人员-产品经理,产品设计师,UX设计人员,UX研究人员,业务分析师,开发人员,制造商和企业家 April 04 2020 真正 可访问性,可访问性测试,可用性, 注意产品 介意产品有限公司 881 产品管理 3.524

Useful Web 辅助功能 Checks and Tools

通过 ON

您将在线找到各种免费的可访问性工具。其中包括从颜色对比检查器和可读性工具到开源屏幕阅读器的所有内容。

例如,您可以使用 WAVE Web辅助功能评估工具 (输入网址,该工具将立即突出显示错误),而 冈尼雾指数  可用于检查文本的可读性。只需将一段文本(一个或多个完整的段落,大约100个单词)粘贴到窗口中,然后单击“计算”。

  • 面向广泛受众的文本通常需要小于12的索引
  • 几乎可以理解的文本通常需要小于8的索引

探索广泛 在线评估工具列表 在W3C上,有关一些基本检查的一些提示和技巧,请继续阅读!

手动检查

您可以进行一些简单的检查。在这里,我们’ve提供了三个入门的说明。

在您的站点上测试键盘导航

如果你’我们没有尝试仅使用键盘浏览您的网站,’是时候试一试了。这个简单的练习将迅速告诉您,通过键盘或替代键盘可以很好地操作您的界面,视力有限或没有视力的用户或​​肢体残障的用户可能会很难使用鼠标和/或键盘,也会遇到这种情况。

第1步: 加载您的网站,然后按“ tab”键。首先强调什么?您的键盘用户将在这里开始体验您的网站。

第2步: 继续按“制表符”,查看您的网站将用户带到何处。是否有意义?您可以仅使用Tab键就可以进行交互的所有内容吗?

第三步: 开始测试您的主要工作流程。

为此,您可以:

  • 在链接或按钮上按“ Enter”–当您这样做时,它的行为就像用户单击它一样
  • 按“ Enter”或“ Space”–这应该允许用户访问下拉菜单
  • 按方向键–这应该允许用户浏览选项
  • 签到表单字段时检查是否可以开始键入
  • 检查您是否可以退出弹出窗口或叠加层而无需在框外单击

使用键盘进行测试的主要目标是,如果没有鼠标,可能会卡在应用或网站中。您可以在以下位置找到有关键盘操作的详尽指南 W3C.

添加/改善图片替换文字

每一个<img>您网站上的内容应具有alt =属性。这使辅助技术能够读取它,以描述图像向视障用户显示的内容。

当然,替代文字有更多用途:

  • It’为SEO提供更好的上下文和描述
  • 图像加载失败时显示

但是,’的主要目的是可访问性,当您了解规则时,实现起来很容易:

规则1: 所有图像应具有 清晰且描述性的替代文字 –alt =属性。该文字应描述图像传达的信息,包括数字和单词,而不仅仅是图像本身。

规则2: alt =的使用适用于所有图像,但方式不同。对于包含信息的图像和活动图像(执行链接或按钮等功能的图像),请应用上面的规则1。如果图片纯粹是装饰性的,请使用alt =属性,但将其保留为空,例如alt =””。这将告诉屏幕阅读器忽略图像。

检查标题

应始终使用正确的标题–避免使用文字’的样式或粗体。较大的字体有助于创建层次结构,并且在标题类型被赋予标签的情况下更易于阅读(<h1> to <h6>)来定义其含义。

这些重要组件以及您网站上的其他组件有助于创建您的 可访问性树。 而且,在使用屏幕阅读器和其他辅助技术时,用户可以使用标题浏览内容:

  • 查看页面上所有标题的列表
  • 按标题阅读或跳转,
  • 导航至标题的不同级别– <h1> to <h2>等等等等

要手动查看辅助技术是否可以正确拾取您的标题(以及图像等组件),请尝试以下快速检查:

  1. 右键单击您网站上的页面
  2. 请点击 ‘Inspect’
  3. 下‘Elements’ look for ‘Accessibility’
  4. 点击‘Accessibility’标签,在页面上的某处,然后右键单击并选择‘Inspect’
  5. 您的可访问性树现在将加载,向您显示什么是和什么’t being picked up –这也是一种感觉检查的好方法,例如标题以确保它们有意义

颜色对比检查

由于主要的颜色对比指南可能会有些混乱,因此WebAim在简化操作上做得很好。 WCAG 2对比度和颜色要求 适用于网页设计师和内容创作者。这些以及其他免费的在线工具可用于轻松检查您网站上的颜色对比度。

大多数对比度检查器会要求您提供前景和背景

材料设计中的颜色工具 如果您找到了一个很棒的工具,技巧或资源,’d喜欢我们与“思想产品”社区共享,请告诉我们。完成我们的无障碍想法共享表格。