I ran into the little-known
aria-orientation attribute today and wanted to make quick post about it since it really isn’t popularize and can add some nice touches to the accessibility of a site.
What is ARIA Orientation?
aria-orientation is a way to communicate the orientation of a certain subset of UI components when you’re custom-building things like: scrollbars, select menus, separators, sliders (range sliders), tabs, and toolbars (read about more components you can use ARIA orientation on). All components that can go up-and-down or right-to-left. It shouldn’t be used on any oriented element, but the ones listed in the W3C documentation are all fair game.
The attribute can take a value of
vertical. Default values are a little ambiguous right now, for example, scrollbar defaults to
vertical and slider defaults to
horizontal – whatever the natural state for the component if you where using a native HTML element might be. For elements that don’t really have a “default” orientation, like a
radiogroup(very commonly seen vertically and horizontally), the default value is
undefined. Something to be aware of when you’re creating a UI that might need this attribute.
When Should I Use It?
If you’re building with normal native HTML elements like
<input type="range" /> there’s no need to set the orientation manually unless you’re physically spinning the element on the page (ARIA roles overwrite HTML semantics, so if the default is correct, you don’t change it). This attribute is primarily for the times where we’re having to rebuild HTML functionality with
<div class="range-slider role="slider>.
Where Can I Read More?
There isn’t much out there, but this is what I found: