aria-orientation
Indique si l'orientation d'un widget est horizontale, verticale, ou indéfinie.
Description
aria-orientation informe les technologies d’assistance de l’orientation spatiale d’un widget. Cette information est utile pour les lecteurs d’écran qui adaptent les instructions de navigation clavier en fonction de l’orientation (flèches haut/bas vs gauche/droite).
Syntaxe
<ul role="tablist" aria-orientation="horizontal">…</ul>
<ul role="tablist" aria-orientation="vertical">…</ul>
<input type="range" aria-orientation="vertical" />
Exemples
Barre d’onglets verticale :
<div class="layout">
<ul role="tablist"
aria-orientation="vertical"
aria-label="Navigation des paramètres">
<li><button role="tab" aria-selected="true">Général</button></li>
<li><button role="tab" aria-selected="false">Sécurité</button></li>
<li><button role="tab" aria-selected="false">Notifications</button></li>
</ul>
<div>…</div>
</div>
Séparateur vertical :
<hr role="separator" aria-orientation="vertical" />
Notes
Valeur par défaut : les composants ont souvent une orientation implicite (tablist est horizontal par défaut, scrollbar vertical par défaut). N’indiquer aria-orientation que lorsque la valeur diverge du défaut.
Clavier : les lecteurs d’écran utilisent aria-orientation pour indiquer les touches de navigation. Un tablist vertical navigue avec les touches haut/bas ; horizontal avec gauche/droite.