正确使用ARIA属性和键盘导航可提升网页无障碍访问。通过aria-label、aria-labelledby等提供语义，用aria-expanded、role等增强动态内容可读性；确保按钮、自定义控件支持tabindex与键盘事件；模态框需_trap focus_；动态更新内容时使用aria-live通知屏幕阅读器，使视障及键盘用户顺畅操作。
让网页对所有人可用，是现代前端开发的重要目标。JavaScript 在增强交互的同时，也可能破坏无障碍访问（Accessibility）。正确使用 ARIA 属性和实现键盘导航支持，能有效弥补这一问题，确保视障用户、键盘操作用户等也能顺畅使用动态内容。
ARIA 属性：补充语义，提升可访问性
ARIA（Accessible Rich Internet Applications）是一组 HTML 属性，用于描述用户界面元素的角色、状态和属性，帮助辅助技术（如屏幕阅读器）理解动态内容。
常用 ARIA 属性示例：
-
aria-label：为元素提供可读的标签，尤其适用于没有可见文本的图标按钮。例如：
<button aria-label="关闭">×</button> -
aria-labelledby：指向另一个元素的 ID，用其文本作为当前元素的标签，适合复杂控件。
如模态框标题与内容关联。 - aria-hidden="true"：隐藏视觉上存在但对辅助技术无意义的内容，比如装饰性图标。
- aria-expanded：表示可折叠元素（如手风琴、下拉菜单）的展开状态，值为 true 或 false。
- role：定义元素的用途，如 role="alert" 表示实时重要消息，role="navigation" 标记导航区域。
注意：优先使用原生 HTML 元素（如 button、nav），只有在无法通过语义化标签实现时才使用 ARIA。
立即学习“Java免费学习笔记（深入）”；
键盘导航：确保所有功能可通过键盘操作
许多用户依赖键盘操作页面，包括 Tab 键导航、Enter/Space 执行操作、方向键控制菜单等。JavaScript 动态生成的内容必须支持这些行为。
关键实践：
- 确保所有可交互元素（按钮、链接、表单控件）具有自然的 tabindex 顺序，或通过 tabindex="0" 将自定义控件加入焦点流。
- 避免使用 tabindex 大于 0 的值，以免打乱默认导航逻辑。
- 监听键盘事件，如 keydown，支持 Enter 和 Space 触发点击行为：
element.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleClick();
}
}); - 模态框打开时，将焦点限制在内部（trap focus），关闭后返回原焦点位置。
- 提供“跳转到主内容”的链接（如首屏的“跳过导航”），方便键盘用户快速访问主要内容。
动态内容更新：及时通知辅助技术
JavaScript 修改 DOM 时，屏幕阅读器可能无法感知变化。使用 ARIA 实时属性可主动通知用户。
-
aria-live：设置为 "polite" 或 "assertive"，使区域内容变化被朗读出来。
例如提示信息：
<div aria-live="polite">提交成功！</div> - aria-atomic：决定是否朗读整个区域内容（true）还是仅变化部分（false）。
- aria-relevant：指定哪些更改触发播报，如添加、删除或文本变化。
这类机制适用于通知条、加载状态、表单验证提示等场景。
基本上就这些。合理使用 ARIA 和键盘支持，能让 JavaScript 应用真正对所有人开放。
