如何在无障碍性方面失败—

16分钟•写于5年前

大家好！

我叫Trish，又名。@菲什在网上，我的代词是她。目前，我是Slack的前端工程师，我在那里工作内部设计系统和组件库，已调用休闲套装更具体地说，我与其他工程师一起构建React组件，这些组件构成了我们Slack客户端的基础层，并帮助确保该基础层组件完全可访问。

我在这个行业做前端工程师已经有十多年了，如果有一件事我很熟悉的话，那就是失败但是，我是来告诉你的，没关系！失败是正常的：每个人都有失败的时候，然后我们学习，然后可能再次失败，以同样壮观的方式再次学习。这是一个我们都会经历的循环，也是我们人类成长的方式。

如果你也是一名前端工程师，我相信你也同样熟悉这种失败的感觉。浏览器呈现的不一致性常常让人觉得你身处荒凉的西部，web编译器的行为就像一个充满噩梦的黑匣子，然后是任何web项目可怕的最后一步：可达性.

请允许我分享一个失败的个人故事。一年多前，我正准备在Slack上推出我的第一个大功能。我觉得自己是世界上最棒的人，我花了几个月时间研究的这个新工具将向所有使用Slack帮助他们简化工作、使工作更愉快、更有效率的人推广。然后，我收到了这样的信息：

总之，这是这样写的：“嗨，崔西！这是选项列表吗？因为屏幕阅读器根本无法访问它。同时，祝贺发布！很抱歉，在你的游行中下雨了。”

在这一点上，我很难不觉得自己是个失败者。但是，我很自豪地说在Slack，我们将易访问性错误视为 功能中断和产品阻塞。如果你的网站无法访问，这意味着互联网上的真人无法使用它。对于Slack来说，我们每天有超过1000万用户，无法与你的队友沟通，无法与内容互动，或者无法完成你的工作，这简直是不可接受的。

我会诚实的，我不是无障碍专家。幸运的是，此消息在内部发射被我们令人难以置信的易访问性团队标记，我只是想让我知道我还有很多要学习，还有一些工作要做。从那时起，我学到了很多关于屏幕阅读器的复杂性、构建包容性以及创建易访问体验的知识。我不是无障碍专家，但事实证明，你不需要做这项工作.

那么，让我们翻转脚本，深入到-“如何不无法访问“

我们将涵盖三个主要领域：

测试 — 你如何知道你的网站目前是否可以访问？
建筑物 — 一旦确定了一些bug，如何编写可访问性代码？
过程 — 你如何改进你的流程，从一开始就防止错误？

测试

网络上的可访问性意味着什么？它的范围非常广泛，但谢天谢地，它也有完整的文档记录。W3C建立了网络内容可接近方针或WCAG。如果你退房这位可爱的医生，你会发现你想知道的关于网络可访问性的一切都是以冗长的格式呈现的。

这些指南将可访问性合规性分为三个级别：A级、AA级和AAA级，每个级别都有特定的标准来衡量是否符合WCAG。每个级别都定义了对受支持的可访问功能的更严格遵守，A级是最低级别的遵守，AAA级是最严格的遵守。在Slack，我们的所有功能都将达到AA级，并尽可能达到AAA级。

人类能力的范围和支持它们的技术是无限广泛的，甚至这些指导方针都没有正确解决其中的复杂性。现在，我们将让您开始四个您现在可以测试的领域-你好，世界如果你愿意的话，我会让你在后面深入研究更精细的支持。这四个方面是：颜色对比度、用户界面缩放支持、键盘交互模型和屏幕阅读器支持。

🌈 颜色对比度

当观察对比度时，我们没有评估每最后一种颜色在你美丽的网站上：相反，我们有兴趣确保你网站上的信息和互动元素可以感知和理解。具体来说，这意味着网站上的正文副本、大文本（表示任何粗体14pt或18pt非粗体及以上的内容）和UI元素，例如图标和表单元素。

这里工作的最佳工具是颜色对比度分析仪，它允许您使用滴管或十六进制代码检查前景色和背景色，并将立即告诉您是否符合底部的标准。毫无疑问，白色背景上的浅灰色文本不符合对比度要求。

🔎 用户界面缩放

UI缩放是指使用CMD或CTRL+/-切换的浏览器内置缩放功能。在Slack，我们的设计师提供了我们支持的不同缩放级别的模型。测试这一点最简单的方法是简单地放大几个级别，花一两天时间在界面中查找破损区域。

键盘导航

也称为键盘交互模型。这是指仅使用键盘导航web内容，最常用的是使用Tab键和Shift+Tab键向前和向后移动，以及使用方向键、Enter和Esc以与UI元素交互。

每年5月，我们的无障碍团队都会为全球无障碍意识日他们鼓励我们把鼠标放在书桌抽屉里，只通过键盘使用Slack。我记得去年尝试过，发现我有多少方法可以提高效率，也发现了我努力的地方，因为我不知道不同的常见模式是什么。

在Slack客户端中，我们提供了这个方便的关键命令调色板，以帮助那些可能有行动不便的人，并使人们成为Slack的超级用户。

除了键盘支持外，可访问性准则还要求您指示当前焦点是什么，这里用模糊的蓝色圆圈表示。

在测试界面时，需要注意的一件重要事情是，如果你注意到你可以进入一个部分，但却无法离开它。这些都被称为键盘陷阱，应该避免。

💬 屏幕阅读器支持

如果你已经修复了键盘交互模型，那么你已经完成了一半！屏幕阅读器是一种辅助技术这可以听得到用户当前正在与什么交互，对于视力低下或没有视力的人来说尤其有用。

如果你有Mac，屏幕阅读器软件内置VoiceOver（语音覆盖）。要启用此功能，请打开“系统首选项”，导航到“辅助功能”选项卡，然后启用VoiceOver。PC也有同等的免费软件选项，例如NVDA公司.

这里有一个使用屏幕阅读器的快速预览：你会注意到当键盘聚焦于一个元素时，屏幕阅读机会首先宣布它是什么类型的元素，它是如何定义的，然后在你与它交互时更新。你能通过听猜这是什么界面吗？

此外，屏幕阅读器使用转子快速浏览网页上的各个部分。这是确保您一开始就使用定义良好的语义HTML标记的原因之一，因为这就是转子对内容进行索引的方式。您可以使用Control+Option+U向上拉动转子，向左或向右移动以访问可用的不同菜单。

建筑物

既然您已经确定了一些需要清理的区域，那么如何改进代码以提供可访问的体验呢？一旦你开始建筑，有三个广泛的问题需要考虑。对于屏幕阅读器，您需要提供适当的HTML和ARIA标记。您将非常非常熟悉程序化的焦点管理。您还可以利用诸如变量使用和状态管理等现代编码实践来提供帮助。

让我们回到George之前的调用。我所开发的功能涉及一个相当常见的界面：一个带有关联列表的输入框，它将使用输入框中的任何内容进行过滤。这被称为下拉列表框.

看看之前和之后的结果，你能确定这里有什么不同吗？你仍然有一个方框，下面还有一个列表。这里的问题是我完全按照它的声音处理它：我使用了文本输入，然后在它下面使用了列表菜单组件。对我来说，很明显，尽管涉及两个部分，但它们是相关的：它们都有相似的风格和版式，它们在构图上紧密结合，并被一个白色背景的盒子所容纳。很简单，对吧？

这里的问题在于最初的假设。尽管对我来说，它们作为相关元素在视觉上是不同的，但事实证明，读屏者并没有从这些视觉线索中获益。相反，对于屏幕阅读器来说，它们是两个截然不同的组件。

为了解决这个问题，我需要切换到一个完全不同的底层架构：我们现在有一个组件，即Select，而不是两个组件，它在内部具有连接输入及其相关选项列表的措施。就像你的键盘一样，屏幕阅读器一次只能关注一个组件。这样，屏幕阅读器就可以继续关注容器Select，当有人浏览列表或在框中键入内容时，两个内部组件都会更新其父组件。

但是，你可能会问，这是如何工作的？

回到方便的W3C文档。他们定义了一个用于向辅助技术指示屏幕上发生的情况的API称为ARIA，或可访问的富Internet应用程序。幕后发生的事情是，这个可访问性API解析您网站上的DOM，将其传递给屏幕阅读器或其他辅助技术，然后将信息输出给用户。

屏幕截图可访问的富Internet应用程序w3c.org上的规范以及它如何与辅助技术一起工作的详细信息

正如浏览器与呈现CSS的方式不一致一样，每个浏览器解释ARIA标签的方式也是一样的。这没有问题，只要继续在多个浏览器和平台上彻底测试您的web内容，我相信你们都已经这样做了。

我们已经学会了用我们所有的技术规范构建ARIA模式，以便在开始编写任何代码之前知道我们的组件应该从一开始就可以访问。但这并不总是容易的，因为我们的许多组件需要支持许多不同的用例，有时构建出来看起来更像这样。只要确保与你的同龄人一起讨论它，以确保你涵盖了你的所有基础。

一旦你最终进入代码级别，事情就开始看起来更像这样了，你可能有一个分布在几个组件中的功能，并且可以使用Javascript实用程序来构建和连接通知你的ARIA属性的ID。对于一个更具体的示例，这里是完成的组合框，它在其中读取适当的内容。

构建Slack的内部设计系统帮助我们围绕一致的代码库例如，去年我们承担了大量任务，审核整个代码库中的所有现有颜色，简化并确保它们都兼容，然后设置线头以防止任何额外的一次性颜色。这只是我们为帮助准备暗模式所做的步骤之一，并确保它仍然可以完全访问。

过程

你如何改进你的流程，以防止错误一开始就蔓延进来？让我们回到一年前Slack的情况。

我加入后不久，我们大约有75名前端工程师。但其中，我们只有一名无障碍专家。正如我之前所提到的，我不是一名无障碍专家：我们有著名的托德·克洛茨，他有着令人难以置信的天赋和惊人的合作。然而，尽管他技术娴熟，但很明显，尽管我们想要构建和支持所有可访问的功能，单靠一个前端是不够的。

因此，在过去的一年里，我们推出了类似的培训，以确保Slack的所有前端工程师都了解什么是可访问性标准，如何进行测试，以及如何将这些最佳实践融入到他们的功能开发中。更重要的是，这意味着我们可以通过代码审查测试彼此的功能。

我们甚至更进一步，现在确保即使在设计师级别，整个团队都知道什么是可访问性以及如何进行设计。我们的设计师现在在必要时提供铰接键盘交互模型。我们甚至在可能的情况下招募我们的产品编写和国际化团队，以确保输出给屏幕阅读器的内容清晰易懂，无论用户身在何处。

在整个开发阶段，让我们的前端团队使用集中的设计系统意味着他们使用的组件在默认情况下是可以访问的。在这一点上，我们在75%的代码库适用区域中使用了SlackKit组件。当人们从头开始开发这些组件时，我们要求他们编写一份技术规范，包括可访问性考虑事项，并且在整个构建过程中，我们定期与我们的可访问性专家Todd联系。关于易访问性，我学到的最有用的一件事是在你的过程中尽早考虑它：正如有人曾经说过的，在烤松饼之前加入蓝莓更容易。

最后，在我们准备发布时，我们有一个专门的QA团队来彻底测试可访问性，此外还有一个第三方服务Ultra，它也会进行审计。

即使您的公司没有组件库、设计系统或QA团队的优势，也希望这样入门套件足以让你开始成为自己的常驻专家，并不断学习更多关于什么是可能的。

总之

大家干得真好！你已经学到了很多，并准备将所有这些最佳实践应用到你自己的web内容中。

我想让你停下来思考一下你今天在网上浏览时所做的一切。比方说，你醒来后查看了一个天气网站，决定了当天的着装方式。然后你可能会查看推特来了解正在发生的事情。你可能很快就会看到一个有趣的新Javascript会议，所以你点击他们的网站，阅读描述，然后买了一张票。然后，也许你需要在下班后去附近的一家很棒的餐厅庆祝朋友的生日。

英国最近的一项研究发现，大约70%的网站不符合可访问性标准。你能想象，当你在浏览互联网、查找信息和填写表格时，70%的时间你遇到了Javascript错误，无法继续吗？我不知道你们是怎么想的，但我会感到非常沮丧，可能会讨厌使用互联网。