Structurer les titres et rendre les éléments accessibles

Une page doit rester compréhensible lorsque ses titres sont lus seuls ou lorsqu’un visiteur utilise le clavier et un lecteur d’écran. Commencez par organiser le contenu, puis adaptez sa présentation. La taille d’une police et le niveau d’un titre sont deux réglages différents.

Organiser les titres

Prévoyez un titre principal qui décrit la page. Placez ensuite les grandes sections au niveau deux, puis leurs sous-sections au niveau trois lorsque cela aide à comprendre l’organisation. Ne choisissez pas un niveau seulement pour obtenir une taille de texte.

Dans l’exemple Alma, « Petits groupes » est une section sous le titre principal. Le niveau deux convient ; le passage temporaire au niveau trois sert à comparer le réglage, puis le titre revient au niveau deux.

Choisir la balise dans le builder

Dans Design, passez en Expert, sélectionnez le texte et ouvrez Attributs > Balise. Renseignez le niveau voulu dans ce champ nocode, par exemple h2. Vous n’avez pas à écrire une page HTML ni des classes CSS.

La balise définit le rôle du contenu ; les réglages de texte définissent son apparence. Après un changement, vérifiez le résultat visuel et la hiérarchie de toute la page. Un bouton ou un lien ne devient pas un bon titre parce qu’on lui donne une balise de titre.

Donner un nom accessible lorsque c’est utile

Dans Attributs, utilisez + > Accessibilité si ce réglage est absent, puis ouvrez-le. Le champ Aria Label permet de préciser le nom annoncé par un lecteur d’écran. Dans l’exemple, « Cours en petits groupes chez Alma » explicite le titre.

Un nom accessible peut remplacer le texte annoncé. Gardez-le cohérent avec ce que le visiteur voit. Si un texte visible décrit déjà correctement l’action, ajouter un autre nom n’est pas systématiquement utile.

Utiliser les autres attributs avec mesure

Tabindex règle la présence dans le parcours au clavier. Le choix par défaut conserve le comportement de l’élément ; 0 l’ajoute au parcours normal ; -1 le retire de ce parcours sans constituer une protection d’accès. Un titre n’a généralement pas besoin d’être rendu focusable pour être lu.

Role précise un rôle. Donner le rôle button à un simple élément ne crée pas les interactions clavier d’un vrai bouton. Privilégiez l’élément adapté, puis vérifiez son fonctionnement. Aria Hidden masque un élément aux technologies d’assistance ; évitez de l’appliquer à une commande dont le visiteur a besoin.

Vérifier la page générée

Enregistrez, générez une préparation et contrôlez les titres, les noms accessibles et les actions sur ordinateur et téléphone. Parcourez les commandes au clavier, puis faites une vérification avec un lecteur d’écran pour votre page réelle. Les champs renseignés ne constituent pas à eux seuls une validation de son accessibilité.

Pour une image, renseignez également son texte alternatif. Pour décrire le contenu aux moteurs, utilisez les données structurées.