Widget ARIA
W
Definition complete
Un Widget ARIA est un composant d'interface interactif enrichi de roles, etats et proprietes ARIA (Accessible Rich Internet Applications) pour le rendre accessible aux technologies d'assistance. ARIA transforme des elements HTML basiques en widgets riches compris par les lecteurs d'ecran.
Les patterns de widgets ARIA standardises incluent : les menus et menubar, les tabs, les dialogs/modales, les sliders, les accordeons, les carousels, les tooltips, et les grilles de donnees.
L'implementation correcte necessite : le role approprié (role="dialog"), les etats (aria-expanded, aria-selected), les proprietes (aria-labelledby, aria-describedby), et la gestion du focus clavier selon les patterns du W3C.
La regle d'or ARIA : "No ARIA is better than bad ARIA". Un widget HTML natif (<button>, <select>) est preferable a un div avec ARIA mal implemente. ARIA complete HTML, ne le remplace pas.
Exemples pratiques
- Modal accessible :
role="dialog" aria-modal="true" aria-labelledby="title"+ trap focus + fermeture Escape, lecteur d'ecran annonce "Dialogue, Confirmation, appuyez Escape pour fermer". - Tabs :
role="tablist",role="tab" aria-selected="true",role="tabpanel", navigation fleches gauche/droite entre onglets. - Accordion :
aria-expanded="false"sur le bouton,aria-controls="panel-id", annonce "Bouton, Section FAQ, reduit".
A quoi sert Widget ARIA ?
Les widgets ARIA servent a rendre les composants interactifs accessibles, permettre la navigation clavier, informer les lecteurs d'ecran de l'etat des elements, et respecter les normes WCAG.
Widget ARIA en pratique chez 123web
Chez 123web, nous implementons des widgets ARIA conformes. Modales, onglets, menus : chaque composant interactif est accessible au clavier et comprehensible par les lecteurs d'ecran, garantissant une experience inclusive.