ARIA les bases… Rôles, repères, états et propriétés

ARIA pour Accessible Rich Internet Applications

ARIA est donc une spécification qui permet d’augmenter l’accessibilité des sites et applications web. Son utilisation est basée sur le renseignement d’attributs permettant de décrire plus finement l’élément auquel ils sont ajoutés. Nous pouvons parler de deux familles principales, d’une part les rôles et d’autre part les états et les propriétés. Rapprochez vous du github sur les pratiques de mise en place – WAI-ARIA Authoring Practices 1.1, ou ARIA in HTML, afin d’en affiner l’utilisation, mais en gros il s’agit d’ajouter un attribut (role= » » ou aria-*= » ») à une balise afin de pouvoir en informer les lecteurs d’écran et les navigateurs compatibles.

<balise role='' aria-*=''>

Les rôles et les points de repères

On associe souvent les deux termes et pourtant, les points de repères sont une particularité des rôles. En fait, il existe quatre groupes de rôles,

• les rôles abstraits qui permettent de décrire l’ensemble des autres rôles (c’est un peu sur de la cuisine interne, et il est préférable comme il l’est recommandé de ne pas y toucher),
• les rôles widgets vont aussi bien décrire de manière autonome des éléments à part entière, comme un onglet, un bouton de menu, une info-bulle… que des éléments inclus dans un composant plus large et englobant tel qu’un menu, une barre de menu, une arborescence… etc,
• les rôles de structure de document permettent de décrire comme son nom l’indique la structure fine des documents tels que article, entête, region, presentation… et bien d’autres,
• les rôles de points de repères largement secondés par les nouvelles balises structurantes arrivées avec HTML5, s’attachent à des parties structurelles du document, et composent la couche de base de tout affichage, comme banner (<header>), complementary (<aside>), main (<main>), navigation (<nav>), contentinfo (<footer>)… Voir Using ARIA landmarks to identify regions of a page,
• quels qu’ils soient, vous trouverez la liste complète de manière alphabétique pour mieux creuser leurs définitions.

Quelque soit le type de rôle, l’usage est très simple, comme nous l’avions entrevu dans l’exemple précédent, il suffit d’ajouter l’attribut à la balise pour la qualifier. Par exemple

<header role="banner">

Une question qui revient souvent est…  » Doit-on ou pas doubler les balises HTML5, avec des rôles ARIA ? « … Les avis peuvent être partagés. D’un côté, la technique dira que cela n’est pas nécessaire de faire double emploi sur les balises représentées. Et d’un autre côté, le bon sens dira qu’à ce jour il existe encore des outils de navigation qui ne prennent pas en compte les balises HTML5, que cela ne mange pas de pain que de doubler les balises avec des rôles et enfin que cela offre des prises pour les CSS, ou JavaScript.

En effet, il peut ne pas y avoir qu’une seule balise <header> au sein de la page et le ruleset header {} les ciblerait toutes, alors que nous pourrions n’avoir qu’une seule balise dotée de l’attribut role ad hoc <header role= »banner> et de ce fait le sélecteur à attribut header[role=’banner’] {} affine et précise la sélection.

Les états et les propriétés

Toujours utilisés sous forme d’attributs qui viennent compléter les rôles, les états, comme les propriétés, usent du même préfixe aria-*. Là encore les états et propriétés sont répartis en 4 catégories et bénéficient en plus d’un ensemble globaux et commun d’éléments:

• les états et propriétés globaux qui s’appliquent quelque soit le rôle et même si celui-ci est absent, les attributs parlent d’eux-mêmes, aria-disabled, aria-hidden, aria-label…
• les états et propriétés propres aux widgets qui viennent compléter les éléments qui possède un rôle de widget, cela renforce un grand nombre d’attribut de formulaire apparus avec HTML5, mais là encore il peut être intéressant de les doubler, ne serait-ce que pour ajouter certains sélecteurs CSS ou JavaScript. Les états parlent d’eux mêmes, aria-checked, aria-pressed, aria-selected, et cela est sans parler des propriétés aria-readonly, aria-haspopup…
• les états et propriétés s’adressant aux régions dynamiques, qui permettent aux lecteurs d’écrans de pouvoir rapidement être informés et prendre en compte toutes modification de contenu, voir Zone Live ARIA sur MDN,
• les états et propriétés relatives au glissé / déposé, tout est dit dans le libellé, voilà là deux attributs spécialement dédiés au glissé déposé, aria-dropeffect, aria-grabbed,
• les états et propriétés relationnelles entre éléments, qui permettent d’associer des balises entre elles, comme par exemple la définition, ou la description, d’une <figure> avec l’ensemble des éléments d’une balise <div> contenant le détail des informations en usant de aria-describedby, ou l’onglet <h3> qui affiche le contenu d’une autre balise <div> par aria-controls,
• quels qu’ils soient, pareillement aux rôles, vous trouverez la liste complète de manière alphabétique de chacun des états et propriétés.

Mise en place et utilisation

Afin de clore cet article sans trop rester théorique, un exemple d’utilisation d’ARIA est présenté, mais afin d’être plus concret il est important non seulement de présenter des possibilités d’utilisation, mais aussi de les tester directement soit avec des outils lecteurs d’écrans, soit des extensions de contrôle, et cela dépasserait le cadre de cette introduction. Il est préférable d’une part de se rapprocher de l’article Configurer un environnement de test pour l’accessibilité et de parcourir ensuite les divers articles spécifiquement dédiés, qui explorent la mise en place de composants, ou de pages optimisées au travers d’ARIA.

<figure
     role="presentation" 
     aria-describedby="descriptif" 
     aria-labelledby="titre-presentation">

    <div id="descriptif" name="descriptif">
        <h4>Speckled Wood</h4>
        <p id="descriptif-court">Le Tircis, Pararge aegeria, est une espèce de lépidoptères de la famille des Nymphalidae, de la sous-famille des Satyrinae et du genre Pararge.</p>
    </div>

    <img 
         src="butterfly-430203_640.jpg" 
         alt="Speckled Wood - Tircis" 
         aria-describedby="descriptif-court" 
         longdesc="#descriptif">

    <figcaption id="titre-presentation">Tircis</figcaption>
</figure>

Aller plus loin

Web Accessibility : Web Standards and Regulatory Compliance

Collectif

This book gives you all you need to know about web accessibility, whether you are a web designer or developer who wants your sites to be accessible, or a business manager who wants to learn what impact the web accessibility laws have on your websites. After an overview of the accessibility law and guidelines, and a discussion about accessibility and its implementation in the enterprise, the book goes on to show how to implement accessible websites using a combination of concise references and ea...

• Friends of Ed
• Partenaire