Using the aria-orientation attribute

The aria-orientation attribute is used to indicate whether an element is oriented horizontally or vertically.

Value

Vocabulary

vertical The element is oriented vertically.
horizontal (default) The element is oriented horizontally.

Possible effects on user agents and assistive technology

Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Examples

Example 1:

The snippet below shows a simple slider that is oriented vertically.

<a href="#" id="handle_zoomSlider"
        role="slider"
        aria-orientation="vertical"
        aria-valuemin="0"
        aria-valuemax="17"
        aria-valuenow="14" >
    <span>11</span>
</a>

Working Examples:

Notes

Used With ARIA Roles

  • scrollbar
  • listbox
  • combobox
  • menu
  • tree
  • separator
  • slider
  • tablist
  • toolbar

Compatibility

TBD: Add support information for common UA and AT product combinations

Additional resources