Interactions et contenus pour les aides techniques

Fiche: Interactions et contenus pour les aides techniques

Description

Il est important de permettre aux utilisateurs d'interagir avec les interfaces à la fois avec la souris, mais également avec le clavier.

Permettre de déclencher des actiosn avec la touche [entrée] aussi bien qu'au clic de souris et permettre une navigation entre ces éléments d'interaction au clavier par la touche [tab] est fondamental.

Si l'utilisation classique des liens (balise <a>) ou des boutons est une réponse directe au besoin, l'utilisation des déclencheurs javascript est souvent pratique.
Il n'y a pas de frein, il suffit de compléter le très utilisé "onclick" par le trop souvent oublié "onkeypress" avec une gestion de l'élément déclencheur (on cherche uniquement à attraper la touche [entrée]).

Contenus pour les aides techniques

Autre élément fondamental de la relation à l'utilisateur, permettre de compléter des informations visuelles ou de contexte d'interface par des éléments lus uniquement les lecteurs d'écrans.

L'exemple le plus évident est la sélection d'un élément dans une liste. Généralement, une indication visuelle est posée sur l'élément sélectionné ou en cours, mais une fois l'élément sans ses éléments de décoration, il permet l'indication de la sélection.
L'ajout d'une information cachée correctement dans un espace "sr-only" - par exemple : <span class="sr-only">(langue active)</span> - en complément de l'élément affiché pour tous est une bonne pratique.

Implémentation

Dans le code ci-dessous, une information cachée avec une balise <span> et une classe CSS "sr-only" permet de fournir une information de contexte sur la langue active dans le menu de choix des langues.

Il aurait été possible d'utiliser ARIA pour cela, mais comme le précise la première règle ARIA, lorsque le HTML permet de le faire, pourquoi utiliser autre chose ? L'utilisation de ce jeu intelligent de cache-cache est simple et évident.

Code

HTML

<section id="chxln" role="navigation">
    <h3 class="sr-only">Choix de la langue d'affichage</h3>
    <ul role="menu">
        <li id="fr" aria-current="true" class="active" tabindex="-1" title="français" role="menuitem">fr<span class="sr-only"> (Langue en court)</span></li>
        <li id="en" aria-current="false" class="inactive lien" tabindex="0" title="english" role="menuitem">en</li>
    </ul>
</section>

CSS

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; 
    clip-path: inset(50%) !important; 
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}