可访问性的工时表

收获作为一个Web应用程序已经有15年的历史了, 这和我花在网络上的时间差不多(!). 在这段时间, 媒体已经发生了如此大的变化，以至于我几乎认不出我早期的最佳实践. 随着Web变得越来越强大，收获也变得越来越强大. 静态页面慢慢变得更加动态, 新的范式需要新的可访问性实践和质量保证.

今年, 免费冰球突破网站已经开始了新的努力来统一收获的设计，使其更加一致, 提供供开发人员组合的标准组件. 在这个过程中, 免费冰球突破网站看到了一个机会，可以确保免费冰球突破网站使用的组件在默认情况下尽可能具有可访问性，并且开发人员即使没有深入的可访问性知识也可以利用它们. 在这篇文章中, 我将试着强调免费冰球突破网站所采取的一些方法以及免费冰球突破网站所取得的不同程度的成功.

具体的例子

我不是易用性方面的专家. 事实上，我经常发现这是一个令人生畏的话题. 有一个巨大的深度和广度的信息被发现，其中一些是相当困难的执行. 对我来说, 取得进展的最好方法是通过一些小的改变来逐步地改进它，所以我将指出一些免费冰球突破网站在收获中改进的例子. 虽然免费冰球突破网站已经取得了很大的进步，但免费冰球突破网站仍在努力实现可访问性. “收获”项目的许多领域仍在改善，这是迄今为止免费冰球突破网站取得的一些成功.

在我开始之前，我想感谢 访问360，他对免费冰球突破网站可以改进的地方提供了宝贵的反馈. 免费冰球突破网站非常感谢他们的投入，以及任何愿意向免费冰球突破网站指出更多例子的人的投入.

如果有疑问，就去看看

任何你不确定相互作用的时候, 我鼓励您启动一个屏幕阅读器，并只使用键盘进行试验. 这是我做出改变时最自信的地方. 我使用macOS Voiceover Utility应用程序, 你可以打开CMD+F5, 但是您可以使用适合您的平台的任何内容.​

有许多不同的屏幕阅读器应用程序, 但了解其中任何一种情况都比什么都没有好得多. 跳进水里，把你的脚弄湿. 询问完成任务的困难程度. 我经常发现这种练习提高了我的UX意识，让我更有可能在没有屏幕阅读器的情况下注意到它们.

• 哪些任务很难完成?
• 为什么它们很难完成?
• 怎样才能使这些任务更容易完成呢?

好的，现在让免费冰球突破网站进入一些细节.

标签

让免费冰球突破网站从一件小事开始:标签! 免费冰球突破网站在审计收获时注意到的一个问题是，许多操作缺乏适当的标签. 例如, 收获中关于各种操作的警报包含一个带有X图标的按钮, 但没有其他背景. 如果用户熟悉交互并能看到X，这就很好, 但是使用屏幕阅读器就不清楚这个按钮做什么了，因为它没有标记. 在这种特殊情况下, 免费冰球突破网站认为免费冰球突破网站有足够的空间去明确，所以免费冰球突破网站使用了文本“Dismiss”. 这意味着操作不需要任何附加属性就可以访问, 它的作用也更明显了. 双赢!

也就是说, 还有一些区域仍然包括只有图标的按钮，免费冰球突破网站还没有抽出时间重新设计. 还有一些地方图标可能是合适的，但无法访问. 在这些情况下，免费冰球突破网站添加了“aria-label”属性以确保这些控件是可访问的. “aria-label”属性用于没有可见文本标记元素的情况，以便屏幕阅读器可以为其分配名称. 例如，免费冰球突破网站经常使用咏叹调标签“Edit”来标记收获中的图标按钮.

例如, 收获的费用部分的编辑按钮有一个aria-label属性值为“edit”. 这清楚地表明，您可以通过单击它来编辑费用.

给缺少标签的元素添加标签是一个相对简单的过程，但免费冰球突破网站发现这是一个有效的方法来改善使用屏幕阅读器时的体验.

测试

我要绕个弯子讲一下测试. 免费冰球突破网站发现，端到端测试是确保事情不会随着时间的推移而恢复到不可访问状态的最佳方法.  特别是, 许多测试框架都包含使用aria属性或通过查询可访问性树来查找元素的选项. 在收获，免费冰球突破网站使用 水豚 在免费冰球突破网站的Rails项目中找到 操纵木偶的选择器 在免费冰球突破网站的Node项目中.

除了保持免费冰球突破网站的互动无障碍, 考虑到可访问性的测试倾向于创建更有弹性的测试. 免费冰球突破网站已经慢慢摆脱了按类定位元素的做法, id, 或者使用数据属性和文本标签来编写免费冰球突破网站的测试. 前者在重构过程中经常会发生变化, 但后者通常不会，这意味着免费冰球突破网站的测试通常可以不受重构的影响. 这使得免费冰球突破网站对测试更有信心，并愿意进行更有野心的重构! 🎉

作为额外的好处，这使免费冰球突破网站的测试非常易读! 而不是 find('#nav > button:first-child').点击免费冰球突破网站写作 点击_on“回家”. 当试图破译一些您没有编写的测试时，这是一个很大的帮助.

好的，回到一些例子…

关注了!

不出所料，Web上的可访问性通常与焦点有关. 当前关注的是什么元素? 下一个关注点是什么? 当前聚焦的元素如何与屏幕阅读器交互? 通常，免费冰球突破网站希望以一种对每个交互都有意义的方式来引导焦点. 免费冰球突破网站并不总是清楚接下来应该关注哪个元素, 但是当注意力转移到一个完全不相关的领域时，这是很明显的. 这是免费冰球突破网站可以弥补的地方!

善良，请倒带

当通过键盘导航时, 一些最不和谐的交互出现在像对话框和下拉框这样的组件中，它们将焦点从正常的流程中转移到DOM中其他单独的元素中. 问题是，一旦交互完成, 焦点不会返回到初始控制, 迫使您在返回任务之前再次以TAB键浏览整个页面.

如果页面上的按钮打开一个对话框, 关闭对话框(使用转义键应该可以做到这一点)应该会将焦点返回到该按钮，这样您就可以继续处理文档流程. 当按下下拉菜单中的一个按钮时，焦点应该返回到菜单触发器. 在下面的例子中, 关闭菜单或单击其中一项应将焦点返回到“导出”按钮.

在收获, 免费冰球突破网站得到的反馈是，与时间条目列表的交互需要一些最初并不明显的改变. 具体地说, 在用按钮从列表中删除条目之后, 重点应该转移到下一项或上一项. 这是一个相对容易的更改，但它对通过键盘导航收获有很大的影响. 在下面的例子中, 删除营销行后，重点应该转移到设计或编程行. 在这种情况下，不完全清楚应该将焦点转移到哪一行, 但这两种选择都比在整个文档中tab键查找位置要好.

这是一个包装

免费冰球突破网站正在做的另一件事是在像对话框和菜单这样的模态组件中提供焦点包装. 当您到达控件末尾时，焦点不应该下降到页面上的其他地方. 相反，它应该包装到组件中的第一个可聚焦元素.

这可能很难，因为, 据我所知, 没有任何标准的方法来提供这种焦点包装. 免费冰球突破网站目前正在使用一个自定义选择器，它捕获收获中所有可聚焦的元素. 这有点脆弱，而且非常特定于收获，但到目前为止它似乎还能工作.

在未来的某个时候，免费冰球突破网站希望使用到目前还没有得到充分支持的版本 惰性的属性. 在此之前，免费冰球突破网站的自定义选择器必须完成这个任务!

自定义控件

收获包含许多自定义选择元素，它们可以在选择一个选项之前筛选一个选项列表. 这些是非常方便的，但最初是相当难以接近的. 他们使用锚标记，没有href作为主要的可点击元素, 并且没有提供aria属性来通知屏幕阅读器当前的选择. 虽然它们可以为视觉用户提供服务，但对其他人来说却完全不可用.

经过大量的工作，免费冰球突破网站提供了一个按钮作为主要的可点击元素，并添加 aria-owns 而且 aria-active-descendant 属性来跟踪所选项. 这项工作进行得很顺利，但需要做很多工作. 如果您可以使用标准控制，我建议您这样做. 如果不是, 在提交之前，请确保充分研究您添加的任何自定义控件的可访问性, 并将额外成本告知项目的涉众.

结论

“收获”项目最近取得了很大进展, 免费冰球突破网站已经编写了一堆易于访问的控件. 也就是说，免费冰球突破网站还没有结束，我认为免费冰球突破网站永远不会结束. 总的来说，改善组件的可访问性和用户体验是一个持续的过程，免费冰球突破网站将继续保持下去. 与此同时，我希望这有助于让人们了解这项工作的实际需要.