如何开始使用屏幕阅读器测试您的网站
已发表: 2022-04-19毫无疑问,建立可访问网站的重要性。 这是网页设计社区中不断讨论的话题。 而且,在我看来,大多数设计师都想把它做好。
可访问性以一种或另一种方式影响着我们所有人。 无论是在博客文章中使用的特定词语还是在页面之间导航的能力——这都很重要。
但是,如果您不是依赖屏幕阅读器等辅助技术的人,则可能会出现脱节。 很容易忽略给定功能如何影响用户。 这可能是因为我们还没有在这种情况下对其进行测试。
我承认我在这方面很挣扎。 我敢打赌,还有很多其他设计师也有。 作为一个通过鼠标导航的视力正常的用户,我的特权并不总是让我考虑可访问性的一些重要方面。
没错,我使用自动化工具进行测试。 我确保字体清晰易读,颜色对比度符合 WCAG 标准,并且图像使用 ALT 属性。 这些都是好事。 然而,它们并不代表使用网站的完整体验。
那么,我们如何将事情提升到一个新的水平呢? 使用屏幕阅读器测试您的网站是一个很好的开始方式。 让我们以初学者的眼光来看看所涉及的内容。 从那里,我将分享我在实验过程中发现的东西。
查找屏幕阅读器应用程序
该过程的第一步是找到合适的屏幕阅读器应用程序。 您可能不必走得太远,因为某些操作系统默认包含一个。
Mac 用户可以使用 VoiceOver,而 Windows 用户可以使用讲述人。 此外,几乎每个操作系统都有其他几个选项可用。 就我而言,我将使用开源应用程序 NVDA。 它可以免费使用(由捐款支持),并且是更受欢迎的选择之一。
无论您选择哪种应用程序,对它的工作原理有一个基本的了解都很重要。 此外,可能需要事先进行一些调整。 例如,您需要确保您能够理解正在阅读的内容。 您可能还希望软件在阅读内容时突出显示内容,使其更易于阅读。
WebAIM 整理了一些方便的指南,用于设置各种屏幕阅读器以进行测试。 他们将使您处于有利位置,以了解您的网站的可访问性。
四处走走
现在您已经准备好可靠的屏幕阅读器,是时候进行测试了! 要体验用户体验,请尝试通过启用屏幕阅读器的键盘浏览网站的各个部分。
一些键盘命令比其他键盘命令更通用。 例如, TAB
键将带您到各种链接和表单控件,而ENTER
将带您到链接的目的地。 大多数似乎使用箭头键从一行移动到另一行。
但是,可能有一些特定于屏幕阅读器应用程序的特殊命令。 它们允许在标题、地标(例如页眉和页脚等)之间导航。为此,您需要查看其文档。
还值得注意的是,以这种方式有效地浏览网站需要练习。 前几次尝试可能有点尴尬。 但是一旦你掌握了各种命令的窍门,事情就会变得更加直观。
我的屏幕阅读器体验
只是为了澄清一下——我不是专业的屏幕阅读器用户。 我的知识充其量是初级的。 但我在 NVDA 上的经历很有启发性。
我用我的商业网站的几页作为试验场。 我发现的不一定是重大缺陷。 可以阅读文本并且可以导航站点。
相反,我发现了一些烦恼——这些事情会让用户感到沮丧,这是可以理解的。 让我们回顾几个例子:
中断的滑块
在接受可访问性专家 Taylor Arndt 的采访时,她提到轮播/幻灯片是会损害可访问性的功能。 使用屏幕阅读器进行测试将其带到了最前沿。
我使用的自动轮播是可以导航的,但有个讨厌的习惯,就是每次看到下一张幻灯片时都会宣布自己。 这使得屏幕阅读器在被打断之前很难深入到页面的其他部分。
我找到了一个足够简单的解决方法。 我使用的 WordPress 滑块插件 (Soliloquy) 有一个选项可以将 ARIA 实时区域更改为不那么激进的设置。 再加上使用轮播的手动导航,摆脱了麻烦。
重复的文字
对图像使用ALT
属性是一种常见的可访问性建议。 但是对于纯装饰性的图像,提供描述性文本可能是多余的。 我在几个不同的场合遇到过这个问题。
博客文章列表是罪魁祸首。 帖子标题和特色图片的ALT
属性都是相同的——这意味着屏幕阅读器会阅读它们两次。 结果是,即使是相对较短的帖子列表也会造成痛苦的用户体验。
症结在于,我使用的 WordPress 帖子列表块没有保留空 ALT 属性的选项。 因此,可能需要解决方法。
了解网站可访问性如何在实践中发挥作用
建立符合 WCAG 标准的网站让人感到满足——这也是我们作为网页设计师应该做的事情。 但勾选待办事项清单上的复选框并不能说明全部情况。
更好地了解其他人将如何体验您的工作需要一些额外的努力。 使用屏幕阅读器进行测试提供了获得更多洞察力的途径。 虽然这绝不是一个完整的指南,但我希望它有助于激发您的兴趣和实验。
正如我发现的那样,即使一个项目被认为可以通过标准的字母来访问,这并不意味着它很容易使用。 这就是为什么深入挖掘是值得的。 这可能是仅可用的站点或提供最佳体验的站点之间的区别。
注意:如上所述,我是这项技术的新手。 如果您有屏幕阅读器提示要分享,请随时通过 Twitter 与我联系。