在对讲机，我们的任务是使互联网业务个性化。但是，为了使一个互联网企业成为个人，它也必须是每个人都可以访问的。全世界有超过10亿人患有残疾，占全球人口的15%以上。没有像屏幕阅读器这样的辅助技术，积分返现，网络就无法访问或难以使用。你可以这样想：就像进入你附近的咖啡店，如果你坐在轮椅上，发现柜台太高了，你够不着。"我们相信互联网企业应该能够与所有人交流，不管他们的访问者如何与网络互动"我们认为，企业应该能够与网站上的每个人交流，而不管他们的访问者如何与网络互动。这不仅仅是一种公司理念，也是一种工程承诺。为了优先考虑Messenger中的可访问性，我们仔细研究了需要进行的技术改进，淘客易，并将通常模糊的需求转化为实际的、有意义的解决方案。我们所取得的成就是使我们的网络信使可访问并符合网络内容可访问性准则2.0级AA。web可访问性的共享框架Web内容可访问性指南（WCAG）是一组共享的技术标准，解释了如何使残疾人能够访问Web内容。它的12个准则是围绕四个主要原则组织的，人工智能网络，这为Web可访问性提供了基础：可感知：用户必须能够以某种方式感知内容，使用一种或多种感官。例如，传达有意义的信息的图像应该提供替代文本。可操作性：用户必须能够控制UI元素。例如，所有的功能，如按钮和表单元素都应该可以使用键盘控件访问。可理解：内容必须能被用户理解。这意味着像页面语言这样的东西应该可以在代码中检测到。健壮性：内容必须使用知名的和采用的web标准开发。换句话说，您的代码应该很容易被不同的浏览器和用户代理（如屏幕阅读器）解析和解释。我们的工程工作从研究WCAG指南开始，然后确定web Messenger中需要改进的所有方面。正如我们很快了解到的，将这四个原则转化为真正的解决方案在纸面上比在实践中更简单。将模糊需求转化为实际解决方案WCAG的指导方针很广泛，包括四个原则，有近100个章节，有些领域还很模糊。像"有意义的序列"和"焦点顺序"这样的需求范围非常广泛，特别是对于像我们这样嵌入到许多不同环境中的应用程序来说。"无障碍指南与我们需要构建的内容之间并不总是有直接或明显的关联"这些模糊的需求意味着WCAG指南和我们需要构建的内容之间并不总是有直接或明显的关联。我们在网上遇到了一些没有明确答案的问题，让我们自己想出正确的技术解决方案。最后，我们确定了web Messenger的三个主要可访问性领域：键盘导航屏幕阅读器支持颜色对比度我将为您介绍这些领域，我们学到了什么，以及我们提供的解决方案。改进键盘导航键盘导航是使应用程序可访问的一个非常重要的部分。当视觉或听觉受损的人使用网络浏览器时，物联网应用技术是什么，他们通常依靠键盘导航来进入字段，低价的云服务器，然后让他们的屏幕阅读器读取可以执行的操作。我们在键盘导航方面的工作可以分为三大变化：使元素可通过键盘单击设置正确的焦点状态设计有意聚焦陷阱1使元素可通过键盘单击对讲机网络信使是一个反应应用程序。如果我们希望键盘导航与Messenger一起工作，除了浏览器本机支持的元素之外，每个添加到元素中的onClick处理程序都需要onKeyDown来检查是否按下了enter键或空格键，并执行与onClick处理程序相同的功能。让我们设想一个场景，其中我们的组件是这样的（这些示例包括使用JSX的React组件。您可以在这里了解更多关于JSX的信息。）：导出默认功能（道具）{return

开放模式

；};为了使该组件键盘可访问，我们可以将其转换为按钮：导出默认功能（道具）{return打开模式；}这可能并不容易，因为你的组件可能相当复杂——例如，你可能不想把整个应用程序包装在一个元素中——而且按钮有特定的样式。另一种使此组件可访问的方法是向其添加onKeyDown、tabIndex和role属性：导出默认功能（道具）{返回

（e.keyCode===13 | | e.keyCode===32）&道具.onClick（e） }tabIndex="0"role="按钮">开放模式

；};问题是，将这三个属性添加到应用程序中的每个可单击元素需要大量工作，而添加新功能的工程师很容易忘记添加这些属性或使用元素。构建自动化解决方案为了使键盘可访问性成为默认条件，我们编写了一个自定义的babel插件，该插件自动向所有元素添加onKeyDown、tabIndex和role属性，其中：浏览器本身不支持tabNavigation。当用户点击enter或space键时，浏览器不会在本机触发onClick处理程序。因为babel将JSX转换成常规的JavaScript函数调用，所以很容易静态地确定需要添加键盘事件的组件。我们的自定义巴贝尔插件现在处理我们的键盘导航问题。下面是在react应用程序中使用babel-plugin-react-add-a11y-props的示例：对于那些想知道在render方法中使用arrow函数对性能的影响的人来说，这真的很好，但是由于您的里程数可能会有所不同，所以您应该在优化之前测量您的性能。虽然这个插件将使用onClick将键盘导航添加到所有元素中，但是如果某个元素的行为类似于按钮，那么最好的解决方案仍然是将其更改为实际的button元素。2设置正确的焦点状态为了让你的应用程序可以通过键盘导航，你需要正确的焦点状态。焦点状态帮助用户和他们的屏幕阅读器了解他们在应用程序中的位置以及正在选择的元素。一个好的经验法则是，如果用户依赖于键盘导航，那么应该有一个视觉指示器来突出显示当前有焦点的元素。在我们的例子中，我们设计了视觉指示器，只在检测到您使用键盘导航时才显示。这样，我们可以最大限度地减少鼠标用户的视觉噪音。您可以使用focus visible根据用户的输入方式、键盘或鼠标提供不同的焦点指示器。这是我们的信使，焦距指示灯打开：

三。设计有意聚焦陷阱要使键盘导航正常工作，您可能需要设置有意的焦点陷阱。焦点陷阱是指当用户点击tab键或shift+tab键时，它们被放置在可聚焦元素的特定循环中。您想要设置焦点陷阱的最常见的例子是模态。在我们的例子中，当Messenger处于打开状态时，我们设置了一个焦点陷阱，这样用户就无法在它之外使用tab键。这样，用户就可以在Messenger中导航所有元素，而不必浏览整个网页。以下是我们的信使的焦点陷阱：

设置焦点陷阱通常是一项复杂的任务。焦点从最后一个元素跳到第一个元素，当后退时，焦点应该从第一个元素跳到最后一个元素。要做到这一点，您需要计算所有可聚焦元素，设置适当的事件侦听器，并使其足够灵活，以便您可以覆盖这些规则。我们已经创建了一个开源库来快速轻松地创建焦点陷阱。这个库提供了一个高级API来处理焦点陷阱。一个简单的例子是传递应该捕获焦点的dom元素：const trap=新FocusTrap({节点：文档});您可以在这里查看聚焦陷阱：正如设置有意的焦点陷阱很重要，您应该始终为键盘用户提供退出这些焦点陷阱的方法。您可以在下面的示例中看到这一点。我们还设计了它，以便在模态关闭后，焦点返回到最初打开模态的元素。这是我们的信使：

支持屏幕阅读器屏幕阅读器是一种软件应用程序，它允许视力受损的用户阅读电脑上显示的文本。与键盘导航一起，为屏幕阅读器提供全面支持对于使我们的Messenger可访问性至关重要。我们在支持屏幕阅读器方面的工作可以分为四个主要变化：使文本内容可读和可导航使用ARIA属性定义状态和属性添加视觉隐藏文本删除鼠标悬停状态1使文本内容可读和可导航我们做的第一件事是在HTML元素上设置language属性。屏幕阅读器使用此属性来确定页面的语言，并以预期的方式读取文本。我们做的第二件事是