Un design accessible doit permettre de comprendre et d’utiliser les contenus dans différentes situations : au clavier, avec un écran réduit, sans survol de souris ou avec une préférence pour moins d’animations.
Une liste de contrôles ne constitue pas une certification. Elle aide toutefois à repérer des obstacles concrets avant la mise en ligne d’un site Phoenix.
Vérifier la structure et l’ordre de lecture
Commencez par les grandes zones : en-tête, navigation, contenu principal et pied de page. Ajoutez un lien d’évitement utilisable au clavier pour rejoindre le contenu principal.
Relisez la hiérarchie des titres. Le titre principal doit décrire la page, puis les sections et sous-parties doivent suivre un ordre logique. Un choix de taille visuelle se règle dans le CSS, sans transformer chaque grand texte en h1.
Sur mobile, vérifiez que l’ordre des colonnes correspond encore au parcours attendu. Dans les articles du projet, le corps du guide précède les liens complémentaires lorsque la place manque.
Donner un nom compréhensible aux liens
Un lien comme « Télécharger le kit du premier bloc » indique une destination et une action. Plusieurs « En savoir plus » isolés demandent davantage de contexte.
L’attribut title peut compléter les liens comme demandé dans ce design, mais il ne remplace pas leur texte visible. Son contenu n’est pas accessible de la même manière sur tous les appareils ; évitez d’y cacher une information indispensable.
Pour un lien composé uniquement d’une icône, fournissez un nom accessible approprié. Si l’icône accompagne déjà un texte clair, marquez-la comme décorative lorsque cela évite une répétition inutile.
Traiter les images selon leur rôle
Une photo informative reçoit un texte alternatif qui explique son apport dans la page. Une illustration décorative peut conserver alt="". Le nom du fichier et le titre de la médiathèque ne répondent pas toujours à ce besoin.
Pour une capture complexe, le texte du guide doit expliquer l’information importante. Un long attribut alternatif n’est pas toujours la meilleure façon de transmettre plusieurs étapes.
Le guide des images propose une méthode de préparation et de contrôle des médias.
Parcourir toute la page au clavier
Utilisez Tabulation et les commandes du clavier pour atteindre les liens, le menu, les questions de FAQ et les formulaires. Le focus doit rester visible.
Essayez l’ouverture et la fermeture du menu mobile. Un sous-menu ne doit pas être disponible uniquement au survol de la souris. Les fenêtres modales demandent aussi une gestion du focus et un moyen identifiable de revenir à la page.
Une animation ne doit pas empêcher la lecture. Les effets non essentiels doivent respecter prefers-reduced-motion. La notice de prochaine rencontre du projet utilise une animation courte, puis reste fixe.
Lire les formulaires comme des parcours
Chaque champ doit avoir un libellé identifiable. Un placeholder disparaît pendant la saisie et ne remplace pas toujours un label.
Provoquez les erreurs prévues : champ obligatoire vide, adresse courriel invalide ou étape de paiement abandonnée. Le message doit expliquer quoi corriger sans effacer inutilement les données déjà saisies.
Vérifiez ensuite une soumission réussie et la confirmation attendue. La cohérence du traitement fait partie de l’usage réel du formulaire.
Tester la lisibilité et l’agrandissement
Contrôlez les contrastes des textes, des boutons et des états de focus. Essayez un agrandissement important et une largeur réduite. Les blocs de code doivent pouvoir défiler localement sans déplacer toute la page.
Les tests automatiques repèrent certains défauts, mais ils ne jugent pas à eux seuls la qualité d’un texte alternatif, la pertinence d’un lien ou la compréhension d’un formulaire.
Utilisez ces essais avec la recette de livraison. Pour approfondir le rôle des textes alternatifs, consultez les tutoriels Images du W3C WAI.
