Présentation d'ARIA

Présentation d'ARIA et de la sémantique HTML non native

Alice Boxhall

Dave Gash

Meggin Kearney

Jusqu'à présent, nous avons encouragé l'utilisation d'éléments HTML natifs, car ils vous permettent la compatibilité avec le clavier et la sémantique intégrée, mais il arrive parfois qu'un simple la mise en page et le code HTML natif ne fonctionneront pas. Par exemple, il n'existe actuellement un élément HTML standardisé pour une construction d'interface utilisateur très courante, le menu pop-up. Norvège Existe-t-il un élément HTML qui fournit une caractéristique sémantique, telle que "le l'utilisateur doit en être informé dès que possible".

Dans cette leçon, nous allons découvrir comment exprimer la sémantique que le HTML ne peut pas pour s'exprimer par lui-même.

Les applications Internet riches en applications accessibles de la Web Accessibility Initiative spécification (WAI-ARIA ou ARIA) permet de relier des zones présentant des problèmes d'accessibilité impossibles à gérer. avec du code HTML natif. Il vous permet de spécifier des attributs qui modifient le dont un élément est traduit dans l'arborescence d'accessibilité. Examinons une à titre d'exemple.

Dans l'extrait de code suivant, nous utilisons un élément de liste en tant que type de case à cocher personnalisée. La "Case à cocher" CSS donne à l'élément les caractéristiques visuelles requises.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Bien que cela fonctionne bien pour les personnes voyantes, un lecteur d'écran n'indiquera aucune indication que l'élément est censé être une case à cocher, de sorte que les utilisateurs malvoyants peuvent passer à côté l'élément.

Toutefois, avec les attributs ARIA, nous pouvons donner à l'élément les informations manquantes afin que le lecteur d'écran puisse l'interpréter correctement. Ici, nous avons ajouté role et les attributs aria-checked pour identifier explicitement l'élément en tant que case à cocher ; pour indiquer qu'elle est cochée par défaut. L'élément de liste est alors ajouté l'arborescence d'accessibilité et un lecteur d'écran la signale correctement sous la forme d'une case à cocher.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA modifie et améliore l'arborescence d'accessibilité du DOM standard.

Bien qu'ARIA nous permette de modifier subtilement (voire radicalement) l'accessibilité pour chaque élément de la page, c'est la seule chose qu'elle change. ARIA n'améliore aucun des comportements inhérents à l'élément ; cela ne rendra pas un élément sélectionnable ou lui attribuer des écouteurs d'événements de clavier. Cela fait toujours partie de notre de développement.

Il est important de comprendre qu'il n'est pas nécessaire de redéfinir les paramètres par défaut la sémantique. Quelle que soit son utilisation, un <input type="checkbox"> HTML standard l'élément ne nécessite pas d'attribut ARIA role="checkbox" supplémentaire pour être correctement annoncée.

Il convient également de noter que certains éléments HTML ont des restrictions sur ce que les ARIA vous pouvez utiliser des rôles et des attributs dessus. Par exemple, aucun rôle/attribut supplémentaire ne peut être appliqué à un élément <input type="text"> standard.

Reportez-vous à la spécification ARIA dans HTML. pour en savoir plus.

Découvrons les autres fonctionnalités offertes par ARIA.

Que peut faire l'ARIA ?

Comme nous l'avons vu dans l'exemple de case à cocher, ARIA peut modifier la sémantique des éléments existants ou ajouter une sémantique à des éléments qui n'existent pas de sémantique native. Il peut aussi expriment des modèles sémantiques qui n'existent pas du tout en HTML, comme un menu ou un onglet panneau. Souvent, ARIA permet de créer des éléments de type widget en HTML brut.

• Par exemple, ARIA peut ajouter un libellé et un texte de description supplémentaires exposés aux API de technologies d'assistance.
  

<button aria-label="screen reader only label"></button>

• ARIA peut exprimer des relations sémantiques entre des éléments qui étendent le une connexion parent/enfant standard, telle qu'une barre de défilement personnalisée qui contrôle un dans une région spécifique.

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

• Les ARIA peuvent rendre certaines parties de la page "actives", afin d’informer immédiatement la technologie d'assistance quand elles changent.

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

L'un des aspects essentiels du système ARIA est son ensemble de rôles. Un rôle en termes d'accessibilité, il s'agit d'un raccourci pour une UI spécifique. du modèle. ARIA fournit un vocabulaire de modèles que vous pouvez utiliser via role sur n'importe quel élément HTML.

Lorsque nous avons appliqué role="checkbox" dans l'exemple précédent, nous indiquons technologie d'assistance que l'élément doit suivre la « case à cocher » du modèle. Cela nous garantissons que son état sera coché (coché ou non) cochée), et que l'état peut être basculé à l'aide de la souris ou de la barre d'espace, comme un élément "case à cocher" HTML standard.

En fait, comme les interactions avec le clavier sont particulièrement visibles dans le lecteur d'écran lors de la création d'un widget personnalisé, veillez à ce que L'attribut role est toujours appliqué au même endroit que tabindex attribut Cela garantit que les événements du clavier sont placés au bon endroit et que, se concentre sur un élément, son rôle est transmis avec précision.

La spécification ARIA décrit une taxonomie des valeurs possibles pour l'attribut role et l'ARIA associé qui peuvent être utilisés conjointement avec ces rôles. C'est la meilleure Source d'informations définitives sur le fonctionnement des rôles et attributs ARIA et comment les utiliser d'une façon compatible avec les navigateurs les technologies d'assistance.

Cependant, la spécification est très dense : un point de départ plus accessible est le test ARIA Document sur les pratiques de création , qui explore les bonnes pratiques d'utilisation des rôles ARIA disponibles et propriétés.

ARIA propose également des rôles de point de repère qui étendent les options disponibles en HTML5. Voir le cours Landmark Roles Design Motifs .