自定义下拉菜单必须配齐 role="listbox"、aria-expanded 和 aria-activedescendant，缺一不可；role="listbox" 内须直接包含带唯一 id 的 role="option" 元素，触发按钮需设 aria-haspopup="listbox" 并同步更新 aria-expanded，焦点通过 aria-activedescendant 指向高亮项，动态更新选项须用 appendchild 而非 innerhtml。

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

只写 role="listbox" 会触发读屏器报错“缺少必需子角色”，甚至整个组件被跳过。它不是独立可用的标签，而是一条语义链的起点。

• role="listbox" 容器内必须直接包裹 role="option" 元素（不能是 <div> 或 <code><li>），且每个 option 需有唯一 id
• 触发按钮要加 aria-haspopup="listbox" 和 aria-expanded="false"，JS 切换展开状态时必须同步更新 aria-expanded 值
• 焦点不进选项本身——得用 aria-activedescendant 指向当前高亮项的 id，并监听 ArrowUp/ArrowDown 手动切换该值
• 若用 innerHTML = 替换整个下拉内容，aria-activedescendant 会断开指向；必须用 appendChild 或 insertAdjacentElement 动态插入新 option

模态框缺一不可：role="dialog" + aria-modal="true" + aria-labelledby

三者少一个，读屏器就可能把模态框当成普通浮层忽略。尤其 aria-modal="true" 是隔离背景朗读的关键，旧版 IE 不支持，但不能因此省略。


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
• role="dialog" 告诉辅助技术“这是对话框”，但不阻止背景内容被朗读
• aria-modal="true" 才真正将背景从可访问树中剔除；IE 或 Safari 15.4 以下需 fallback 到 inert 属性或手动焦点锁定
• aria-labelledby 必须指向一个真实存在、可见、有语义的标题元素（如 <h2 id="modal-title">确认删除</h2>），不能是空 <span></span> 或 JS 生成后未插入 DOM 的节点
• 打开模态框时，必须调用 focus() 主动将焦点移到首个可聚焦元素（通常是取消按钮），否则键盘用户卡在背景无法操作

标签页（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 后，焦点应落在第一个可聚焦子元素上

aria-live="polite" 不是“加了就播报”，而是要配合 DOM 插入方式

动态内容区（如表单提交提示、无限滚动列表）加了 aria-live="polite" 却没反应，大概率是 DOM 更新方式错了。

• 用 innerHTML = 替换整个区域，会导致无障碍树节点重建，aria-live 失效；正确做法是清空容器（el.textContent = ""）再 append 新节点
• aria-live="polite" 适合新闻流类低优先级更新，但连续快速插入多条时，NVDA 可能合并播报；aria-live="assertive" 会强行中断当前朗读，仅用于错误弹窗等高优先级场景
• 不要给整个页面容器加 aria-live——它只应绑定到明确的、小范围的动态内容区，否则读屏器会反复重读无关内容
• 如果内容由 React/Vue 管理，注意组件销毁前设 aria-hidden="true" 可能导致短暂卡顿，建议在 DOM 移除后再清理 ARIA 状态
复杂交互组件的 ARIA 实现，核心不在属性数量，而在角色、属性、状态三者是否构成闭环：DOM 结构对、JS 同步准、焦点路径通。漏掉任意一环，对屏幕阅读器用户来说，就是功能缺失。