aria-multiselectable="true" 仅声明多选能力，不自动实现交互，需手动监听键盘（shift+arrow、ctrl+space）和鼠标事件，配合 aria-selected 控制状态，并确保语义结构正确（role="listbox" 包裹 role="option"）。

aria-multiselectable 属性本身不触发多选行为

加了 aria-multiselectable="true" 不会让列表自动支持 Ctrl+Click 或 Shift+Click 多选——它只是告诉屏幕阅读器“这个容器里的项目允许被多选”，实际交互逻辑必须自己写。常见错误是只设属性、不监听点击或键盘事件，导致视障用户听到“可多选”，但按空格/回车却只选中一个。

适用场景：自定义下拉菜单、树形控件、带复选框样式的列表（但不用原生 <input type="checkbox">）。

• 必须配合 aria-selected="true/false" 手动控制每个子项的选中状态
• 每次更新选中态后，要主动触发 aria-selected 的 DOM 变更，否则屏幕阅读器不会播报变化
• 不要在 <ul></ul> 上直接设 aria-multiselectable，应设在容器元素（如 <div role="listbox">）上 <h3>键盘操作必须手动实现 Shift+Arrow 和 Ctrl+Space</h3> <p>无障碍标准要求：用 Shift+↓ 从当前项连续选中到目标项；Ctrl+Space 切换当前聚焦项的选中状态。浏览器不会自动处理这些组合键，全靠 JS 监听 <code>keydown 并维护选中状态数组。

  容易踩的坑是只处理鼠标点击，忽略键盘路径，导致键盘用户无法完成多选。

  

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

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

  下载
  • 记录上一次点击/聚焦的项索引（lastFocusedIndex），用于计算 Shift 区间
  • Ctrl+Space 时，先检查是否已聚焦某一项，再 toggle 其 aria-selected
  • 避免在 keyup 中处理 Ctrl/Shift 键——它们在 keyup 时可能已被系统吞掉，应在 keydown 捕获
  • 用 event.preventDefault() 阻止默认滚动行为，尤其在垂直列表中按方向键时

  role="option" 的父容器必须是 role="listbox"

  aria-multiselectable 只在 role="listbox" 上合法。如果误用在 role="tree" 或 role="grid" 上，部分屏幕阅读器（如 NVDA + Firefox）会忽略该属性，或报 ARIA 属性冲突警告。

  示例结构必须严格满足：

  <div role="listbox" aria-multiselectable="true">
    <div role="option" aria-selected="false" tabindex="0">选项一</div>
    <div role="option" aria-selected="true" tabindex="0">选项二</div>
  </div>

  • 每个 role="option" 必须有 tabindex="0"，否则无法键盘聚焦
  • 不能嵌套 <button></button> 或 <a></a> 在 option 内——会破坏 listbox 语义流
  • 若使用 <li>，必须显式加 role="option"，因为 <li> 默认无语义

  与原生 <select multiple></select> 的关键区别

  原生多选 <select></select> 自带键盘多选和屏幕阅读器支持，但样式受限、无法自定义渲染。而 aria-multiselectable 方案完全可控，代价是所有交互和状态同步都要手写。

  性能影响常被忽视：当选项数超 200 条时，频繁设置 aria-selected 属性会触发大量 DOM 重绘，建议用 CSS 类（如 .is-selected）代替内联 ARIA 属性变更，并仅在必要时同步 aria-selected 值。

  • 原生 <select multiple></select> 支持 Ctrl+A 全选，自定义方案需额外监听并实现
  • 移动端 Safari 对 aria-multiselectable 支持不稳定，建议降级为单选 + 复选框图标示意
  • 测试时务必用 VoiceOver + Safari 和 NVDA + Chrome 双环境验证，两者对 aria-selected 变更的响应时机不同
  实际中最容易漏掉的是键盘焦点管理——比如 Shift+↓ 选中三行后，焦点停在哪？必须明确规则并保持一致，否则屏幕阅读器会读错上下文。