体验设计

解决Web可访问性问题的4个有用工具

对你的公司来说,拥有一个无障碍网站和其他数字资产,但是维护可访问性意味着合并有用的工具,以便在您的设计和开发过程中持续使用,并最终使您的最终用户受益。

这里有一些可访问性工具需要考虑。

工具1:斧头

通常是标准的DevTool,用于任何或Chrome/Firefox扩展的可访问性测试。这个工具可以在几分钟内在浏览器中分析页面的可访问性问题。设置是非常容易的,事实上,所有你需要做的是安装斧头扩展直接从b谷歌Chrome网络商店。

按照以下步骤使用该工具测试网页:

  1. 导航到要测试的页面
  2. 打开Chrome的DevTools (Control + Shift + I)
  3. 选择斧头选项卡
  4. 点击Analyze按钮

Axe是一个很好的工具,可以帮助您识别问题,但也提供了您可能需要的一切来解决问题,例如:

  1. 问题的完整列表
  2. 对问题的描述
  3. 问题的影响等级
  4. 允许您切换、突出显示或检查页面上的问题
  5. 解决问题的方法列表
  6. 了解更多问题的链接

工具2:非可视化桌面访问(NVDA)画外音

屏幕阅读器软件为最终用户阅读在线内容,这些用户通常是盲人或视力低下的人,但也可以被其他残疾人士使用。虽然有几个免费的屏幕阅读器可供使用,Windows的NVDA每次使用没有40分钟的时间限制,使其成为任何有视觉障碍的用户每天使用的绝佳选择。

NVDA软件为用户提供了各种命令,以帮助他们通过他们的网络体验,例如:

  1. 开启NVDA: Control + Alt + N
  2. 关闭NVDA:插入+ Q
  3. 停止阅读:控制
  4. 激活链接:Tab
  5. 激活按钮:输入或空格键
  6. 看下一个标题:H
  7. 转到下一个标题级别(1-6):1-6
  8. 去下一个地标/区域:D
  9. 显示所有链接、标题、表单字段、按钮和地标的列表:插入+ F7
  10. 到邻桌去:T

NVDA为有视觉障碍的用户提供了几个其他命令,使他们能够毫无困难地继续访问您组织的网站,并使您能够不断受益于所有类型的用户。

屏幕阅读器的好处

个人可以使用屏幕阅读软件,以阅读pdf, Word文件和网页中的内容。屏幕阅读器从页面左上角开始读取页面上的文本,并描述页面的重要元素和内容,例如标题、链接和表单字段的数量。

用户还可以使用键盘导航跳转到某些元素,使用tab键在页面上的链接和表单字段之间移动。此外,个人可以使用上下方向键在文本行之间移动或移动到下一个项目。

工具3:颜色对比分析器

色彩对比是前景和背景之间亮度或色调值的差异。从本质上讲,前景色(通常是您的字体颜色)和屏幕背景色的值之间的差异。对比是一种帮助我们看清和区分人物与地面的特性。

对比需求

网页内容无障碍指引2.0版(WCAG)要求前景色(文字颜色)与背景色的对比度为4.5:1,以符合标准字体大小为12pt的AA级。大字体或大尺寸文字的对比度可以达到3:1。大字体被认为是14 pt.,大约是18.66 px粗体,或者18 pt. (24 px)或更大的非粗体文本。

对比度要求与WCAG 2.1 AA级相同。WCAG 2.1为用户界面组件和图形对象提供了一个额外的标准(1.4.11),要求与相邻颜色的对比度达到3:1才能通过AA级。

评估这些好处

WebAIM对比度检查器是一个流行的免费资源,您的企业可以使用它来确定您网站上的颜色对比度是否符合适当的对比度准则。以下是你如何检查你的网站是否符合对比指南的方法:

  1. 去网站webaim.org
  2. 输入前景色(例如#ffffff)
  3. 输入背景颜色(示例#6E9F3C)
  4. 检查正常、大型和图形对象的结果。如果AA和AAA的颜色对比没有通过,那么与公司的UX设计团队讨论下一步是很重要的。

工具4:维护键盘的可访问性

使用键盘进行测试是任何可访问性评估的重要组成部分。有几个命令用于最常见的在线交互,交互的标准按键,以及在测试过程中要考虑的事情的附加信息,例如:

  1. 导航到交互元素:Tab
    1. 键盘焦点指示器必须存在。
  2. Shift + Tab键
    1. 这将向后导航。这确保了导航顺序是合乎逻辑和直观的。
  3. 链接:输入
    1. 这将激活链接。
  4. 按钮:输入或空格键
    1. 这将激活按钮,并确保具有ARIA role= " button "的元素可以使用两个键命令激活。
  5. 复选框:空格键
    1. 这将选中/取消选中复选框。当可以选择组中的一个或多个选项时,应使用复选框。

如果您的网站的可访问性有问题,也有机会进行手动测试,我们的可访问性专家有能力帮助您开始。

使用正确的网络工具集

理解无障碍网页的重要性是一种道德和伦理义务,有助于消除残疾用户的障碍。优化您的网站,使其完全可访问提供了实际的好处,如更好的搜索引擎排名,回头客和忠实用户。要了解有关无障碍设计的更多信息,请阅读我们的无障碍设计UX系列,下载我们的指南,数字访问体验:为什么重要以及如何创建它们,今天就联系我们的体验设计专家

作者简介

Apurva Bele是一名首席技术顾问,担任DCS团队的前端开发人员。他喜欢学习和探索与UI相关的新框架和工具,他喜欢与团队分享他的知识。

作者的更多内容

关于“解决网页易访问性问题的4个有用工具”的想法

留言回复

本网站使用Akismet来减少垃圾邮件。了解如何处理您的评论数据

订阅每周博客文摘:

报名