aria-orientation仅对role="slider"、"separator"、"scrollbar"、"tablist"、"treeitem"等特定角色生效，需与css布局及键盘行为（←→/↑↓）严格一致；单独加在div、hr等元素上无效。
aria-orientation 不是“加了就生效”的通用方向标记，它只对特定 role 生效，且必须和视觉布局、键盘行为严格一致；乱加或单独加在普通元素上，辅助技术直接忽略。
哪些 role 支持 aria-orientation
只有明确语义的交互组件才认这个属性，常见支持 role 包括：slider、separator、scrollbar、tablist（垂直排列时）、treeitem（部分实现）。给 div、hr、span 直接加 aria-orientation="vertical" 没有任何效果。
典型误用：<hr style="height: 200px; width: 2px;"> —— 视觉是竖的，但辅助技术仍按默认 horizontal 解读，因为 hr 没设 role="separator"，aria-orientation 根本不触发。
滑块（slider）怎么标才有效
原生 <input type="range"> 不用手动加 aria-orientation：浏览器自动根据 CSS 布局推断方向，并内置角色和键盘逻辑。但自定义滑块（比如用 div + 拖拽）必须显式声明：
-
role="slider"是前提，没它，aria-orientation被无视 -
aria-orientation="horizontal"或"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）和 tablist 的方向陷阱
role="separator" 必须配 aria-orientation 才能传达真实语义。仅靠 CSS 旋转或尺寸变化无效：
- 错误写法：
<div style="transform: rotate(90deg)"></div>—— 视觉转了，但辅助技术仍当 horizontal - 正确写法：
<div role="separator" aria-orientation="vertical" aria-label="主内容与侧边栏分界"></div> -
tablist默认aria-orientation="horizontal"；如果 Tab 垂直排列（如左侧导航），必须显式写aria-orientation="vertical"，否则箭头键逻辑和播报方向全错
最容易被忽略的点：CSS 方向和 ARIA 方向必须一致。比如一个 role="slider" 元素，CSS 设置了 flex-direction: column，但 aria-orientation="horizontal"，辅助技术按 ARIA 走，用户操作直觉却按视觉走——结果就是“听着往左滑，实际往上拖”，交互彻底错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
