Table des matières
A – AA
Durée : 8 minutes
Testez-vous !
Principe
Pour garantir l’accessibilité, il est indispensable que chaque lien ou bouton soit identifié sans ambiguïté : l’utilisateur doit saisir instantanément l’action attendue ou la destination proposée, que ce soit pour naviguer ou interagir.
Explication audio (transcription disponible)
Transcription
Sur les liens et boutons, le principe paraît évident, mais il est souvent oublié : chaque action doit être annoncée clairement.
Privilégiez un intitulé explicite comme “Télécharger le PDF” plutôt que “Cliquez ici”.
Faites la différence entre les liens (qui amènent vers une page ou une ressource) et les boutons (qui déclenchent une action), et gardez une cohérence visuelle pour ne pas perdre l’utilisateur.
En HTML, le langage de base du web, cette distinction est native, et elle aide les utilisateurs à comprendre ce qui va se passer : un lien les amène ailleurs, un bouton agit ici et maintenant.
Pensez aussi à définir l’état du bouton au survol et quand il est sélectionné.
À vérifier
- Rédiger un intitulé explicite pour chaque lien ou bouton (nom identique pour une même destination).
- Signaler lorsqu’un lien ouvre une nouvelle fenêtre (par icône, texte, ou contexte clair).
- Afficher des états visibles et différenciés pour survol, actif et désactivé.
- Distinguer clairement les boutons d’activité interactive (action) de ceux de navigation générale (lien).
- Rendre les info-bulles et sous-menus lisibles et accessibles au clavier comme à la souris (afficher au clic plutôt qu’au survol).
Pour qui ?
- Tous les utilisateurs, et particulièrement ceux utilisant un lecteur d’écran ou ayant des troubles cognitifs.
- Les personnes qui naviguent vite ou veulent comprendre où mènent chaque interaction sans perdre de temps.
Pourquoi c’est important ?
Des liens et boutons explicites évitent la confusion, facilitent la navigation, réduisent le taux d’erreur et permettent aux aides techniques d’annoncer correctement les actions ou destinations.
Comment réussir
- Utilisez des intitulés complets et explicites pour chaque lien ou bouton (“Télécharger le support PDF”, “Accéder au chapitre 3”…).
- Informez l’utilisateur si le lien ouvre une nouvelle fenêtre, lance un téléchargement ou une action inhabituelle (par icône, texte ou contexte clair).
- Privilégiez l’utilisation de boutons pour les actions et de liens pour la navigation.
- Différenciez visuellement (couleur, forme, état) les liens et boutons selon leur rôle. Appliquez un état différent quand l’utilisateur survole le bouton ou le lien
- Vérifiez les intitulés avec un lecteur d’écran, ajustez le texte alternatif si besoin (ex : image). Il est fortement recommandé d’accompagner une icône cliquable d’un texte explicite. (voir 20. Alternatives textuelles pour les éléments visuels).
- Pour garantir l’accessibilité, l’affichage du focus doit être pris en compte et est géré en général pour l’outil (voir fiche 5. Navigation clavier et focus dédiée).
Astuce Storyline – Maîtriser les éléments interactifs
Gérer les éléments interactifs dans Storyline
Dans Storyline, n’importe quel élément peut devenir interactif : bouton, lien, image, éléments groupés, etc. L’essentiel est de rendre l’action évidente : on doit voir ce qui est cliquable, et avoir un retour visuel sur chaque état.
Vous pouvez également personnaliser les textes alternatifs selon l’état d’un bouton. Par exemple, indiquer “Fiche visitée” une fois l’action réalisée. Cette pratique améliore l’accessibilité, mais demande un paramétrage précis et une bonne maîtrise de l’outil.
Prenons l’exemple d’une activité où l’apprenant doit explorer trois cartes cliquables avant de passer à l’écran suivant.
État au survol
Au survol d’un élément interactif (carte, bouton…), faites apparaître un effet visuel : ombre, couleur, soulignement, surbrillance, etc (dans cet exemple la couleur d’arrière plan et du texte s’inverse).
Pourquoi ? Cela assure un feedback visuel et rassure l’utilisateur, lui confirme qu’il est sur la bonne zone, et améliore la perception de l’interactivité (utile pour tous, y compris pour les personnes ayant des troubles d’attention ou de vision).
État visité
Quand une carte ou un bouton a été visité, faites changer son apparence : nouvelle couleur, icône de validation, coche, etc.
Pourquoi ? Cela permet de voir ce qui a déjà été consulté/interagi, évite d’oublier une étape, et structure la progression, notamment si plusieurs actions sont obligatoires avant de poursuivre.
Contrôler les états des éléments interactifs
Dans Storyline, on ne peut pas changer l’état d’un groupe d’objets via les déclencheurs. L’astuce consiste à assembler tous les éléments (image, texte, etc.) dans l’état d’un même objet (par exemple, un rectangle).
Dans cet exemple :
- Chaque carte cliquable est conçue comme un objet unique, avec tous ses états (normal, survol, visité).
- L’état visité est affiché automatiquement dès que l’apprenant clique sur l’élément (vous devez simplement créer l’état « visité » proposé par défaut et personnaliser le texte alternatif, ex : « Fiche conception contenu déjà lue »)
- Dans les déclencheurs, le bouton Suivant est désactivé tant que toutes les cartes n’ont pas été visitées. Dès que c’est fait, il passe à l’état normal (déverrouillé).
- Ce type d’astuce permet de gérer simplement et finement les interactions et de sécuriser la progression, sans frustration pour l’utilisateur.
Boutons de formulaire – Respecter et exploiter les standards
Dans Storyline, il existe plusieurs façons de créer des réponses pour l’apprenant.
Vous pouvez utiliser les composants standards (radio, case à cocher), ou personnaliser entièrement vos boutons selon vos besoins. L’important est de respecter les repères visuels universels et de garantir l’accessibilité.
Les boutons de formulaire standards sont utilisés par exemple dans les questions notées, mais vous pouvez également les insérer au format libre (ou sans aucune question préconfigurée).
- États générés automatiquement (sélectionné, survolé, désactivé…), vous pouvez légèrement ajuster leurs styles (format et états).
- Universellement compris
- Bien annoncés par les lecteurs d’écran et accessibles au clavier
Bouton radio standard (rond)
Le bouton radio est utilisé pour proposer un choix unique parmi plusieurs options.
- Le repère visuel du rond est universel et immédiatement compris (aussi bien en web qu’en Storyline).
- Pour les dispositifs d’assistance, il est parcouru et annoncé comme une liste d’options.
Case à cocher standard (carré)
La case à cocher permet de sélectionner plusieurs réponses.
- Le carré à cocher est le standard international.
- Pour les dispositifs d’assistance, chaque case est annoncée séparément.
Boutons simples et personnalisés
Vous pouvez aussi utiliser des boutons et les personnaliser :
- Bouton simple : adapté si tout le module propose le même type de réponse.
- Bouton radio/checkbox stylisés : il est conseillé de reprendre les standards et de les styliser avec la même logique (rond = unique, carré = multiple). Cela facilite la compréhension si vous mélangez les deux types de questions dans le module.
Dans tous les cas, c’est à vous de veiller à la gestion des états (si vous n’utilisez pas les questions préconfigurées vous devez aussi gérer les textes alternatifs et les contrôles, réservé à des niveaux avancés).
Au format libre, quel que soit le type de question choisi (réponse unique ou multiple), même un simple bouton sera correctement interprété par les dispositifs d’assistance : il sera annoncé comme case à cocher ou bouton radio selon le cas.
Synthèse
- Utilisez les boutons radio (rond) et checkbox (carré) pour garantir des repères universels et l’accessibilité.
- Soignez les états (survol, visité, désactivé) : c’est indispensable pour guider et rassurer l’utilisateur.
- Si vous personnalisez vos boutons, restez cohérent et assurez-vous qu’ils soient bien annoncés et accessibles.
Pour aller plus loin
Suivre ma progression :
Ce point est lu & terminé.