Composants AriaML

AriaML est une évolution du HTML. Un document AriaML est intégralement contenu dans une balise . Il ne possède pas les balises html, head, link, meta, ou body, et ne comporte pas de doctype. Il peut cependant être embarqué dans un document HTML pour assurer la rétro compatibilité des navigateurs et moteurs de recherche. Un polyfill JS (webextension / standalone) se charge de synchroniser les meta données et les ressources de style afin de rendre le document ariaML compatible avec son conteneur HTML (voir Structure d'un document AriaML et Apparence d'un document AriaML).

AriaML hérite de HTML. la balise peut contenir les même éléments que la balise de HTML. En outre, AriaML fourni des éléments supplémentaires avec des comportements et une apparence par défaut.

L'attribut visually-hidden

L'attribut visually-hidden est un mécanisme natif d'AriaML permettant de gérer la visibilité sélective d'un contenu. Il est conçu pour fournir des informations essentielles aux technologies d'assistance sans encombrer l'interface visuelle.

• Comportement par défaut : Un élément portant cet attribut est retiré du flux visuel (sa taille est réduite au minimum et son contenu est masqué) tout en restant présent et lisible dans l'arbre d'accessibilité.
• Réactivation contextuelle : Pour garantir la conformité aux normes d'accessibilité (notamment pour les liens d'évitement ou les contrôles interactifs), l'élément redevient automatiquement visible et occupe son espace naturel dès qu'il reçoit le focus (clavier ou programmatique) ou qu'un de ses descendants est activé.

Le conteneur sémentiquement neutre <g>

L'élément <g> (group) est le conteneur générique de base d'AriaML.

• Rôle : Il sert exclusivement à regrouper des éléments pour des besoins de structure ou de mise en page.
• Neutralité : Contrairement à d'autres balises, <g> n'induit aucune surcharge cognitive pour les lecteurs d'écran à moins qu'un attribut role explicite ne lui soit ajouté.
• Héritage visuel : Il agit comme une boîte transparente facilitant l'application de comportements ou de styles groupés. Il permet aussi de configurer les ressources de styles en les liant à un thème et/ou en leur attribuant une media query (voir Apparence d'un document AriaML).

Les éléments role="tab"

Dans AriaML, les éléments identifiés par role="tab" bénéficient d'une intelligence relationnelle native. Ils ne sont plus de simples boutons, mais des composants conscients de leur environnement au sein d'un système d'onglets.

• Détection automatique des relations : Dès sa création, l'élément établit automatiquement une connexion avec son conteneur tablist et identifie ses "frères" (les autres onglets de la même liste).
• Liaison sémantique de contenu : L'onglet résout dynamiquement le lien avec son panneau de contenu associé via l'attribut aria-controls. Cela permet de piloter l'affichage (masquer/afficher) sans configuration supplémentaire.
• Comportement standardisé : Il hérite par défaut du pattern tab, incluant la gestion du cycle de sélection et la navigation clavier entre les différents panneaux.

    <div role="tablist" aria-label="Exemple d'onglets">

        <button role="tab"
                aria-selected="true"
                aria-controls="panel-1"
                id="tab-1">
            Description
        </button>

        <button role="tab"
                aria-selected="false"
                aria-controls="panel-2"
                id="tab-2">
            Spécifications
        </button>

        <button role="tab"
                aria-selected="false"
                aria-controls="panel-3"
                id="tab-3">
            Commentaires
        </button>

    </div>

    <section role="tabpanel" id="panel-1" aria-labelledby="tab-1">
        <h3>Contenu Description</h3>
        <p>Voici le texte de présentation du produit.</p>
    </section>

    <section role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
        <h3>Fiche Technique</h3>
        <ul>
            <li>Poids : 500g</li>
            <li>Matière : Polymère</li>
        </ul>
    </section>

    <section role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
        <h3>Avis clients</h3>
        <p>Aucun commentaire pour le moment.</p>
    </section>

Autres éléments

Cette section est en cours de developpement. L'objectif est de couvrir nativement au moins les principaux cas d'usages décrit par les patterns ARIA Authoring Practices Guide (APG)

Précision technique

Les composants AriaML ne sont pas programmés en JavaScript. Ils sont conçus de manière purement déclarative grâce à une feuille de comportement .bhv par défaut.

Cette approche est analogue à la feuille de style par défaut de l'agent utilisateur (User Agent Stylesheet) des navigateurs : tout comme les éléments HTML (tels que <h1> ou <ul>) possèdent des styles CSS standardisés par défaut, les éléments AriaML possèdent des comportements standardisés par défaut. Vous pouvez consulter la feuille de comportement initiale ici.

Suivant: Structure d'un document AriaML