Bad value X for attribute “aria-orientation” on element Y.

The aria-orientation attribute only accepts horizontal, vertical or undefined, and the value on this element is none of them.

aria-orientation tells assistive technologies which way a widget's items are laid out, so a screen reader user knows whether the up and down arrow keys or the left and right ones move between them. It applies to roles such as tablist, toolbar, slider, separator, listbox and menu. The validator compares the value exactly, so an empty string, a capitalized Horizontal, a value with spaces around it or a made-up keyword like both all trigger this error. A value outside that list gives assistive technologies no orientation they can use.

An empty value usually comes from a component or template that always prints the attribute, even when no orientation was set.

To fix it, set the value to horizontal or vertical in lowercase, matching how the items are laid out on screen. If the role's default already matches, such as horizontal for a tablist or toolbar, you can remove the attribute instead. On a div without a role, the attribute does nothing and the validator also asks for a role, so either add the widget role or drop the attribute.

Invalid example

<div role="toolbar" aria-label="Text formatting" aria-orientation="">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
</div>

Valid example

<div role="toolbar" aria-label="Text formatting" aria-orientation="vertical">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
</div>

Learn more:

MDN Reference

MDN Web Docs: aria-orientation

→

W3C Reference

WAI-ARIA 1.2 specification

→