The HTML aria-orientation attribute
The aria-orientation attribute states whether a widget is laid out horizontal or vertical, which tells assistive technology and your keyboard handlers which arrow keys to use. Applies to sliders, tablists, menus, scrollbars and similar.
Overview
The aria-orientation attribute indicates whether a widget is oriented horizontally or vertically.
It is a widget state — a condition that can change as the user interacts. Because ARIA does nothing on its own, you must update this value in JavaScript every time the underlying state changes; a stale state is worse than none. And wherever a native element already expresses the same thing (a checkbox's checked state, the disabled attribute, a <details>'s open state), use that instead.
Like all ARIA, aria-orientation changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="tablist" aria-orientation="vertical"> … </div>Values
| Value |
|---|
| horizontal | vertical | undefined |
Example
<div role="slider" aria-orientation="vertical" aria-valuenow="50" tabindex="0"></div>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Update the value in JavaScript whenever the state changes — keep it in sync with reality.
- Use the matching native state where one exists (a checkbox's
checked, thedisabledattribute, a <details>'s open state) instead of the ARIA version. - Set it only on an element whose role actually supports this state.