如何使用Aria属性提升复杂HTML组件的可访问性-html教程-PHP中文网

aria 属性需精准匹配组件语义与交互逻辑，错误使用比不用更糟；自定义下拉、模态框、标签页等必须构建完整语义链并同步状态，aria-live 等属性依赖 dom 更新方式与上下文，aria 不能替代原生语义与键盘操作支持。

如何使用aria属性提升复杂html组件的可访问性

ARIA 属性不是“加了就可访问”，它只在原生 HTML 语义无法表达组件行为或状态时才有效；用错比不用更糟，尤其在自定义下拉、标签页、模态框这类复杂交互组件中。

自定义下拉菜单必须配齐 role + aria-expanded + aria-activedescendant

仅用 role="listbox" 不够，浏览器和读屏器会报“缺少必需子角色”或直接忽略。它需要完整语义链：

role="listbox" 必须包裹 role="option"（不能是 div 或 li）
触发按钮要加 aria-haspopup="listbox" 和 aria-expanded="false"，且 JS 必须同步更新该值
焦点管理不能靠 tabindex 暴力推进——得用 aria-activedescendant 指向当前高亮项的 ID，并监听 ArrowUp/ArrowDown 键手动切换
若用 innerHTML = 替换整个下拉内容，aria-activedescendant 会失效，必须用 appendChild 或 insertAdjacentElement

模态框需同时满足 role="dialog" + aria-modal="true" + aria-labelledby

三者缺一不可，少一个就可能被读屏器当作普通浮层跳过：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

role="dialog" 告诉辅助技术“这是对话框”，但不阻止背景朗读
aria-modal="true" 才真正隔离背景内容（旧版 IE 不支持，需 fallback 到 inert 或焦点锁定）
aria-labelledby 必须指向一个**真实存在的、可见的、有语义的标题元素**（如 <h2 id="modal-title">确认删除</h2>），不能是空 span 或 JS 动态生成后未插入 DOM 的节点
打开模态框时，必须用 focus() 主动将焦点移到首个可聚焦元素（通常是取消按钮或标题），否则键盘用户卡在背景
禁止对加 aria-hidden="true"——这会让整个页面从可访问树中消失，正确做法是给背景容器加 inert 或用 tabindex="-1" + 焦点捕获

标签页（tablist）必须用 aria-selected + aria-controls + role 链联动

光写 role="tablist" 和 role="tab" 只是画了个架子，状态不同步会导致读屏器读“未选中”但视觉已高亮：

每个 role="tab" 必须带 aria-selected="false"（初始状态），JS 切换时同步改值并触发 click 或 keydown 事件
aria-controls 要精准指向对应 role="tabpanel" 的 ID，不能指向父容器或错误 ID
role="tabpanel" 必须有 aria-labelledby 指回其所属 tab 的 ID，形成双向关联
Tab 键导航应只在 tabs 之间循环（roving tabindex），不能误入 panel 内容；用 Shift+Tab 进入 panel 后，焦点应落在第一个可聚焦子元素上