支持无障碍功能

扩展程序让用户能够根据个人的能力和偏好来打造理想的浏览体验。扩展程序应包含无障碍功能组件,通过使视障、听力受损、灵敏度受限和其他残障人士可以使用该扩展程序,从而鼓励包容的用户群。

所有人(而不仅仅是具有特殊需求的用户)都可以从无障碍功能中受益。有视力障碍、灵敏度低且高级的用户都能从键盘快捷键中获益。字幕和转写对于失聪用户至关重要,但也对语言学习者很有帮助。

用户可通过多种方式与扩展程序互动。有些用户使用标准显示器、键盘和鼠标,或者可能使用屏幕放大镜,还可能需要使用屏幕阅读器。虽然无法预测用户使用哪些工具访问扩展程序,但任何开发者都可以采取一些措施使扩展程序尽可能易于使用。

集成无障碍界面控件

如果用户无法访问界面控件,就无法使用扩展程序。若要创建无障碍界面,最简单的方法就是使用标准 HTML 控件。

标准控件

请尽可能使用标准 HTML 界面控件。标准 HTML 控件可通过键盘访问、轻松缩放,并且屏幕阅读器通常可以理解。

按钮、复选框、单选按钮、文本、选择/选项和链接的屏幕截图和代码

自定义控件中的 WAI-ARIA

网络无障碍倡议 - 无障碍丰富互联网应用 (WAI-ARIA) 是一项规范,旨在通过一组标准的 DOM 属性让屏幕阅读器可以使用界面控件。这些属性向屏幕阅读器提供有关网页上控件的功能和当前状态的信息。

若要向自定义控件添加 WAI-ARIA 支持,您需要修改扩展程序的 DOM 元素,使其包含 Chrome 用于在用户互动期间引发事件的属性。屏幕阅读器会响应这些事件并描述该控件的功能。WAI-ARIA 指定的 DOM 属性分为角色状态和属性

<div role="toolbar">

aria-activedescendant 属性指定工具栏获得焦点时工具栏的哪个子项获得焦点。代码 tabindex="0" 指定工具栏按文档顺序获得焦点。

请参考以下示例工具栏的完整规范:

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

当 WAI-ARIA 角色、状态和属性添加到控件的 DOM 后,Google Chrome 会向屏幕阅读器引发相应的事件。由于对 WAI-ARIA 的支持仍处于开发阶段,因此 Google Chrome 可能不会为每个 WAI-ARIA 属性引发一个事件,并且屏幕阅读器可能无法识别所有引发的事件。

有关将 WAI-ARIA 控件添加到自定义控件的快速教程,请参阅 Dave Raggett 的 WWW2010 演示文稿

将焦点置于自定义控件中

对于不使用鼠标浏览网页的用户来说,键盘焦点至关重要。确保操作和导航控件(例如按钮、列表框和菜单栏)可以获得键盘焦点。

默认情况下,在 HTML DOM 中,唯一可以接收键盘焦点的元素只有锚点、按钮和表单控件。不过,如果将 HTML 属性 tabIndex 设置为 0,系统会将 DOM 元素置于默认标签页序列中,使其能够接收键盘焦点。

element.tabIndex = 0
element.focus();

设置 tabIndex = -1 可从标签页序列中移除该元素,但仍允许相应元素以编程方式接收键盘焦点。

支持键盘访问

扩展程序应该只通过键盘就能使用,让无法使用鼠标的用户以及不习惯使用鼠标的高级用户都能使用扩展程序。

检查用户是否无需使用鼠标即可在扩展程序的不同部分之间进行导航。 检查是否可通过键盘浏览任何弹出式窗口。使用 Chrome 键盘快捷键确定扩展程序是否可导航。

确保用户能够轻松看出界面的哪些部分具有键盘焦点。焦点轮廓通常在界面周围移动,但如果过度使用 CSS,轮廓可能会被抑制或对比度降低。

搜索按钮上的焦点轮廓

一系列链接中其中一个的焦点轮廓

快捷键

虽然最常用的键盘导航策略是使用 Tab 键通过扩展程序界面旋转焦点,但这并不总是最简单或最高效的选项。

一个简单的 JavaScript 键盘处理程序可能如下所示。请注意,WAI-ARIA 属性 aria-activedescendant 会根据用户输入进行更新,以反映当前处于活跃状态的工具栏按钮。

 function optionKeyEvent(event) {
  var tb = event.target;
  var buttonid;

  ENTER_KEYCODE = 13;
  RIGHT_KEYCODE = 39;
  LEFT_KEYCODE = 37;
  // Partial sample code for processing arrow keys.
  if (event.type == "keydown") {
    // Implement circular keyboard navigation within the toolbar buttons
    if (event.keyCode == ENTER_KEYCODE) {
      ExecuteButtonAction(getCurrentButtonID());
      // getCurrentButtonID defined elsewhere
    } else if (event.keyCode == event.RIGHT_KEYCODE) {
      // Change the active toolbar button to the one to the right (circular).
      var buttonid = getNextButtonID();
      // getNextButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else if (event.keyCode == event.LEFT_KEYCODE) {
      // Change the active toolbar button to the one to the left (circular).
      var buttonid = getPrevButtonID();
      // getPrevButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else {
      return true;
    }
    return false;
  }
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
     onkeydown="return optionKeyEvent(event);"
     onkeypress="return optionKeyEvent(event);">
  <img src="buttoncut" role="button" alt="cut" id="button1">
  <img src="buttoncopy" role="button" alt="copy" id="button1">
  <img src="buttonpaste" role="button" alt="paste" id="button1">
</div>

扩展程序可以为重要的扩展程序界面元素创建显式键盘快捷键。如需实现这些快捷键,请将键盘事件监听器连接到控件。在选项页面中提供可用的快捷键,以便用户了解可用的快捷键。

提供可访问的内容

提供无障碍内容对所有用户而言都非常重要。以下许多指南可能对您来说已经非常熟悉,因为它们体现了适用于所有 Web 内容的良好做法。

文字

字体选择和文字大小会影响扩展程序内容的可读性。有视觉障碍的用户可能需要增加扩展程序的文字大小。如果使用键盘快捷键,请确保这些快捷键不会干扰 Chrome 内置的缩放快捷键。

要衡量扩展程序界面的灵活性,请进行 200% 测试;如果文字大小或页面缩放比例增加了 200%,是否仍然可用?

避免将文本烘焙成图片。用户无法修改图片大小,且屏幕阅读器无法解读图片。而应选择自定样式的网页字体,例如 Google Font API 中的某种字体。网络字体可以缩放为不同的大小,并且可供使用屏幕阅读器的用户访问。

颜色

扩展程序中的背景颜色和文字颜色之间应该有足够高的对比度。使用对比度检查工具来测试背景颜色和前景色是否具有适当的对比度。

评估对比度时,验证扩展程序中依赖图形传达信息的每一个部分是否都清晰可见。对于特定图片,可以使用 Coblis - 色盲模拟器等工具查看图片在各种形式的色觉缺失下的显示效果。

考虑提供不同的颜色主题,或让用户能够自定义配色方案,以形成更高的对比度。

声音

如果扩展程序依靠声音或视频来传递信息,请确保提供字幕或转写文稿。如需详细了解字幕,请参阅描述和字幕媒体计划指南

图片

为图片提供丰富的替代文本。

<img src="img.jpg" alt="The logo for the extension">

请使用替代文本来说明图片的用途,而不是对图片内容的文字说明。分隔符图片或纯装饰性图片应包含空白的 "" 替代文本,或者应将其从 HTML 中完全移除并放入 CSS 中。

如果扩展程序必须使用图片中的文字,请在替代文字中添加图片文字。建议您参阅有关相应替代文本的 WebAIM 文章

了解详情

如需详细了解 Chrome 中的无障碍功能,请查看 A11ycasts 频道并阅读 Chromium 无障碍功能技术文档