aria-orientation仅对role="slider"、"separator"、"scrollbar"等特定角色生效，需与键盘行为（←→/↑↓）及CSS布局严格对齐，视觉旋转不改变交互方向，自定义滑块必须显式声明role和aria-orientation。
aria-orientation="horizontal" 和 "vertical" 的适用范围
aria-orientation 是 ARIA 1.1 引入的属性，**仅对特定角色（role）有意义**，不是所有元素加了就生效。浏览器和辅助技术只在 role="slider"、role="separator"、role="scrollbar"、role="treeitem"（部分实现）等少数角色上读取该属性。给 <div> 或 <hr> 直接加 aria-orientation 不会改变其语义或行为。
滑块（slider）必须同时设置 role 和 aria-orientation
仅用 input type="range" 时，无需手动加 aria-orientation —— 浏览器自动按 CSS 布局推断方向（水平为默认），且已内置对应角色。但如果是自定义滑块（比如用 div + 拖拽逻辑），就必须显式声明：
- 添加
role="slider" - 添加
aria-orientation="horizontal"或aria-orientation="vertical" - 提供
aria-valuenow、aria-valuemin、aria-valuemax - 确保键盘支持：水平滑块响应
→/←，垂直滑块响应↑/↓（否则辅助技术可能忽略方向设定）
示例：
<div role="slider" aria-orientation="vertical" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
分隔线（separator）的 orientation 必须配合 role 使用
<hr> 默认是水平分隔线，但它是“呈现性”元素，不带语义。若需明确传达“这是垂直分割区域”的辅助技术含义（例如侧边栏与主内容之间），不能只靠 CSS transform: rotate(90deg) 或 height > width —— 必须用：
立即学习“前端免费学习笔记（深入）”；
-
role="separator"（移除默认hr的语义，重置为可访问分隔符） -
aria-orientation="vertical"（否则屏幕阅读器仍按默认 horizontal 处理） - 添加
aria-hidden="true"到视觉装饰性子元素（如伪元素::before），避免冗余播报
错误写法：
<hr style="width: 2px; height: 200px;">→ 辅助技术仍当 horizontal separator 读出。
正确写法：
<div role="separator" aria-orientation="vertical" aria-label="主内容与侧边栏分界"></div>
常见失效原因：CSS 方向 vs ARIA 方向不一致
当视觉方向（CSS flex-direction、writing-mode、旋转）和 aria-orientation 冲突时，辅助技术以 ARIA 属性为准，但用户操作直觉会错乱。例如：
- 一个
role="slider"元素 CSS 设置了transform: rotate(90deg)变成视觉垂直，但aria-orientation="horizontal"→ 屏幕阅读器说“水平滑块”，键盘却要按 ←→ 移动，而视觉上是上下拖——用户完全困惑 -
role="separator"设为aria-orientation="vertical"，但容器用了flex-direction: column导致它实际横向排布 → 语义与布局矛盾，影响焦点流和缩放体验
关键原则：aria-orientation 描述的是交互逻辑方向（键盘/手势移动轴），不是视觉朝向。必须和键盘行为、CSS 布局、以及用户预期严格对齐。
