扩展程序可让用户打造理想的浏览体验，根据个人能力和偏好进行定制。扩展程序应包含无障碍功能组件，让有视力障碍、听力损失、行动不便和其他残疾的人能够访问扩展程序，从而鼓励用户群体具有包容性。
无障碍功能不仅能让有特殊需求的用户受益，还能让所有人受益。视力障碍用户、行动不便的用户和高级用户都能从键盘快捷键中受益。字幕和转录对于听力障碍用户来说至关重要，但也有助于语言学习者。
用户可能会以各种方式与扩展程序互动。有些用户使用标准显示器、 键盘和鼠标，有些用户则可能依赖于屏幕放大镜，甚至屏幕阅读器。 虽然无法预测用户将使用哪些工具来访问扩展程序，但开发者可以采取一些措施，尽可能让扩展程序具有无障碍功能。
集成无障碍功能界面控件
如果用户无法访问界面控件，就无法使用扩展程序。创建无障碍功能界面的最简单方法是使用标准 HTML 控件。
标准控件
请尽可能使用标准 HTML 界面控件。标准 HTML 控件可通过键盘访问，可轻松缩放，并且通常能被屏幕阅读器理解。
自定义控件中的 WAI-ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications (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's 在 WWW2010 上的演示文稿。
自定义控件中的焦点
对于不使用鼠标浏览网页的用户来说，键盘焦点至关重要。请确保操作和导航控件（例如按钮、列表框和菜单栏）可以获得键盘焦点。
默认情况下，HTML DOM 中只有锚点、按钮和表单控件可以获得键盘焦点。不过，将 HTML 属性 tabIndex 设置为
0 会将 DOM 元素置于默认的 Tab 键顺序中，使其能够获得键盘焦点。
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>
扩展程序可以为重要的扩展程序界面元素创建明确的键盘快捷键。如需实现这些快捷键，请将键盘事件监听器连接到控件。在选项页面中提供可用的 快捷键，让用户了解这些快捷键。
提供无障碍功能内容
提供无障碍功能内容对所有用户都很重要。以下许多准则可能听起来很熟悉，因为它们反映了所有 Web 内容的良好做法。
文本
字体选择和文本大小会影响扩展程序内容的易读性。有视力问题的用户可能需要增加扩展程序的文本大小。如果使用键盘快捷键，请确保它们不会干扰 Chrome 内置的缩放快捷键。
作为扩展程序界面灵活性的指标，请应用 200% 测试；如果文本大小或 页面缩放比例增加 200%，它是否仍然可用？
避免将文本嵌入到图片中。用户无法修改大小，屏幕阅读器也无法解读图片。相反，请选择样式化的 Web 字体，例如 Google Font API 中的字体之一。Web 字体可以缩放到不同的大小，并且可以使用屏幕阅读器访问。
颜色
扩展程序中的背景颜色和文本颜色之间应有足够的对比度。使用 对比度检查工具测试背景颜色和前台颜色是否提供 适当的对比度。
在评估对比度时，请验证扩展程序的每个依赖于图形来传达信息的部分是否清晰可见。对于特定图片，可以使用 Coblis - Color Blindness Simulator 等工具查看图片在各种色觉缺陷形式下的外观。
考虑提供不同的颜色主题，或让用户能够自定义配色方案，以创建更好的对比度。
声音
如果扩展程序依赖于声音或视频来传达信息，请确保提供字幕或转录。如需详细了解字幕，请参阅 Described and Captioned Media Program 指南。
Google 图片
为图片提供信息丰富的替代文本。
<img src="img.jpg" alt="The logo for the extension">
使用替代文本说明图片的用途，而不是对图片内容进行字面描述。间隔图片或纯装饰性图片应具有空白 "" 替代文本，或从 HTML 中完全移除并放置在 CSS 中。
如果扩展程序必须在图片中使用文本，请在替代文本中包含图片文本。WebAIM 上关于适当替代文本的文章是一个很好的参考资源 。
了解详情
如需详细了解 Chrome 中的无障碍功能，请查看 A11ycasts 频道并阅读 Chromium 无障碍功能技术文档。