aria-orientation仅对role="slider"、"separator"、"scrollbar"、"tablist"等特定角色生效，必须与对应role及键盘行为一致，否则被at忽略；仅css旋转或添加属性而不设role无效。

aria-orientation只对特定role生效，不是所有元素加了就有用

给一个

或直接写aria-orientation="vertical"，屏幕阅读器完全不读——它只在role="slider"、role="separator"、role="scrollbar"、role="tablist"等少数角色上被识别。浏览器和AT（辅助技术）会忽略其他场景下的该属性。

常见错误：用div模拟滑块但只加aria-orientation，没设role="slider"；或者给hr加aria-orientation="vertical"却没配role="separator"。这两者都等于没写。

自定义滑块必须同时声明role和aria-orientation

input type="range"不用手动加——浏览器自动推断方向并内置角色。但凡你用div+拖拽逻辑重写滑块，就必须显式补全三要素：

• role="slider"
• aria-orientation="horizontal" 或 aria-orientation="vertical"
• aria-valuenow、aria-valuemin、aria-valuemax

键盘支持必须同步：水平滑块响应→/←，垂直滑块响应↑/↓。如果只声明了aria-orientation="vertical"但监听的还是左右键，AT会认为方向设定被忽略。

示例：

<div role="slider" aria-orientation="vertical" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>

tablist垂直排列时必须显式设aria-orientation="vertical"

默认role="tablist"隐含aria-orientation="horizontal"。如果你把Tab按钮竖着排在左侧导航栏里，屏幕阅读器仍按“左→右”播报方向键操作，用户按↓却跳到下一个非Tab元素——这是典型语义错位。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

正确做法是：

<div role="tablist" aria-orientation="vertical"> <button role="tab" aria-selected="true">首页</button> <button role="tab">设置</button> </div>

注意：仅靠CSS旋转或flex-direction: column不会触发AT方向变更，必须靠这个属性显式声明。

separator方向声明要配合role，不能只靠CSS视觉旋转

想表达“这是垂直分割线（比如侧边栏与主内容之间）”，不能只用hr加transform: rotate(90deg)或设height > width。视觉旋转不改变语义，AT仍当它是水平分隔线。

必须用：

<div role="separator" aria-orientation="vertical"></div>

且需确保该元素可聚焦（如加tabindex="0"）或有足够尺寸（AT可能忽略不可见/零尺寸的separator）。另外，aria-orientation对hr本身无效——<hr aria-orientation="vertical">纯属浪费字符。

最易被忽略的一点：aria-orientation不是“让组件变垂直”的开关，它只是告诉AT“这个已具备交互语义的控件，其操作轴向是垂直的”。方向错位问题，永远始于role缺失或键盘行为未对齐。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！