扩展程序可让用户根据个人的能力和偏好定制理想的浏览体验。扩展程序应包含无障碍组件，以便视障、听障、手部灵活度受限和其他残障人士能够访问扩展程序，从而鼓励建立包容性的用户群。
所有用户（而不仅仅是有特殊需求的用户）都可以从无障碍功能中受益。键盘快捷键对于有视力障碍的用户、精细动作失能的用户以及高级用户都会受益。字幕和转写文稿对失聪用户必不可少，但对语言学习者也有帮助。
用户可能会通过多种方式与扩展程序互动。有些用户使用标准显示器、键盘和鼠标，有些用户则依赖于放大镜和屏幕阅读器。虽然我们无法预测用户会使用哪些工具来访问扩展程序，但任何开发者都可以采取一些措施，尽可能提高扩展程序的可访问性。
集成无障碍界面控件
如果用户无法访问界面控件，则无法使用扩展程序。若要创建可访问的界面，最简单的方法是使用标准 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 会将元素从 Tab 顺序中移除，但仍允许该元素以编程方式接收键盘焦点。
支持键盘访问
扩展程序应该仅通过键盘即可使用，以便无法使用鼠标的用户和不使用鼠标的高级用户进行访问。
导航
检查用户能否在不使用鼠标的情况下在扩展程序的不同部分之间导航。 检查是否可以使用键盘浏览任何弹出式窗口。使用 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
扩展程序可以为重要的扩展程序界面元素创建明确的键盘快捷键。如需实现这些快捷键，请将键盘事件监听器连接到控件。在选项页面中提供可用快捷方式，让用户了解这些快捷方式。
提供无障碍内容
提供无障碍内容对所有用户而言都非常重要。以下许多准则可能听起来很熟悉，因为它们反映了适用于所有网络内容的良好做法。
文本
字体选择和文本大小会影响扩展程序内容的可读性。视力有问题的用户可能需要增大扩展程序文本大小。如果使用键盘快捷键，请确保这些快捷键不会干扰 Chrome 内置的缩放快捷键。
作为扩展程序界面灵活性的指标，请进行 200% 测试；如果文字大小或页面缩放比例增加 200%，它是否仍然可用？
避免将文字嵌入图片。用户无法修改大小，屏幕阅读器无法解读图片。请改用样式 Web 字体，例如 Google Fonts API 中提供的字体之一。Web 字体可以放大到不同的尺寸，并且使用屏幕阅读器的用户可以访问。
颜色
扩展程序的背景颜色与文本颜色之间的对比度应足够明显。您可以使用对比度检查工具测试背景颜色和前景色是否提供适当的对比度。
评估对比度时，请验证扩展程序中依靠图形传达信息的每个部分是否清晰可见。对于特定图片，您可以使用 Coblis - 色盲模拟器等工具，查看图片在各种形式的色觉缺陷下的显示效果。
考虑提供不同的颜色主题，或允许用户自定义配色方案，以形成更好的对比度。
声音
如果扩展程序依靠声音或视频来传达信息，请确保有字幕或转录内容。如需详细了解字幕，请参阅描述和字幕媒体计划指南。
图片
为图片提供信息丰富的替代文本。
<img src="img.jpg" alt="The logo for the extension">
使用替代文本说明图片的用途，而不是对图片内容进行直白的描述。分隔符图片或纯装饰图片应使用空白 "" alt 文本，或完全从 HTML 中移除并放置在 CSS 中。
如果扩展程序必须使用图片中的文字，请在替代文本中添加图片文字。WebAIM 上有关适当替代文本的文章是一篇不错的参考资源。
了解详情
如需详细了解 Chrome 中的无障碍功能，请查看 A11ycasts 频道并阅读 Chromium 无障碍功能技术文档。