ARIA ATTRIBUTE•Widget Attributes
aria-orientation
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. Affects which arrow keys are used for navigation.
Value Type
horizontal | vertical
Common Use
Sliders, Toolbars
Affects
Arrow Key Behavior
Overview
The aria-orientation attribute indicates the orientation of a widget. This determines which arrow keys users should use for navigation.
- horizontal - Use Left/Right arrow keys
- vertical - Use Up/Down arrow keys
- undefined (default) - Widget supports both
Live Demo: Horizontal vs Vertical Sliders
Horizontal Slider (Left/Right keys)
Value: 50%
Vertical Slider (Up/Down keys)
Value: 50%
Keyboard behavior: Horizontal uses ← → arrows. Vertical uses ↑ ↓ arrows. The orientation attribute tells screen readers and users which keys to expect.
Code Examples
Basic Usage
<!-- aria-orientation for sliders -->
<!-- Horizontal slider (default) -->
<div
role="slider"
aria-orientation="horizontal"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-label="Volume"
tabindex="0"
>
<!-- Arrow Left/Right to adjust -->
</div>
<!-- Vertical slider -->
<div
role="slider"
aria-orientation="vertical"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-label="Brightness"
tabindex="0"
>
<!-- Arrow Up/Down to adjust -->
</div>Various Widgets
<!-- Various widgets with orientation -->
<!-- Horizontal toolbar (default) -->
<div role="toolbar" aria-orientation="horizontal" aria-label="Formatting">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
</div>
<!-- Navigate with Left/Right arrows -->
<!-- Vertical toolbar -->
<div role="toolbar" aria-orientation="vertical" aria-label="Tools">
<button>Select</button>
<button>Draw</button>
<button>Erase</button>
</div>
<!-- Navigate with Up/Down arrows -->
<!-- Horizontal tablist -->
<div role="tablist" aria-orientation="horizontal">
<button role="tab">Tab 1</button>
<button role="tab">Tab 2</button>
</div>
<!-- Vertical tablist (sidebar navigation) -->
<div role="tablist" aria-orientation="vertical">
<button role="tab">Settings</button>
<button role="tab">Profile</button>
</div>
<!-- Horizontal separator (default) -->
<div role="separator" aria-orientation="horizontal"></div>
<!-- Vertical separator -->
<div role="separator" aria-orientation="vertical"></div>Keyboard Behavior
<!-- Keyboard behavior based on orientation -->
<!-- HORIZONTAL widgets -->
<div role="slider" aria-orientation="horizontal">
<!--
Arrow Right → Increase value
Arrow Left → Decrease value
Home → Minimum value
End → Maximum value
-->
</div>
<div role="listbox" aria-orientation="horizontal">
<!--
Arrow Right → Next option
Arrow Left → Previous option
-->
</div>
<!-- VERTICAL widgets -->
<div role="slider" aria-orientation="vertical">
<!--
Arrow Up → Increase value
Arrow Down → Decrease value
Home → Minimum value (or maximum, depends on context)
End → Maximum value (or minimum)
-->
</div>
<div role="listbox" aria-orientation="vertical">
<!--
Arrow Down → Next option
Arrow Up → Previous option
-->
</div>React Components
// React components with aria-orientation
import { useState, useCallback } from 'react';
// Slider with orientation support
function Slider({
orientation = 'horizontal',
value,
onChange,
min = 0,
max = 100,
label
}) {
const handleKeyDown = useCallback((e) => {
let newValue = value;
const step = 1;
// Key handling based on orientation
if (orientation === 'horizontal') {
switch (e.key) {
case 'ArrowRight':
newValue = Math.min(value + step, max);
break;
case 'ArrowLeft':
newValue = Math.max(value - step, min);
break;
case 'Home':
newValue = min;
break;
case 'End':
newValue = max;
break;
default:
return;
}
} else {
// Vertical: Up increases, Down decreases
switch (e.key) {
case 'ArrowUp':
newValue = Math.min(value + step, max);
break;
case 'ArrowDown':
newValue = Math.max(value - step, min);
break;
case 'Home':
newValue = max; // Top
break;
case 'End':
newValue = min; // Bottom
break;
default:
return;
}
}
e.preventDefault();
onChange(newValue);
}, [value, min, max, orientation, onChange]);
const percentage = ((value - min) / (max - min)) * 100;
return (
<div
className={`slider ${orientation}`}
style={{
width: orientation === 'horizontal' ? '200px' : '20px',
height: orientation === 'horizontal' ? '20px' : '200px',
}}
>
<div
role="slider"
aria-orientation={orientation}
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={value}
aria-label={label}
tabIndex={0}
onKeyDown={handleKeyDown}
className="slider-track"
>
<div
className="slider-fill"
style={{
[orientation === 'horizontal' ? 'width' : 'height']:
`${percentage}%`
}}
/>
</div>
</div>
);
}
// Toolbar with orientation
function Toolbar({ orientation = 'horizontal', children, label }) {
return (
<div
role="toolbar"
aria-orientation={orientation}
aria-label={label}
className={`toolbar ${orientation}`}
style={{
display: 'flex',
flexDirection: orientation === 'horizontal' ? 'row' : 'column',
}}
>
{children}
</div>
);
}
// Usage
function Editor() {
const [volume, setVolume] = useState(50);
const [brightness, setBrightness] = useState(75);
return (
<div>
<Slider
orientation="horizontal"
value={volume}
onChange={setVolume}
label="Volume"
/>
<Slider
orientation="vertical"
value={brightness}
onChange={setBrightness}
label="Brightness"
/>
<Toolbar orientation="horizontal" label="Formatting">
<button>Bold</button>
<button>Italic</button>
</Toolbar>
</div>
);
}