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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-aria-orientation-on-element-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Valid example

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