Liste de contrôle pour vérifier l’accessibilité d’un site Web
Votre site Web peut atteindre un public énorme. Atteindre, ainsi que d'attirer ces utilisateurs, nécessite toutefois un site accessible à tous. C’est pourquoi les équipes de développement et de marketing doivent examiner les listes de contrôle pour vérifier l’accessibilité d'un site Web et s’assurer que votre site est conforme aux directives pour l’accessibilité au contenu Web (WCAG).
Continuez votre lecture pour consulter notre checkliste de conformité définitive avec plus de 50 normes à respecter.
Liste de contrôle de WCAG 2.0
Évaluez rapidement votre conformité à WCAG avec notre liste de contrôle à jour de WCAG 2.0:
- Niveau A : Rendez votre site accessible à certains utilisateurs.
- Niveau AA : Rendez votre site accessible à presque tous les utilisateurs.
- Niveau AAA : Rendez votre site accessible à tous les utilisateurs.
Vérifier l’accessibilité d’un site Web de niveau A
Si votre entreprise n'a pas beaucoup de temps à consacrer à la conformité WCAG, le niveau A peut vous aider à démarrer. Avec le niveau A, vous apportez à votre site certaines modifications de base qui le rendent accessible à certains utilisateurs (mais pas à tous).
Liste de contrôle de l'accessibilité Web de niveau A
| Lignes directrices | Actions de référence |
| Contenu non textuel | Ajoutez du texte de remplacement aux images. Ajouter un texte alternatif à l'audio et à la vidéo. Ajoutez des noms aux contrôles, comme «Soumettre ». |
| Audio uniquement et vidéo uniquement | Rédigez des transcriptions pour du contenu uniquement audio et vidéo. Liez ou placez les transcriptions près du contenu audio ou vidéo. Enregistrez des pistes audio pour les médiasuniquement vidéo |
| Légendes | Ajoutez des légendes à toutes les vidéos avec son. |
| Description audio ou alternative multimédia | Écrire des transcriptions vidéo. Fournir des descriptions audio de la vidéo. |
| Informations et relations | Utilisez un code HTML valide et correct. Appliquez des étiquettes claires aux formulaires. Diviser le contenu avec les sous-titres. |
| Séquence utile | Séparer les menus de navigation du contenu. Utilisez un code HTML valide. Utilisez des en-têtes et des listes. Organiser les paragraphes dans l'ordre. |
| Caractéristiques sensorielles | Donnez plus d'instructions, comme la vue et le son, pour les instructions. |
| Utilisation des couleurs | Évitez les références de couleur dans le texte, par exemple en demandant aux utilisateurs de cliquer sur un bouton vert. |
| Contrôle audio | Permet aux utilisateurs de choisir quand lire de l'audio, plutôt que de le lire automatiquement. |
| Clavier | Supprimez toute fonction utilisant des frappes au clavier programmées, comme un double clic. |
| Pas de clavier | Activer le contrôle de la navigation avec la flèche ou la touche “Tab”. Éliminez les cas où les utilisateurs ne peuvent pas naviguer ou accéder à votre site sans clavier. |
| Durée réglable | Permet aux utilisateurs d’éteindre, d’ajuster ou de prolonger n’importe quel délai, à l’exception des événements en temps réel, comme une vente aux enchères. Autoriser les utilisateurs à mettre en pause le déplacement ou le texte animé. Autoriser les utilisateurs à retarder la fréquence de mise à jour. |
| Mettre en pause, arrêter, masquer | Fournissez tout le contenu en mouvement, clignotant, défilant ou mis à jour automatiquement avec des contrôles utilisateur. |
| Trois clignotements ou moins | Supprimez tout contenu clignotant plus de trois fois par seconde. |
| Blocs de contournement | Ajoutez un lien «Passer au contenu» à toutes les pages du site. Rendre le lien "Passer au contenu" visible et accessible. |
| Titre de page | Écrire des titres uniques et descriptifs pour chaque page de votre site. |
| Ordre de focalisation | Assurez la fonctionnalité du site avec la touche “Tabulation”. Définissez l’ordre des éléments, comme les pages de votre navigation, de manière logique. |
| Objet du lien dans le contenu | Créez un texte d'ancrage facile à comprendre et aligné sur le texte environnant. |
| Langue de la page | Utilisez le HTML pour utiliser le code de langue approprié pour les pages. |
| Mise au point | Éliminez les réponses automatiques, telles que les fenêtres contextuelles, les soumissions de formulaires et les ouvertures de liens. Exiger une action de l'utilisateur, comme un clic de souris pour ouvrir un lien, pour que les réponses se produisent. |
| À l'entrée | Supprimez tous les champs du formulaire de soumission automatique. Éliminez toutes les instances qui suppriment le contrôle d’un utilisateur lorsqu’il interagit avec un élément. |
| Identification des erreurs | Les utilisateurs fournisseurs fournissent des explications pour les erreurs et des instructions pour les corriger. Placez les explications d'erreur près de l'erreur, comme un champ de formulaire obligatoire mais vide. |
| Étiquettes ou instructions | Étiquetez tous les champs de saisie. Décrivez le format préféré pour les champs de saisie, comme pour un numéro de téléphone ou une date. Fournissez des instructions utiles pour remplir les champs de saisie. |
| Analyse | Suivez la structure et les directives HTML appropriées. Corrigez tous les éléments HTML avec des attributs en double. |
| Nom, rôle et valeur | Assurez-vous que le site utilise un balisage HTML valide. Suivez les spécifications HTML pour les scripts de sites Web. |
Vérifier l’accessibilité d’un site web de niveau AA
Grâce à la liste de vérification de l'accessibilité de niveau AA d'un site web, votre entreprise adopte une approche plus proactive pour créer et maintenir un site accessible. La plupart des mesures de suivi de cette liste de vérification de la conformité du site Web rendent votre site Web accessible à presque tous les utilisateurs.
Liste de contrôle de l'accessibilité au Web de niveau AA
| Ligne directrice | Ce que vous devez faire |
| Légende des vidéos en direct | Légende des vidéos en direct par l'intermédiaire d'un logiciel ou de services professionnels. |
| Description audio | Ajoutez des bandes sonores de description audio à n'importe quel contenu vidéo. Fournir un lien vers la bande sonore à proximité du contenu. |
| Contraste | Utilisez un fond clair et un texte sombre ou vice versa. |
| Redimensionner le texte | Empêcher que le texte redimensionné n'oblige les utilisateurs à faire défiler horizontalement. Permet de redimensionner le texte jusqu'à 200% |
| Images de texte | Éliminer toutes les images qui utilisent des images de texte pour transmettre du contenu. Utilisez CSS pour styliser le texte, comme pour les guillemets tirés. |
| Recherche de pages | Ajouter un sitemap HTML. Activer la recherche de site. Créez un menu de navigation logique. Rendez votre menu de navigation cohérent sur l'ensemble de votre site. |
| En-têtes et étiquettes | Rendre les en-têtes et les sous-titres simples et descriptifs. Étiquetez les éléments du site, comme les tableaux ou les formulaires. |
| Mise au point visible | Utilisez CSS pour ajouter des bordures ou des soulignements aux éléments lorsqu'ils sont sélectionnés par le clavier de l'utilisateur. Activer la visibilité de la mise au point du clavier sur tous les éléments du site, comme les menus, les champs de formulaire et les liens. |
| Langue des parties | Ajouter un attribut de langue aux pages dont le contenu n'est pas dans votre langue par défaut. |
| Navigation cohérente | Adoptez un emplacement universel pour votre menu de navigation et l'ordre des éléments dans le menu de navigation. |
| Identification cohérente | L'étiquette et les éléments de nom ayant la même fonction sont cohérents. Utilisez un texte alt identique pour les éléments ayant la même fonction. |
| Suggestion d'erreurs | Activez les éléments, comme les formulaires, pour identifier les erreurs de saisie. Communiquer les erreurs aux utilisateurs à l'aide de suggestions textuelles. |
| Prévention des erreurs | Rendre réversibles les modifications apportées aux données contrôlées par l'utilisateur, comme l'annulation d'une commande. Permettre aux utilisateurs de corriger les erreurs. Créez une page de confirmation qui détaille les commentaires de l'utilisateur et les résultats du site Web. |
Vérifier l’accessibilité d’un site web de niveau AAA
Avec la conformité de niveau AAA, votre entreprise adopte une approche agressive en matière d'accessibilité des sites Web. Bien que vous puissiez vous concentrer sur cette liste pour vérifier l'accessibilité d'un site Web, elle est souvent considérée comme trop agressive pour la plupart des sites. C'est pourquoi de nombreuses entreprises se concentrent sur le niveau AA.
Liste de contrôle de l'accessibilité au Web de niveau AAA
| Lignes directrices | Mesures à prendre |
| Langue des signes | Télécharger des versions vidéo alternatives en langue des signes. Placez les versions alternatives à proximité de la vidéo originale. |
| Description audio étendue | Créez des bandes sonores de description audio étendue avec suffisamment de pauses pour que les utilisateurs puissent les écouter et les comprendre. Placez les bandes sonores près de la vidéo originale. |
| Autre média | Rédiger une transcription en texte intégral. Placez la transcription près du contenu vidéo. |
| Live audio uniquement | Utiliser des sous-titres codés. Fournir le texte du script. |
| Contraste | Utilisez un fond sombre et un texte clair ou vice versa. |
| Audio de fond faible ou nul | Éliminer le bruit de fond de l'audio. Maintenir un bruit de fond de 20 décibels sous le bruit de premier plan. |
| Présentation visuelle | Utilisez des outils qui permettent aux utilisateurs de personnaliser les couleurs d'arrière-plan et d'avant-plan, l'espacement et la taille du texte. |
| Pas de chronométrage | Permettre des limites de temps pour les événements en temps réel uniquement, comme les ventes aux enchères ou les diffusions en direct. |
| Interruptions | Supprime les redirections qui se produisent après un certain temps. Éliminez les fenêtres contextuelles. |
| Réauthentifier | Sauvegarder les données des utilisateurs, comme les articles dans leur panier, lors de la ré-authentification de leur identité. |
| Emplacement | Utilisez la navigation par fil d'Ariane. Ajouter un sitemap. |
| Titres des sections | Ajouter des titres pertinents au contenu |
| Mots inhabituels | Évitez les expressions idiomatiques et le jargon Expliquez les mots dans le texte ou avec un lien vers une page pertinente. |
| Abréviations | Éliminer les abréviations ou expliquer les abréviations dans le contenu. |
| Niveau de lecture | Utilisez un outil de test de lisibilité, comme Translated Labs. Créez des images ou des diagrammes pour expliquer le contenu. |
| Prononciation | Lien vers les guides de prononciation des mots ou écrire la prononciation phonétique. |
Prêt pour la conformité WCAG ?
Grâce à cette liste de contrôle pour vérifier l'accessibilité d'un site Web, votre entreprise (et votre équipe) peut aller de l'avant pour se conformer aux WCAG. Si vous avez besoin d'aide, Metadosi dispose d'une équipe dédiée et expérimentée de concepteurs, développeurs et rédacteurs.
Nos services de conformité de site Web peuvent aider votre entreprise à cocher tout ce qui figure sur la liste de vérification de l'accessibilité de votre site Web. Explorez nos forfaits dès aujourd'hui !
