aria-orientation="vertical" 必须配合 role 使用，仅在 role="slider"、role="separator"、role="scrollbar" 或垂直 tablist 中生效；单独使用无效，且需与键盘交互和 CSS 布局严格一致。
aria-orientation="vertical" 必须配合 role 使用
单独写 aria-orientation="vertical" 对任何元素都无效。它只在特定 role 下被辅助技术识别，比如 role="slider"、role="separator"、role="scrollbar" 或垂直排列的 role="tablist"。给 <div> 或 <code><hr> 直接加这个属性，屏幕阅读器完全忽略。
常见错误：
-
<hr aria-orientation="vertical">→ 仍被读作水平分隔线 -
<div aria-orientation="vertical">→ 没有 role，语义为零
自定义滑块必须显式声明 role 和 aria-orientation
原生 <input type="range"> 不需要也不支持 aria-orientation：浏览器自动按 CSS 布局推断方向（宽 > 高 → horizontal；高 > 宽 → vertical），且已内置角色。但如果你用 <div> 实现滑块，就必须手动补全：
- 加
role="slider" - 加
aria-orientation="vertical" - 提供
aria-valuenow、aria-valuemin、aria-valuemax - 设
tabindex="0"并监听ArrowUp/ArrowDown键 —— 否则键盘用户无法操作，ARIA 方向形同虚设
示例：
立即学习“前端免费学习笔记（深入）”；
<div role="slider" aria-orientation="vertical" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
垂直分隔线要重置语义，不能靠 CSS 旋转
视觉上把 <hr> 旋转 90° 或设窄宽高大，不会改变其默认的水平语义。辅助技术仍读“水平分隔线”。正确做法是放弃 <hr>，改用带明确角色的容器：
- 用
<div role="separator">替代<hr> - 显式加
aria-orientation="vertical" - 加上
aria-label或aria-labelledby说明用途（如“主内容与侧边栏分界”） - 若含装饰性伪元素（如
::before），需对它们设aria-hidden="true"
tablist 垂直排列时必须覆盖默认 orientation
role="tablist" 默认隐含 aria-orientation="horizontal"。如果你把 tab 垂直堆叠（比如左侧导航栏），屏幕阅读器仍会提示“按 ←→ 切换”，造成操作错乱。必须显式覆盖：
- 加
aria-orientation="vertical"到tablist容器上 - 确保键盘行为同步：Tab 进入后，
ArrowUp/ArrowDown切换 tab，而非ArrowLeft/ArrowRight - 不要只靠 CSS
flex-direction: column或writing-mode: vertical-lr—— 视觉方向 ≠ ARIA 方向，冲突时用户直觉和辅助技术会打架
最易被忽略的一点：ARIA 方向必须和键盘交互逻辑、CSS 布局三者严格一致。少一个，视障用户就会卡住或误操作；多一个（比如给原生 input[type="range"] 硬加 aria-orientation），反而干扰浏览器自动判断。
