构建更好的网络：开发人员可访问性指南

围绕 Web 可访问性有很多讨论，并且 Internet 上充斥着有关此主题的信息。当 WebAIM对前 1,000,000 个网站进行研究时，他们发现总共有 50,829,406 个明显的可访问性错误——平均每个页面有 50.8 个错误。许多但并非所有公司都在产品开发结束时进行辅助功能测试。因此，通过培训开发人员并在开发过程中优先考虑 Web 可访问性，可以显着减少可访问性错误的数量。

了解网络可访问性

用最简单的术语来说，Web 可访问性意味着残障人士可以访问 Web。下面是一个有助于进一步理解的示例：盲人用户通常在屏幕阅读器的帮助下浏览计算机，屏幕阅读器是一种文本转语音工具，可以向他们指示屏幕上的信息。当您使您的网站易于访问时，屏幕阅读器可以成功将该信息传递给用户。如果您的网站无法访问，则屏幕阅读器会向用户提供不准确或不完整的信息。换句话说，只有当他们与之交互的网站在设计时考虑到了可访问性时，使用屏幕阅读器等辅助技术才能很好地发挥作用。

“可访问”一词不同于“可用”。一个网站在满足法律合规性的最低限度的意义上可能是可访问的，但它仍然可能无法为残疾人提供最友好的用户体验。因此，重要的是至少要努力让残障人士可以访问和使用您的网站。我们将在本文中进一步讨论如何这样做。

将可访问性整合到您的网站中的五种方法

• 设置自动化的可访问性管道。

  开始在您的应用程序中嵌入辅助功能的最简单和最快的方法之一是遵循Shift left的理念——这意味着辅助功能测试应该在开发过程中尽早开始，而不是等到最后一刻。有不同的可访问性检查器可以帮助您为您的网站设置自动可访问性测试——从您可以在浏览器中手动运行的东西到可以集成到您的 CI/CD 管道中的工具。

  
  

  免费的浏览器扩展包括工具，例如海浪和辅助功能见解.安装后，您可以随时在您的网页上运行它们，它们会在您的网站上向您显示可访问性错误，从表单缺少 ARIA 标签到颜色对比度问题。这些工具是开始您的自动化辅助功能之旅的好方法。开发人员还可以使用代码检查器，例如ax 无障碍短绒在您的 IDE 中编码时捕获问题。根据 Deque 的说法， 与业界认为的 20% 相比，自动化工具现在可以解决 57% 的可访问性问题。

• 从您的自动辅助功能结果中学习。

  您已经为您的网站设置了自动化的可访问性测试——这太棒了。但是，您是否从被捕获的可访问性错误中吸取教训？例如——如果您遇到很多与缺少表单标签或缺少图像替代文本相关的错误——确保您以后不会重复这些错误是很重要的。如果您在您的网站上发现许多对比度问题，最好与您的设计团队交谈以评估您网站的颜色和主题。

  
  

  确保您不会重复简单的可访问性错误的另一种方法是通过代码审查——确保在代码审查期间查找不可访问的代码！一些容易发现的是缺少清晰可见标签的元素的 ARIA 标签、缺少图像的替代文本以及缺少页面标题。使用自动化测试工具很棒，但如果您先发制人地修复它通常会捕获的问题，它的效率可以进一步提高。

  
  

• 键盘导航+屏幕阅读器测试

  如果您想比自动可访问性测试更进一步，请确保使用键盘测试您的网站。所有交互元素都必须可以通过 Tab 键访问，下拉菜单等元素应该可以通过箭头键访问。有关各种 UI 元素的适当击键的更多信息，请参见此处： https ://webaim.org/techniques/keyboard/

  
  

  如果您发现无法通过键盘访问某些内容，请问问自己：这应该可以访问吗？静态表格单元格等元素不需要通过键盘访问。如果它是需要通过键盘访问的自定义交互元素，而事实并非如此，则您需要以编程方式使其可访问。这可以通过添加值为 0 的 tabindex 来完成，这会将元素添加到网页的 Tab 键顺序，然后定义事件处理程序，例如“onKeyPress”，这将在按键时调用必要的操作。

  
  

  例如，此代码片段将 0 的 tabIndex 添加到按钮元素，使其可通过键盘获得焦点和访问。事件处理程序侦听“keydown”事件并在按下 Enter 键时触发按钮点击。

  
  

  <button id="myButton">Click me</button>

   

  const button = document.getElementById("myButton");

  button.tabIndex = 0;

    

  button.addEventListener("keydown", function(event) {

  if (event.key === "Enter") {

  button.click();

  }

  });

  
  

  如果您想更进一步，请尝试使用屏幕阅读器来测试您的网站。如果您的网站没有通过任何第三方最终可访问性供应商进行手动测试，这可能是个好主意。作为开发人员，您不需要执行详细的屏幕阅读器测试，但您可以尝试使用屏幕阅读器浏览网站。检查诸如是否宣布了适当的表单元素标签，是否传达了任何冗余信息，表格中的信息是否可访问等。

  
  

  Windows 讲述人和 Mac 画外音是免费屏幕阅读器的不错选择。屏幕阅读器与常用的键盘导航命令同步，但另外还有特定的命令来导航网站的各种元素。例如，对于 VoiceOver，您可以在此处查找这些命令： https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts .

  
  

• 熟悉一些辅助功能调试工具。

  浏览器辅助功能树等工具可以帮助您查看网站上 UI 元素的辅助功能状态和属性。此工具对于修复辅助功能错误特别有用，因为它可以向您显示哪些辅助功能属性正在暴露给辅助技术，例如屏幕阅读器。要在 Google Chrome 中查看辅助功能树，请在浏览器中打开 Devtools，然后单击辅助功能窗格。这应该在布局窗格旁边。

  
  

  在此处了解有关辅助功能树的更多信息：https ://developer.chrome.com/blog/full-accessibility-tree/#what-is-the-accessibility-tree

  
  

  您可以使用的另一个有用的工具是Paul 的小书签，它还可以突出显示元素的角色、状态和属性。这也适用于手机。这两种工具都有助于了解哪些信息正在传递给辅助技术，因此对于修复任何错误都非常有用。

  
  

• 考虑到各种其他残疾

  除了可以帮助盲人或有运动障碍的人的屏幕阅读器和键盘测试之外，您还应该考虑满足其他残障人士的需求。如果您的网站有视频，请确保在视频中包含准确的字幕。对于有认知障碍的人，WCAG 有一个很好的指南，介绍如何让他们可以访问内容。还要考虑其他残疾，例如色盲。 TPGi 的颜色对比分析器有一个色盲模拟器，它可以成为确保您的网站使用可访问的颜色和主题的绝佳工具。

  
  

  最后，如果您的网站具有自定义的语音转文本功能，请确保有语言障碍的人可以访问它。一种方法是为有语言障碍的人提供合理的时间来完成他们必须说的话。

结论

数字可访问性非常重要，这样地球上的 10 亿残疾人才能公平地访问网络。看看数字可访问性的当前状态——我们可能做得不好。根据一个UsableNet 最近的报告, “2022 年又是 4,000 多起 [可访问性] 诉讼的一年。”使用上面概述的一些策略，开发人员可以在开发过程中嵌入可访问性，并在有人遇到令人沮丧的体验之前捕获并修复尽可能多的错误。