The HTML aria-orientation attribute
The aria-orientation attribute states whether a widget is laid out horizontally or vertically (horizontal or vertical), which tells assistive technology which arrow keys the user should expect. You still write the key handling yourself. 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 property: a declaration about the widget that is normally set once, rather than a state that changes as the user interacts. Because ARIA does nothing on its own, keep it accurate and update it in JavaScript if the widget's behavior does change; a stale value is worse than none. And wherever a native element already expresses the same thing (a <textarea> for multi-line input, the required or readonly attribute, a native multiple select), 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.
- Set it to match the behavior you actually implement, and change it only if that behavior changes.
- Use the matching native attribute where one exists (
required,readonly,multiple) instead of the ARIA version. - Set it only on an element whose role actually supports this property.