Test d'accessibilité

Dans les médias

Test d'accessibilité : Mon site internet est-il accessible ?

Le test d'accessibilité d'EXPERTE.com vous permet de déterminer si votre site internet est accessible. Cet outil parcourt votre site internet et vérifie si chacune des sous-page peut être affichée sans problème par les lecteurs d'écran, afin de vérifier que des utilisateurs aveugles et malvoyants peuvent également utiliser pleinement votre site internet.

Le test d'accessibilité vérifie 41 caractéristiques dans 8 catégories. Les catégories les plus importantes sont :

Navigation
Notre test vérifie si la navigation sur la page est accessible et cohérente.
ARIA
ARIA est une extension sémantique du langage HTML destinée à rendre les pages internet plus accessibles aux personnes handicapées. Notre test vérifie si cette extension est correctement implémentée.
Noms et étiquettes
Notre test vérifie, entre autres, si les champs de formulaire et les boutons sont indiqués par des étiquettes explicites et si les images ont un texte alternatif.
Contraste
Le texte à faible contraste est difficile ou impossible à lire pour de nombreux utilisateurs. Le test vérifie si le rapport de contraste des couleurs d'arrière-plan et de premier plan est suffisant.
Tableaux et listes
Les lecteurs d'écran offrent des fonctions qui simplifient la navigation dans les tableaux et les listes. Nous vérifions si ces fonctions ont été correctement mises en œuvre.
Audio et vidéo
Les utilisateurs sourds et malentendants peuvent mieux comprendre une vidéo si elle contient des sous-titres. Le test vérifie si les indications appropriées sont disponibles.
Internationalisation et localisation
Le texte d'une page internet doit être affiché correctement par un lecteur d'écran dans la langue indiquée. Le test vérifie si une langue valide est spécifiée.

Questions fréquentes et réponses

Que signifie l'accessibilité sur internet ?

⊖

Un site internet sans barrière est conçu de manière à ce que des personnes malvoyantes, aveugles et sourdes puissent également l'utiliser sans restriction.

Pourquoi mon site internet doit-il être accessible ?

⊖

Un site internet accessible permet à tout utilisateur d'utiliser votre offre sans restriction. Vous touchez un groupe cible plus large, augmentez la convivialité de votre site et contribuez à la participation numérique des personnes handicapées.

Comment fonctionne le test d'accessibilité ?

⊖

Après avoir saisi une URL, le test d'accessibilité EXPERTE.com parcourt votre site internet et vérifie l'accessibilité de chaque sous-page. Le test est basé sur l'outil open source Lighthouse. Il est possible de vérifier jusqu'à 500 URL. Le score indique l'accessibilité technique sur une échelle de 0 à 100.

Les contrôles d'accessibilité en détail

Vous trouverez ci-dessous la description de tous les contrôles effectués par notre test d'accessibilité.

Navigation


1.	Les valeurs `[accesskey]` sont uniques Les clés d'accès permettent aux utilisateurs de positionner rapidement le curseur dans une partie spécifique de la page. Pour les aider à naviguer correctement, pensez à définir des clés d'accès uniques.
2.	La page contient un titre, un lien "Ignorer" ou un point de repère En ajoutant des méthodes pour contourner les contenus répétitifs, vous permettez aux internautes qui utilisent un clavier de naviguer plus efficacement sur la page.
3.	Les attributs [id] sur des éléments sélectionnables actifs sont uniques Tous les éléments sélectionnables doivent être associés à un `id` unique pour qu'ils soient visibles par les technologies d'assistance.
4.	Les éléments d'en-tête sont classés séquentiellement par ordre décroissant Les en-têtes correctement classés qui respectent les niveaux transmettent la structure sémantique de la page, ce qui garantit une navigation plus aisée et permet d'identifier plus facilement dans quels cas utiliser les technologies d'assistance.
5.	Aucun élément n'a de valeur [tabindex] supérieure à 0 Une valeur supérieure à 0 implique un ordre de navigation explicite. Bien que cela soit valide d'un point de vue technique, cela crée souvent une expérience frustrante pour les utilisateurs qui s'appuient sur des technologies d'assistance.

ARIA


1.	*Les attributs [aria-] correspondent à leurs rôles** Chaque `role` ARIA est rattaché à un sous-ensemble spécifique d'attributs `aria-`. S'ils ne sont pas correctement associés, les attributs `aria-` ne seront pas valides.
2.	[aria-hidden="true"] ne figure pas sur le document <body> Les technologies d'assistance, telles que les lecteurs d'écran, présentent un fonctionnement irrégulier lorsque `aria-hidden="true"` est défini sur l'élément <body> du document.
3.	Les éléments [aria-hidden="true"] ne contiennent pas de descendants sélectionnables La présence de descendants sélectionnables dans un élément `[aria-hidden="true"]` empêche les utilisateurs de technologies d'assistance, telles que des lecteurs d'écran, de se servir de ces éléments interactifs.
4.	Les champs de saisie ARIA ont des noms accessibles Lorsqu'un champ de saisie n'a pas de nom accessible, les lecteurs d'écran l'annoncent avec un nom générique, ce qui le rend inutilisable pour les personnes qui se servent de tels outils.
5.	*Tous les éléments [role] contiennent les attributs [aria-] requis** Certains rôles ARIA ont des attributs obligatoires qui décrivent l'état de l'élément aux lecteurs d'écran.
6.	Les éléments ayant un [role] ARIA, qui exigent que les enfants incluent un [role] spécifique, possèdent tous les enfants requis. Certains rôles ARIA parents doivent contenir des rôles enfants spécifiques afin de remplir correctement leurs fonctions d'accessibilité.
7.	Les éléments [role] sont inclus dans l'élément parent approprié Certains rôles ARIA enfants doivent être inclus dans un rôle parent spécifique afin de remplir correctement leurs fonctions d'accessibilité.
8.	Les valeurs [role] sont valides Les rôles ARIA doivent comporter des valeurs valides afin de remplir correctement leurs fonctions d'accessibilité.
9.	Les champs d'activation/de désactivation ARIA ont des noms accessibles Lorsqu'un champ d'activation/de désactivation n'a pas de nom accessible, les lecteurs d'écran l'annoncent avec un nom générique, ce qui le rend inutilisable pour les personnes qui se servent de tels outils.
10.	*Les attributs [aria-] ont des valeurs valides** Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas interpréter les attributs ARIA si leurs valeurs ne sont pas valides.
11.	*Les attributs [aria-] sont valides et correctement orthographiés** Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas interpréter les attributs ARIA si leurs noms ne sont pas valides.
12.	Les ID ARIA sont uniques La valeur d'un ID ARIA doit être unique afin que les différentes instances soient toutes prises en compte par les technologies d'assistance.

Noms et étiquettes


1.	Les boutons ont un nom accessible Lorsqu'un bouton n'a pas de nom accessible, les lecteurs d'écran annoncent simplement qu'il s'agit d'un "bouton", ce qui le rend inutilisable pour les personnes qui se servent de tels outils.
2.	Le document contient un élément <title> Le titre donne aux utilisateurs de lecteurs d'écran un aperçu de la page. En outre, les moteurs de recherche s'appuient principalement sur ce dernier pour déterminer la pertinence du contenu proposé.
3.	Aucun champ de formulaire ne comporte plusieurs libellés Les champs de formulaire comprenant plusieurs libellés peuvent être annoncés par les technologies d'assistance comme des lecteurs d'écran utilisant le premier, le dernier ou tous les libellés, ce qui peut prêter à confusion.
4.	Les éléments <frame> ou <iframe> ont un titre Les lecteurs d'écran s'appuient sur le titre des frames pour décrire le contenu de ces derniers aux utilisateurs.
5.	Les éléments d'image possèdent des attributs [alt] Les éléments informatifs doivent contenir un texte de substitution court et descriptif.
6.	Les éléments <input type="image"> contiennent du texte [alt] Lorsqu'une image est utilisée comme bouton `<input>`, vous pouvez aider les utilisateurs de lecteurs d'écran à comprendre son utilité en ajoutant un texte de substitution.
7.	Les éléments de formulaire sont associés à des libellés Les libellés permettent de s'assurer que les éléments de contrôle des formulaires sont énoncés correctement par les technologies d'assistance, comme les lecteurs d'écran.
8.	Les liens ont un nom visible Rédigez du texte visible et unique pour les liens (et pour le texte de substitution des images, si vous vous en servez dans des liens), afin que les utilisateurs de lecteurs d'écran puissent facilement positionner le curseur dessus et bénéficient d'une meilleure expérience de navigation.
9.	Les éléments <object> contiennent du texte [alt] Les lecteurs d'écran ne peuvent pas traduire les contenus non textuels. En ajoutant un texte de substitution aux éléments <object>, vous aiderez les lecteurs d'écran à transmettre votre message aux utilisateurs.

Contraste


1.	Les couleurs d'arrière-plan et de premier plan sont suffisamment contrastées Un texte faiblement contrasté est difficile, voire impossible à lire pour de nombreux utilisateurs.

Tableaux et listes


1.	Les éléments <dl> ne contiennent que des groupes <dt> et <dd> ainsi que des éléments <script>, <template> ou <div> dans le bon ordre Si les listes de définition ne sont pas correctement balisées, les lecteurs d'écran risquent de donner des résultats confus ou imprécis.
2.	Les éléments de liste de définition sont encapsulés dans des éléments <dl> Les éléments de liste de définition (<dt> et <dd>) doivent être encapsulés dans un élément <dl> parent afin que les lecteurs d'écran puissent les énoncer correctement.
3.	Les listes contiennent uniquement des éléments <li> et des éléments de type script (<script> et <template>) Les lecteurs d'écran ont une façon spécifique d'énoncer les listes. Pour leur permettre de donner de bons résultats, pensez à bien structurer ces dernières.
4.	Les éléments de liste (<li>) sont inclus dans des éléments parents <ul> ou <ol> Les lecteurs d'écran requièrent que les éléments de liste (<li>) soient contenus dans un élément parent <ul> ou <ol> pour les énoncer correctement.
5.	Les cellules d'un élément <table> qui utilisent l'attribut [headers] font référence à des cellules figurant dans le même tableau Les lecteurs d'écran proposent des fonctionnalités qui permettent de naviguer plus simplement dans les tableaux. En vous assurant que les cellules <td> qui comportent l'attribut [headers] fassent référence à d'autres cellules dans le même tableau uniquement, vous pourrez améliorer l'expérience des utilisateurs de lecteurs d'écran.
6.	Les éléments <th> et ceux portant l'attribut [role="columnheader"/"rowheader"] décrivent des cellules de données Les lecteurs d'écran proposent des fonctionnalités qui permettent de naviguer plus simplement dans les tableaux. En vous assurant que les en-têtes de tableaux fassent toujours référence à un ensemble de cellules spécifique, vous pourrez améliorer l'expérience des utilisateurs de lecteurs d'écran.

Bonnes pratiques


1.	Le document n'utilise pas de balise Meta <meta http-equiv="refresh"> Les utilisateurs ne s'attendent pas à ce qu'une page s'actualise automatiquement. De plus, lorsque cela se produit, le curseur est aussitôt repositionné en haut de la page. Cela peut générer de la frustration et perturber l'expérience utilisateur.
2.	[user-scalable="no"] n'est pas utilisé dans l'élément <meta name="viewport">, et l'attribut [maximum-scale] n'est pas inférieur à 5 La désactivation de la fonction de zoom peut être problématique pour les utilisateurs qui ne voient pas bien et qui ont besoin d'agrandir le contenu d'une page Web pour en saisir le sens.

Audio et vidéo


1.	Les éléments <video> contiennent un élément <track> avec [kind="captions"] Le fait d'ajouter des sous-titres à une vidéo rend cette dernière plus accessible aux personnes sourdes et malentendantes.

Internationalisation et localisation


1.	L'élément <html> contient un attribut [lang] Lorsqu'une page ne spécifie pas d'attribut "lang", les lecteurs d'écran considèrent qu'elle est rédigée dans la langue par défaut sélectionnée au moment de leur configuration par l'utilisateur. Si la page n'est pas rédigée dans cette langue par défaut, les lecteurs d'écran risquent de ne pas énoncer correctement son contenu.
2.	La valeur de l'attribut [lang] de l'élément <html> est valide Le fait de spécifier une langue BCP 47 valide permet d'aider les lecteurs d'écran à énoncer correctement le texte.
3.	Les attributs [lang] ont une valeur valide Le fait de spécifier une langue BCP 47 valide pour les éléments permet de s'assurer que le texte sera prononcé correctement par les lecteurs d'écran.

Top Logiciels de création de site web 2024

Sponsorisé

dès 0,00 €

par mois

Wix

9,9

Résultat

très bien

dès 11,00 €

par mois

Squarespace

9,4

Résultat

très bien

dès 0,00 €

par mois

Webflow

8,8

Résultat

bien

dès 17,12 €

par mois

Duda

8,6

Résultat

bien

tout afficher

Auteur: Janis von Bleichert

Janis von Bleichert a étudié l'informatique de gestion à l'université technique de Munich et l'informatique à l'université technique de Berlin. Il est indépendant depuis 2006 et a fondé EXPERTE.com. Il écrit sur les thèmes de l'hébergement, des logiciels et de la sécurité informatique.

Plus d'informations sur le sujet

EXPERTE.com Outils site web