广州网站建设:手动辅助功能测试的重要性

2019.08.13 mf_web

175

早些时候,一名男子按照智能手机应用程序的指示驾驶汽车驶入湖中,该应用程序通过发出转弯指示帮助驾驶员驾驶。不幸的是,该应用程序的编程没有包括避免道路变成船发射的说明。

从应用程序的角度来看,它确实完成了它的编程工作,即在给定可用信息的情况下找到从A点到B点的最佳路线。从男人的角度来看,没有把现实世界考虑在内就失败了。

广州网站建设同样的原则适用于可访问性测试。

自动化可访问性测试

我将假设您正在阅读本文,因为您有兴趣学习如何测试您的网站和网络应用程序,以确保它们可以访问。如果您想了解有关为什么需要可访问性的更多信息,那么该主题已在其他地方广泛讨论。

自动可访问性测试是一个使用一系列脚本来测试代码中是否存在或缺少某些条件的过程。这些条件由Web内容可访问性指南(WCAG)决定,该指南由W3C制定,其中概述了如何使数字体验可访问。

例如,自动可访问性测试可能会检查tabindex属性是否存在以及其值是否大于 0。伪代码类似于:

询问tabindex值是否存在的流程图。 如果是,则询问tabindex值是否大于0.如果大于零,则失败。 如果没有,它就过去了。 如果没有tabindex值,它也会通过。

然后可以收集故障并用于生成报告,以披露可访问性问题的数量和严重性。某些自动化辅助功能产品还可以集成为持续集成或持续部署(CI / CD)工具,在尝试将代码添加到中央存储库时向开发人员提供即时警告。

这些自动化程序是不可思议的资源。现代网站和网络应用程序是复杂的事物,涉及数百个状态,数千行代码和复杂的多屏交互。期望一个人(或一个人类团队)能够控制所有控制网站每个可能排列的代码,更不用说回归,软件腐烂和A / B测试等事情,这是荒谬的。

自动化真的很棒。它可以通过完美的记忆反复和不知疲倦地倾倒这些细节,速度远远超过任何人的能力。

然而…

自动化可访问性测试不是一个交钥匙解决方案,也不是一个灵丹妙药。使用它们时要记住一些限制。

思考事物

Web的最佳和最差方面之一是有许多不同的方法来实现问题的解决方案。虽然这种灵活性使网络保持稳健和适应性,并确保其比其他竞争技术更长久,但这也意味着您有时会看到创造性地实施的代码。

测试套件与其作者想要检查的一样好。一个天真的开发人员可能只会为快乐路径编写测试,每个人都编写语义HTML,容错JavaScript和范围广泛的CSS。然而,这是现实世界。我们需要承认存在紧迫的期限,不熟悉编程语言,非典型用户输入和粗略的第三方脚本等问题。

例如,自动可访问性测试站点Tenon.io明智地包括一个规则,该规则检查表单元素是否同时具有label元素和aria-label与之关联的元素,以及两个声明的文本字符串是否不同。如果他们这样做,它会将其标记为问题,因为可见标签可能与人们在使用屏幕阅读器导航时听到的不同。

如果您没有使用包含此规则的测试服务,则不会报告。代码仍将“通过”,但它会通过省略而不是因为它实际上是可访问的。

某些自动可访问性测试无法解析交互式内容的各种状态。除非在内容处于活动,选定或禁用状态时运行测试,否则用户界面的关键部分对于自动化实际上是不可见的。

通过交互式内容,我指的是用户尚未对页面加载时执行操作或在页面加载时不存在的操作。未打开的模态,折叠的手风琴,隐藏的标签内容和轮播幻灯片都是示例。

它需要复杂的软件来自动测试单个屏幕中每个组件的各种状态,更不用说整个Web应用程序或网站。虽然可以使用自动可访问性检查来扩充测试软件,但它非常耗费资源,通常需要专门的工程师团队来进行设置和维护。

“有效”标记

可访问的富Internet应用程序(ARIA)是一组扩展HTML的属性,允许它以辅助技术可以更好理解的方式描述交互。例如,如果组件处于展开()或折叠()状态,则aria-expanded可以通过JavaScript切换该属性以编程方式进行通信。这比切换CSS类更优越,其中状态更新仅在视觉上进行通信。truefalse.is-expanded

只有ARIA的存在并不能保证它会自动使某些东西可以访问。不幸的是,尽管ARIA 首次使用规则,但ARIA常被误解,并因此被滥用。许多现成的代码都存在这个问题,使问题永久化。

例如,某些ARIA属性和值只能应用于某些元素。如果应用不当,辅助技术将忽略或误报声明。某些角色,被称为抽象的角色,只存在于建立全面的分类,应该永远被放在标记。

<button role="command">Save</button><!-- Never do this -->
复制

为了使问题进一步复杂化,ARIA的支持因浏览器而异。虽然可以适当地使用属性,但浏览器可能不会将声明的角色,属性或状态传达给辅助技术。

还有一种情况是ARIA可以应用于元素并且从技术角度来看是有效的,但从辅助技术的角度来看却无法使用。例如:

<h1 aria-hidden=“true”>
  Tired of unevenly cooked asparagus? Try this tip from the world’s oldest cookbook.</h1>
复制

这一个奇怪的伎俩。

该aria-hidden声明将删除辅助技术中的内容,但仍允许它在页面上显示。这是一个有问题的模式。

标题 - 尤其是第一级标题 - 对于传达页面的目的至关重要。如果某人使用辅助技术进行导航,则aria-hidden应用于该h1元素的声明将使他们难以快速确定页面的用途。它将迫使他们浏览页面的其余部分以获得上下文,这是一个烦人且劳动密集的过程。

由于语法本身有效,一些自动可访问性测试可能会扫描代码而不报告错误。自动化无法知道声明使用的更大背景。

这并不是说你应该完全避免使用ARIA!在仔细和审议的情况下,ARIA可以解决有时会困扰复杂交互的可访问性方面的差距; 它为依赖辅助技术的人们提供了一些急需的环境。

需要很多的背景

正如潮湿的汽车所展示的那样,计算机在了解外部世界的整体情况方面非常糟糕。在确定计算机吐出的内容是否有用时,由我们人类决定是最终的仲裁者。

揭穿

在我们讨论如何提供适当的上下文之前,有一些关于可访问性工作的常见误解需要解决:

首先,并非所有的屏幕阅读器用户都是盲人。除了Adrian Roselli 在他的帖子中概述的所有观点之外,还有一些值得深思的问题:语音助理的使用正在增加。你最后一次与Siri或Alexa交谈时是什么时候?

其次,可访问性不仅仅是屏幕阅读器。Web内容可访问性指南中概述的规则确保尽可能多的人可以阅读和操作技术,无论其能力或环境如何。

例如,规定网站或网络应用程序的规则需要能够工作,无论设备方向如何都会使每个人受益。有些人可能需要将他们的设备安装在特定方向的固定位置,例如在轮椅臂上以横向模式安装。其他人可能想躺在床上看电影,或者更好地调查产品照片(捏和拉变焦也会对此有帮助)。

第三,残疾可以是有条件的,可以由您的环境带来。这可能是一个短期的事情,比如你的眼镜下雨,睡眠不足或过敏引起的偏头痛。它也可以是长期的,例如衰弱性疾病,肢体断裂或抑郁发作。多种复合条件可以(并确实)影响个体。

尽管如此,许多可帮助屏幕阅读器正常工作的辅助功能修复程序也有益于其他辅助技术。

弄湿你的脚

知道从哪里开始可能是压倒性的。考虑一下ZoëBijl的好建议:

“在您发布网站之前,请选择它。如果您在每个标签后看不到页面上的位置; 你尚未完成。#A11Y

选中您网站或Web应用程序上的一些主要用户流,以确定所有交互式组件的焦点状态是否在视觉上明显,以及是否可以通过键盘输入激活它们。如果在接收键盘焦点时有点可点击或点击但未突出显示的内容,请记下它。还要注意在聚焦时突出显示的订单交互式组件 - 它应该与网站的阅读顺序相匹配。

明显的焦点状态和逻辑标签顺序是帮助您访问网站的好方法。这两个功能有益于各种辅助技术,包括但不限于屏幕阅读器。

如果您需要一个基线来比较您的测试,Dave Rupert有一个名为A11Y Nutrition Cards的优秀项目,该项目概述了常见交互式组件的预期行为。此外,Scott O'Hara还有一个名为a11y Styled Form Controls的项目。该项目提供了诸如开关,复选框和单选按钮等组件的示例,这些组件具有经过充分测试和记录的辅助技术支持。一个聪明的读者可能会使用这些资源中的一个来帮助他们尝试另一个!

a11y Styled Form Controls网站主页的屏幕截图放在营养卡可访问组件网站的屏幕截图上。
(大预览)

第四个神话

有了这个,我将与你分享第四个神话:并非每个辅助技术用户都是超级用户。与任何其他软件一样,涉及到学习曲线。

在她关于Aaptiv重新设计的帖子中,Lisa Zhu发现他们最初的可访问性修复并不直观。虽然他们的第一次实施是“技术上”正确的,但它并没有与依赖VoiceOver的人实际使用他们的设备的方式排列在一起。第二种解决方案简化了交互,以更好地符合他们的期望。

不要以为只是因为假设它具有实际可用的功能。相信你的直觉:如果你觉得特别笨拙,笨拙或乏味,那么对其他人来说也是可能的。

潜水吧

虽然并非每个可访问性问题都是屏幕阅读器问题,但您仍应习惯使用一个问题测试您的网站。不是模拟器,模拟器或其他一些代理解决方案。

如果您发现自己难以使用基本的屏幕阅读器命令来操作复杂的交互式组件,则可能表明该组件需要简化。有可能简化也将帮助非辅助技术用户。好的设计让每个人受益

导航也是如此。如果难以在网站或网络应用程序中移动,则可能表明您需要更新标题结构和标记角色。辅助技术使用这两个功能来快速有效地导航。

侧边栏的两个代码示例。 一个使用div元素,而其他使用一个旁边元素。 两者都有适用于他们的侧边栏类,带有最近帖子的副标题。
这两个都是侧边栏,但其中只有一个是语义上描述的。计算机不知道侧边栏是什么,所以由你自己决定。

另一个要检查的好处是用于描述链接的文本内容。从链接到链接的跳跃是另一种常见的辅助技术导航技术; 一些屏幕阅读器甚至可以生成页面上所有链接内容的列表:

“在你联系之前先想想!您的“有用”点击此处链接对于屏幕阅读器用户来说就是这样。ALT = JAWS链接列表“
Neil Milliken发表推文


- 尼尔米利肯

当使用没有周围非链接内容的有序列表进行导航时,避免诸如“点击此处”或“更多信息”之类的含糊不清的术语可以大大有助于确保人们能够理解页面的整体含义。作为奖励,它可以帮助减轻每个人的认知问题,因为您可以更准确地解释用户在激活链接后应该期望的内容。

如何测试

每个屏幕阅读器都有不同的方式来宣告内容。这是故意的。它是产品功能,安装的操作系统,可用的外形以及可接收的输入类型之间的平衡。

浏览器大战告诉我们只开发一种浏览器的愚蠢行为。同样,我们不应该迎合单个屏幕阅读器。值得注意的是,许多人完全依赖于特定的屏幕阅读器和浏览器组合 - 通过环境,偏好或必要性 - 使这一切变得更加重要。但是,有一点需要注意:每个屏幕阅读器在与特定浏览器一起使用时效果更好,通常是允许它访问最大量的可访问性API信息的浏览器。

如果您有硬件,所有这些屏幕阅读器都可以免费使用。您也可以免费或廉价地虚拟化该硬件。

自动化

自动化可访问性测试应该是您的第一道防线。它们将帮助您在提交之前捕获大量易于预防的错误。重复错误也可能表示模板逻辑中的问题,其中一个上游调整可以修复多个页面。识别和解决这些问题可以让您更明智地花费宝贵的手动测试时间。

在人们可以协作的地方记录可访问性问题也可能会有所帮助,例如Google表格。量化错误的频率和严重程度可以带来诸如更新的文档,午餐和学习教育的机会以及组织工作流程的其他健康变化等好的事情。

与使用各种屏幕阅读器进行手动测试非常相似,建议您使用自动化工具的组合来防止间隙。

视窗

Windows上最流行的两种屏幕阅读器是JAWS和NVDA。

JAWS(带语音的Job Access)是市场上最受欢迎且功能最丰富的屏幕阅读器。它最适合Firefox和Chrome,并且支持Internet Explorer。虽然它是付费软件,但它可以在演示模式下一次完整操作40分钟(这应该足以执行基本测试)。

NVDA

NVDA(非视觉桌面访问)是免费的,但强烈建议捐赠。它是JAWS的一个功能丰富的替代品。它最适合Firefox。

旁白

Windows捆绑了一个名为Narrator的内置屏幕阅读器。它适用于Edge,但很难与其他浏览器连接。

苹果

苹果系统

VoiceOver是一个功能强大的屏幕阅读器,与macOS捆绑在一起。将它与Safari结合使用,首先确保启用了完整的键盘访问。

iOS版

VoiceOver也包含在iOS中,是最受欢迎的移动屏幕阅读器。与桌面版本非常相似,它最适合Safari。这里有一个有趣的注意事项是,根据2017年WebAIM屏幕阅读器调查,一小部分受访者使用外部硬件键盘增加了手机的数量。

ANDROID的

谷歌最近将其移动屏幕阅读器TalkBack整合到一个名为Android Accessibility Suite的大量辅助功能服务中。它适用于移动Chrome。虽然很多Android应用程序都是无法访问的,但仍然值得在此平台上进行测试。Android 在新兴市场的不断增长,以及老年人和低收入人群中互联网使用的增加,应暂停考虑。

热门屏幕阅读器
屏幕阅读器平台首选浏览器手册发射放弃
视窗Chrome,FirefoxJAWS 2018文档像任何其他Windows应用程序一样启动JAWSInsert + F4
NVDA视窗火狐NVDA 2018.2.1用户指南Ctrl+Alt+NInsert + Q
旁白视窗边缘开始使用讲述人Windows key+Control+EnterWindows key+Control+Enter
VoiceOver会苹果系统苹果浏览器VoiceOver入门指南Command+ F5或点击Touch ID按钮 3次Command+ F5或点击Touch ID按钮 3次
移动VoiceOveriOS版移动SafariVoiceOver概述 - iPhone用户指南告诉Siri,“打开VoiceOver。”或在“设置 ”中激活告诉Siri,“关闭VoiceOver。”或在“设置 ”中取消激活
Android辅助功能套件Android的移动Chrome使用TalkBack开始使用Android按两个音量键3秒钟按两个音量键3秒钟

致电专业人士

如果您不需要经常使用辅助技术,那么您就无法完全了解与网络互动的人员。

就像传统的用户测试一样,与你创建的东西太接近可能会让你的判断变得模糊。移情练习是了解问题空间的好方法,但是你不应该把自己当作一个试金石来测试整个体验是否真正可以获得。你不是专家。

如果您的产品为大量用户服务,如果其核心用户群趋向于具有更高的残疾可能性(特殊产品,老年人群,外语使用者等),和/或是否需要符合要求根据法律,我强烈建议将一部分预算用于残疾人的测试。

“在使用百分比方面,您的组织在什么时候停止支持浏览器?占全球流行音乐的18%。有#Accessibility要求,2%的人有色觉缺陷。但是你认为2%的IE使用支持更重要吗?支持每个人都包容。“ 

- 马克威尔科克

这并不是说您应该将责任完全委托给这些测试人员。就像自动化可访问性测试如何检测要删除的较小问题一样,第一轮基本手动测试可帮助专业测试人员将精力集中在您需要专家意见的复杂交互上。除了优化他们的时间价值,它还有助于让您更加舒适地进行分类。这也是一种专业的礼貌,简单明了。

设计经验

我们还需要承认无法自动化的无障碍网站的另一大障碍:糟糕的用户体验。

用户体验可以决定产品的成败。您的代码可以完美编译,您第一次绘制的时间可以快速闪现,并且您的Webpack设置无可非议。如果最终结果无法使用,这一切都无关紧要。用户体验包括所有用户,包括那些借助辅助技术进行导航的用户。

如果一个人无法操作您的网站或网络应用程序,他们将放弃它而不是三思而后行。如果他们被迫使用您的网站通过其他方式获得服务,那么采取法律行动的先例越来越多(这是正确的)。

作为一门学科,用户体验可以大致分为两部分:一些事物的外观和行为方式它们本质上是相互关联的概念 - 任何一项工作都可能影响两者。虽然可访问设计本身就是一个主题,但在从测试角度处理可访问的用户体验时,我们可以记住一些重要的事情:

它看起来如何

WCAG 在很好的设计基础知识方面做得非常出色。颜色对比,字体大小,面向用户的状态:很多这些东西都可以通过自动化进行定位。您应该注意的是所有原子的,难以量化的位来复合以创建您的设计。比如您选择的单词,用于显示它们的字体,事物之间的间距,交互的可用性,处理断点的方式等。

“一个好的字体应该告诉你:
m和r 
之间的区别I和l 
之间的区别O和0之间的差异。” 

- mallory,alice&bob

这是“ 一盎司的预防值得一磅治疗 ”的情况之一。智能,可访问的默认设置可以节省无数的时间和金钱。精益和平均创业公司一直到跨国企业集团都重视资源的有效利用,而这正是您可以真正利用资源的地方之一。把你的基本设计模式 - 比如情绪板或生活方式指南收集 - 放在人们面前,经常看看你的设计意图是否清晰。

它的表现如何

一个诱人的调色板和精心策划的股票摄影集合到目前为止。最终,您将不得不综合所有的设计决策来创建满足需求的东西。

行为可以像微交互一样小,也可以与寻找产品和购买产品一样大。这里重要的是确保一个人试图完成手头任务的所有障碍都被删除。

如果您正在使用角色,请不要为残障用户创建单独的角色。相反,将可访问性考虑因素融入现有注意事项中。由于角色是您想要迎合的用户类型的抽象表示,因此您需要确保包含他们可能遇到的各种条件。残疾状况也不仅限于身体损伤。像计量数据计划,非母语或焦虑这样的东西都值得整合。

“在查看您网站的分析时,请记住,如果您没有在低端手机或更偏远地区看到很多用户,那并不是因为它们不是您的产品或服务的目标。这是因为您的移动体验很糟糕。
作为开发人员,修复它是你的工作。“ 

- Estelle Weyl

用户测试,理想情况下模拟一个人在现实世界中所做的事情(包括他们各自的设备偏好和辅助技术的存在),也是关键。验证人们实际上能够实现操作界面所需的逻辑飞跃,解决了许多认知问题,这是一个难以量化但至关重要的事情。

我们塑造我们的工具,我们的工具塑造我们

我们的工具使用对应于我们的工作类型:木匠用锤子驱动钉子,厨师用煎锅烹饪,用手术刀切割的外科医生。这是一种自我强化的现象,往往导致过度分类。

有时,这种过度分类会妨碍我们记住考虑现实世界。外科医生可能有木工爱好; 厨师可能是一位退休的兽医。重要的是要了解可访问性是每个人的责任,并且有很多途径可以使我们的网站和Web应用程序成为每个人的最佳选择。为了解释Mikey Ilagan,可访问性是一种整体实践,对一些人来说是必不可少的,但对所有人都有用。

ARIA是一个非常好的工具,可以随意使用。我们不应该回避使用它了,只要我们了解了如何和为什么的背后为什么他们的工作。

自动化辅助功能测试以及GPS应用程序也是如此。它们是很好的工具,只需先了解一下地形。

广州网站建设

最新案例

联系电话 400-6065-301

留言