role="separator" 是aria属性，用于向屏幕阅读器声明“此处存在逻辑分隔”，而非视觉装饰；它本身不渲染样式，必须配合css视觉表现、aria-hidden="true"防重复朗读、嵌套于语义容器（如role="menu"）中才完整有效，不可替代用于文档主题切换场景。

role="separator" 是什么，什么时候该用

它不是视觉分割线，而是给屏幕阅读器标记“这里有个逻辑分隔”的语义提示。浏览器不会自动渲染任何样式，role="separator" 本身不等于 <hr> 或 CSS 的 border-bottom。

常见误用场景：只加了 role="separator" 却没配视觉样式，导致 sighted 用户完全看不到分隔，而 screen reader 用户又听不到上下文——结果两边都丢了。

• 适合用在菜单项之间、导航栏链接之间、侧边栏区块之间这类有明确语义断点的位置
• 不适合替代 <hr> 做文档段落间的视觉分隔（此时应直接用 <hr>，它自带 role="separator"）
• 不能用在按钮、链接等交互元素内部——separator 必须是不可聚焦、不可操作的静态节点

怎么让 role="separator" 真正可用

必须手动补全三件事：视觉表现、键盘焦点隔离、语义完整性。缺一不可。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 加 CSS 样式，比如 height: 1px; background: #ccc; margin: 0.5em 0;
• 加 aria-hidden="true" 防止被重复朗读（尤其当它只是装饰性线条时）
• 确保父容器有合适的 role（如 role="menu"），否则部分读屏器可能忽略该 separator
• 不要设 tabindex="0"，也不要用 button 或 a 标签包裹——它不该获得焦点

正确写法示例：

<div role="separator" aria-hidden="true" style="height:1px;background:#ccc;margin:0.5em 0;"></div>

和

---

、

+CSS 的关键区别

<hr> 默认有 role="separator" 和内置语义，且对所有主流读屏器兼容稳定；纯 <div> 加 <code>role="separator" 则依赖开发者手动保障可访问链路完整。

• <hr> 在旧版 IE 中仍能被 JAWS 正确识别，而自定义 div + role 在 IE11 + NVDA 组合下偶发静默
• <hr> 可通过 appearance: none 重置默认样式，比从零写分割线更省心
• 若需响应式高度或渐变色分割线，优先用 <hr> + CSS，而不是弃用语义去用 div

容易被忽略的兼容性坑

某些读屏器（如 VoiceOver on iOS 16）对孤立的 role="separator" 节点会跳过，除非它前后都有带 role 的兄弟节点，比如 menuitem 或 listitem。

• 测试时别只听单个元素，要读整个容器流（例如打开菜单后连续 swipe）
• 避免在 role="region" 或无语义的 div 里单独放 separator，尽量嵌套在 role="menu" / role="toolbar" 内
• React/Vue 中动态渲染时，注意不要因条件判断导致 separator 成为第一个或最后一个子节点——这会让部分 AT 认为“无上下文”，直接跳过

真正难的不是写对 role="separator"，而是让它在不同 AT + 浏览器组合下始终被感知为“那里确实有个停顿”。