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