aria-multiselectable 应用于 role="listbox"、role="tree" 或 role="grid" 等支持多选的容器元素，需配合 aria-selected 的 option 子元素、tabindex="0"、正确 ID 引用及键盘交互逻辑，否则屏幕阅读器将忽略该属性。

aria-multiselectable 该用在哪个元素上

这个属性只对支持多选的容器型控件有意义，比如 listbox、tree、grid。它不能加在普通 div 或 ul 上就生效——必须配合正确的 role 和子元素结构。常见错误是直接给 select 元素加，但原生 select 不支持该属性，浏览器会忽略。

怎么写才被屏幕阅读器识别

关键不是加了属性就行，而是要满足 ARIA Authoring Practices 的结构约定：

• role="listbox" 容器必须存在，且 aria-multiselectable="true" 写在它上面
• 每个可选项用 role="option"，并带 aria-selected="true" 或 "false"
• 必须有键盘交互支持：比如 Ctrl+Space 切换多选，Shift+Arrow 连续选中
• 不能依赖 JS 模拟选中状态；得同步更新 aria-selected 值和 DOM class

常见错误导致 aria-multiselectable 失效

即使语法正确，以下情况会让辅助技术完全无视该属性：

• 父容器没设 tabindex="0" —— 焦点进不去，多选逻辑无法触发
• 子 option 缺少 id，或 aria-labelledby 指向不存在的 ID
• 用了 aria-multiselectable="1" 或 "on" —— 必须是严格字符串 "true" 或 "false"
• 在 role="combobox" 或 role="menu" 上误用 —— 这两个角色不支持多选语义

要不要用 JavaScript 同步管理状态

要。ARIA 属性只是“声明”，不代表行为。比如用户按住 Ctrl 点击，你得监听 click 事件，手动切换 aria-selected，再更新视觉样式和数据模型。否则屏幕阅读器读到的是旧状态，键盘用户也会卡住。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

示例片段：

<div role="listbox" aria-multiselectable="true" tabindex="0">
  <div role="option" id="opt1" aria-selected="false">Apple</div>
  <div role="option" id="opt2" aria-selected="true">Banana</div>
</div>

注意：真实项目里还得处理焦点管理、键盘事件（Space、ArrowUp/Down、Ctrl+A 等），这些不是加个属性就能自动来的。

最常被跳过的点是键盘操作支持 —— 很多人只做了鼠标点击，结果视障用户根本没法多选。