Mettre en œuvre

Plus elle est considérée tard, plus elle coûte cher.

• En sensibilisant les parties prenantes aux enjeux et bénéfices de l'accessibilité sur l'utilisabilité des projets numériques : humains, légaux, juridiques, techniques, etc.
• En apportant des repères pour appréhender l'accessibilité numérique
• En ancrant la démarche dans la méthodologie de gestion de votre produit

• En déterminant les périmètres, les métiers concernés
• En identifiant les obligations sur votre produit et les actions à mener pour la mise en conformité à l'accessibilité

• En disposant d'un état des lieux de la conformité de votre produit et en le tenant à jour
• En structurant et priorisant les différents travaux à mener
• En contrôlant l'accessibilité de votre produit (audit RGAA, amélioration continue, études qualitatives, audit d'usage)

• En l'intégrant dans les réflexions produit
• En s'assurant de l'accessibilité des parcours dès la phase de wireframing ou de maquette
• En l'intégrant dans les user stories pour guider l'équipe produit (designers, développeurs) et ne pas créer de dette
• En l'intégrant dans les recettes
• En l'intégrant à la production des contenus

• En l'intégrant à vos rituels
• En sensibilisant et en formant toute nouvelle personne concernée
• En responsabilisant tous les membres de l'équipe et en instaurant un suivi régulier pour ne pas régresser
• En instaurant des documentations et ressources dédiées

• En publiant et en tenant à jour la déclaration d'accessibilité
• En publiant et en tenant à jour le statut d'accessibilité
• En publiant et en tenant à jour le schéma pluriannuel

• Envisager au moins deux moyens de navigation différents et les garder au même emplacement
• Indiquer la position courante via des principes d'indication (taille de texte différente, gras, icône, etc.) en plus de la couleur
• Prévoir une variation visuelle lors du survol d'un élément
• Différencier visuellement le dernier élément du fil d'Ariane quand il s'agit de la position courante
• Présenter le fil d'Ariane sur chaque page (non obligatoire sur la page d'accueil), toujours au même endroit en haut de page
• Indiquer la position courante de l'internaute dans l'arborescence par rapport à la page d'accueil
• Proposer des alternatives avec des boutons pour naviguer (ex. un carrousel avec des boutons d'action simples « précédent » et « suivant »)
• Rédiger les liens et boutons pour rendre l'action explicite

• Identifier les différentes sections d'une page avec des niveaux de titres clairement identifiables et cohérents
• Hors page d'accueil, une page doit toujours débuter par un titre de niveau 1 en tant qu'en-tête
• Travailler avec le SEO dès la conception pour penser la structure des titrages de façon unifiée

• L'intitulé du champ doit être accolé à celui-ci
• Persistance des labels lors de la saisie : l'intitulé du champ doit rester visible pendant la saisie
• Pour les formulaires longs, regrouper les champs par thématiques avec un titre
• Toujours indiquer en amont, de façon visible, quels champs sont obligatoires
• Proposer une aide à la saisie en annonçant le format attendu
• En cas d'erreur, afficher un message au niveau du champ concerné, décrivant l'erreur et rappelant le format attendu
• Proposer l'auto-complétion
• Donner un intitulé pertinent et explicite au bouton de validation
• Afficher un message de confirmation après validation du formulaire

• L'information ne doit pas être donnée uniquement par la couleur (jouer aussi sur la taille, la graisse, etc.)
• Définir le ratio de contraste minimum et le vérifier à chaque revue de conception
• Pour du texte, le ratio minimum idéal est de 4,5:1
• Pour les autres contrastes (liens, icônes, boutons, etc.), un ratio de 3:1 est suffisant

• Ne pas intégrer d'effet de flash stroboscopique
• Offrir la possibilité de mettre en pause ou de masquer un contenu en mouvement
• Si le contenu animé est indispensable, limiter sa durée à 5 secondes

• Ne pas justifier les textes
• Conserver les accents, y compris sur les majuscules
• Ajouter une légende à côté des icônes peu connues ou peu intuitives

• Ne pas lancer de son automatiquement
• Prévoir un titre et/ou un résumé pour chaque vidéo et contenu audio
• Proposer d'accéder à la transcription textuelle et d'afficher les sous-titres d'une vidéo ou d'un audio
• Permettre d'activer l'audio-description
• Prévoir des moyens de contrôle de l'avancement et du volume sonore

• Pour permettre le voice over, spécifier le doctype et la langue dans le fichier HTML : <!DOCTYPE html> <html lang="fr">
• S'assurer de la structure de la page avec les balises HTML5 et les repères ARIA (Applications Internet Riches Accessibles) : role="banner" pour l'en-tête (équivalent à <header>), role="navigation" pour la navigation principale (équivalent à <nav>), role="main" pour le contenu principal (équivalent à <main>), role="complementary" pour les informations complémentaires (équivalent à <aside>), role="contentinfo" pour le pied de page (équivalent à <footer>), role="region" pour les sections non couvertes par ces balises
• Utiliser la validation HTML W3C pour vérifier que le document respecte les règles syntaxiques et structurelles des spécifications HTML

• Utiliser la balise <title> pour définir le titre du document HTML
• Le titre doit inclure la fonction spécifique de la page (page de navigation) ou le titre du contenu principal (page de contenu), en plus du nom du site
• Utiliser une structure de titrage appropriée : un <h1> unique au début du contenu principal, des niveaux hiérarchiques cohérents

• Les balises <iframe> (contenu intégré) doivent inclure un attribut title rédigé en français
• Les énumérations doivent être intégrées sous forme de listes <ul>/<li>
• Le changement de langue doit être indiqué avec l'attribut lang dans une balise <span>
• Les liens avec target="_blank" doivent être signalés par la mention « (nouvelle fenêtre) » à la fin du texte du lien
• Chaque balise <img> doit inclure un attribut alt
• Les images décoratives doivent avoir un attribut alt présent mais vide (alt="")
• Les images informatives doivent avoir un attribut alt bien renseigné, décrivant le contenu en français
• Éviter les images contenant du texte ; à défaut, l'attribut alt doit reprendre tout le texte de l'image

• Les balises <iframe> doivent inclure un attribut title rédigé en français
• Éviter les liens vides
• Les descriptions non explicites (« ici », « cliquez ici », « lien »...) sont à proscrire ; la description du lien doit être pertinente
• Pour les descriptions vagues (« voir tout », « lire la suite », « en savoir plus »...), compléter la vocalisation avec aria-describedby ou aria-label
• Pour les liens image (balise <a> ne contenant qu'une image <img>), l'attribut alt de l'image doit décrire le lien
• Pour les liens composites (image et texte), la balise <a> doit englober tout le contenu ; l'image décorative est ignorée via alt=""

• Aucun contenu ne doit devenir invisible lors de la désactivation des styles
• La page doit rester lisible, compréhensible et correctement ordonnée lors de la désactivation des styles

• Le focus doit être visible et cohérent dans tous les contextes, verrouillé en CSS via un offset
• Le parcours du focus avec Tab ne doit comporter aucun piège
• À l'ouverture d'une modale, le focus doit être placé automatiquement à l'intérieur via focus() en JavaScript
• Le parcours du focus avec Tab doit se limiter à la modale tant qu'elle n'est pas fermée
• La fermeture d'une modale (bouton ou touche Échap) doit redonner le focus à l'élément qui a déclenché son ouverture
• Tout script déplaçant le scroll doit aussi ajuster le focus en conséquence

• Le formulaire doit être inclus dans une balise <form> avec un attribut aria-label précisant son titre ou sa fonction
• Les champs (<input>, <select>) doivent être associés à leurs étiquettes via l'attribut for du <label> correspondant à l'id du champ
• Les ensembles de boutons radio ou de cases à cocher doivent être organisés avec <fieldset> et <legend>
• L'auto-complétion doit être activée pour les champs liés à l'utilisateur via l'attribut autocomplete (ex. email, family-name, given-name, new-password, current-password, postal-code, bday)
• Les champs obligatoires doivent avoir un attribut aria-required="true"
• Les champs doivent être reliés à leur message d'erreur via aria-describedby
• Le conteneur du message d'erreur doit avoir un identifiant unique référencé par cet attribut, et être injecté dans le DOM au moment de son affichage
• À la validation : en cas d'erreur, placer le focus sur le premier champ en erreur ; en cas de succès, déclencher la vocalisation du message de confirmation

• S'assurer que toutes les manipulations liées aux mots de passe peuvent se faire en ligne
• Offrir la possibilité de choisir ou modifier son mot de passe
• Informer l'utilisateur sur le niveau de sécurité du mot de passe choisi
• Mettre en place une option de réinitialisation du mot de passe

• Le serveur doit renvoyer un code HTTP 404 pour signaler les ressources introuvables
• Le serveur doit générer une page d'erreur 404 personnalisée informant l'utilisateur, sans interrompre le fonctionnement du site
• Le serveur doit renvoyer une page d'interdiction 403 personnalisée pour rassurer l'internaute qu'il reste sur le même site
• Le menu principal de navigation doit être présent sur les pages d'erreur personnalisées