Moniteur de l'accessibilité 2019

Toegankelijkheidsmonitor 2019

  • 1186 étudiants
  • 210 sites web
  • 15 critères
  • 22% accessible

En bref

Pour la neuvième fois, AnySurfer a évalué, avec l'aide d'étudiants, l'accessibilité des sites web en Belgique. 22% des sites évalués ont obtenu un score honorable.

Qui a évalué les sites web?

1186 étudiants de 17 hautes écoles ont examiné chacun 2 sites web de l'échantillon. Ces étudiants apprennent à développer des sites web dans le cadre de leur formation.

AnySurfer remercie les professeurs et étudiants des écoles participantes:

Quels sites ont été évalués?

L'échantillon est composé de 210 sites web belges tant francophones que néerlandophones. Ils sont répartis en 18 catégories, dont deux sont nouvelles cette année : partis politiques et hopitaux. Environ un tiers de l'échantillon est nouveau et il compte 24 sites de plus que l'année passée.

Quelle méthode a été utilisée?

Comme les années précédentes, les étudiants ont utilisé une méthode de test simplifiée, le Quickscan. Ils ont évalué chaque site sur 15 critères. La plupart des sites ont été évalués par 6 étudiants. Ensuite AnySurfer a consolidé les résultats. Les critères de test sont énumérés plus bas.

Lire plus sur la méthodologie utilisée.

Résultats

22% des sites (46 sur 210) ont obtenu un score de 75% ou plus et peuvent donc être considérés comme accessibles dans le cadre de ce moniteur. 78% des sites ne sont pas suffisamment accessibles.

Résultat moyen par critère

Les critères sont les mêmes que ceux de l'année passée.

Dans 18% des sites analysés, les titres de pages, qui apparaissent dans les onglets du navigateur, n’indiquent pas clairement sur quelle page du site on se trouve.

Impact

Le titre d'une page est le premier élément lu par les lecteurs d'écran. Il apparaît dans les onglets du navigateur ainsi que dans les résultats des moteurs de recherche. Quand il n’est pas pertinent, cela rend l’orientation et la navigation plus difficiles, surtout pour les personnes aveugles ou malvoyantes.

Solution

La solution est en général très facile à mettre en œuvre : le rédacteur donne un titre unique à chaque page, et le système de gestion du contenu ajoute automatiquement le nom du site à la fin du titre.

Ce critère est bien respecté dans la grande majorité des sites. Mais sur 22 % des sites la langue des pages n’est pas correctement indiquée.

Impact

Lors de la lecture du site avec un lecteur d’écran, la synthèse vocale s’adapte à la langue spécifiée dans le contenu. Quand la langue est mal indiquée, le contenu est incompréhensible car lu avec la mauvaise prononciation.

Solution

La solution est très facile à mettre en œuvre. Il faut définir la langue au moyen de l'attribut lang dans les templates.

Sur plus de la grande majorité des sites (72%), le focus (par exemple un petit cadre en pointillés) n’est pas visible lors de la navigation.

Impact

Quand on parcourt une page web avec la touche TAB du clavier, si on ne voit pas à quel endroit l’on se trouve dans la page, la navigation est impossible. Ce sont surtout les personnes avec un handicap moteur qui seront affectées.

Solution

Il suffit de supprimer ou d’adapter quelques lignes dans les feuilles de style (CSS) du site pour corriger le problème.

Plus de la moitié des sites de l’échantillon (60%) ne sont pas utilisables au clavier.

Impact

C’est bloquant pour toutes les personnes qui ne peuvent pas utiliser de souris. Ce sont les personnes aveugles et les personnes ayant un handicap moteur qui sont les plus affectées.

Solution

En général ce sont les composants dynamiques (menus déroulants, onglets, accordéons, etc) qui posent problème. Quand c’est le cas, les problèmes d’accessibilité au clavier peuvent être lourds à corriger. Il existe des composants accessibles. Le mieux c’est de penser à l’accessibilité au clavier lors de la conception du site et de choisir ou développer des composants accessibles.

Sur 49% des sites il y a du mouvement qui ne peut être arrêté. Le plus souvent c’est un diaporama, mais d’autres types de mouvement peuvent aussi poser problème.

Impact

La présence de mouvement sur une page rend la lecture et la concentration plus difficile pour tout le monde. Mais pour les personnes qui ont un trouble de l’attention ou une dyslexie, la présence de mouvement peut rendre le contenu impossible à lire.

Solution

La solution est assez simple. Il suffit d’ajouter un moyen pour arrêter le mouvement (bouton ‘pause’).

Ce critère a trait aux liens qui se trouvent dans des paragraphes de texte. Traditionnellement les liens sont soulignés, ce qui permet de facilement les localiser. Sur 33% des sites de cet échantillon on trouve des liens qui ne se distinguent du texte que par la couleur.

Impact

Quand les liens ressemblent fort au texte dans lequel ils se trouvent, ils sautent moins aux yeux. Les personnes qui ne distinguent pas les couleurs et les personnes malvoyantes auront du mal à les trouver.

Solution

La solution est simple. Il suffit en général de modifier une ou deux lignes de CSS pour que tous les liens qui se trouvent dans du texte soient facilement reconnaissables (par exemple soulignés ou en gras).

Ce critère est globalement respecté puisque sur 93% des sites les intitulés des liens sont suffisamment clairs.

Impact

Des intitulés de liens significatifs permettent d’éviter des surprises lors de la navigation. Ils sont très importants pour les personnes qui n’ont pas la vue d’ensemble de la page et qui ne peuvent pas s’aider du contexte pour déduire la destination d’un lien.

Solution

Éviter les liens de type 'cliquez ici'. La seule difficulté est le nombre d’erreurs à corriger si le site a beaucoup de pages. Il faut surtout former les rédacteurs pour éviter des erreurs dans le futur.

Sur 76% des sites de l’échantillon il y a des images qui n’ont pas d’alternative textuelle, ou une alternative textuelle incorrecte.

Impact

Quand une image est porteuse d’information, l’absence d’alternative textuelle signifie que cette information n’est pas disponible pour les personnes qui utilisent un lecteur d’écran.

Solution

Chaque fois qu’une image est insérée, il faut ajouter une alternative textuelle dans le champ prévu pour cela, ou laisser l'alternative textuelle vide si l'image est décorative. Quand c’est fait au fur et à mesure, cela ne prend pas beaucoup de temps. Quand il faut passer en revue tout un site pour le faire après coup, cela peut prendre beaucoup de temps.

38% des sites de l’échantillon ont des vidéos qui sont sous-titrées. 14% n’ont pas de vidéo du tout et 48% ont des vidéos non sous-titrées.

Impact

L’absence de sous-titrage signifie que le contenu de la vidéo n’est pas accessible aux personnes sourdes et malentendantes.

Solution

Il faut prévoir le sous-titrage lors de la création de la vidéo. Il est possible de sous-traiter la création de sous-titres à des professionnels. Mais il est également possible de facilement insérer des sous-titres soi-même en utilisant des outils disponibles en ligne.

Sur 42% des sites les contrastes sont en dessous minimum demandé (4,5 pour le texte de taille normale et 3 pour les titres plus grands)

Impact

Un contraste trop faible peut rendre un texte illisible pour les personnes malvoyantes. Mais un mauvais contraste rend la lecture plus difficile pour tout le monde, surtout sur un mauvais écran ou quand la luminosité est trop forte.

Solution

Au moment du design, il faut choisir des combinaisons de couleurs qui ont des contrastes suffisants. De nombreux outils existent pour mesurer les contrastes. S’il faut modifier les contrastes sur un site existant, cela peut se faire assez facilement en modifient les valeurs des propriétés de couleurs.

71% des sites utilisent les niveaux de titres (h1, h2, h3,...) correctement.

Impact

Quand les titres sont indiqués uniquement visuellement mais pas dans le code, les logiciels tels que lecteurs d’écrans ou autres aides techniques n’ont pas accès à la structure de la page. Une personne aveugle voit le contenu de la page comme un long bloc de texte sans aucune structure.

Solution

Les rédacteurs doivent donner de la structure au contenu en utilisant les différents niveaux de titres prévus à bon escient, pour que la structure des titres dans la page reflète la table des matières de la page.

Ce point est presque toujours OK (dans 90% des cas).

Impact

L’utilisation de listes permet également de structurer les pages. Quand des éléments comme des listes à puces ou des menus de navigation ne sont pas des listes dans le code, la structure est uniquement visuelle et les utilisateurs d’aide techniques n’en bénéficient pas. Ils auront plus de mal à s’orienter dans le contenu.

Solution

Il faut utiliser les listes à bon escient, lors du développement et de la validation.

Dans 72% des sites analysés c’est OK. Dans 27% des cas les formulaires ne sont pas bien construits. Il y a 1% des sites où l’on n’a pas trouvé de formulaires.

Impact

Quand les champs de formulaire ne sont pas reliés à leur label, un logiciel ne pourra pas faire le lien entre les deux éléments. Le formulaire sera très difficile à remplir avec un lecteur d’écran ou une reconnaissance vocale. L’utilisateur risque plus de faire des erreurs et de subir un time-out.

Solution

Au moment du développement du formulaire, il faut utiliser les balises et attributs html correctement: l'attribut for du label doit être égal à l'attribut id du champ correspondant.

Il y a 20% des sites où les messages d’erreur après validation du formulaire ne sont pas complets ou pas présents. Dans 78% des cas ils sont OK. 2% des sites n’ont pas de formulaires.

Impact

Quand les erreurs ne sont pas indiquées clairement au moyen de texte, différents types d’utilisateurs risquent de ne pas comprendre quelles sont les erreurs à corriger. Des utilisateurs pour qui le remplissage du formulaire demande plus d’efforts que pour la moyenne risquent de renoncer à le remplir.

Solution

Veiller à ce que tous les messages d’erreur soient exprimés sous forme de texte bien explicite.

Sur la grande majorité des sites (79%), le code HTML n'est pas entièrement valide.

Impact

Quand le code source n’est pas valide, il y a plus de risques d’erreurs lors de la consultation avec des aides techniques, car le code risque de ne pas être interprété de la même manière par tous les logiciels.

Solution

Pour prévenir les problèmes, suivre les standards lors du développement. Pour détecter les erreurs et ensuite les corriger, utiliser le validateur du W3C.

pourcentage moyen obtenu pour chaque critère d'évaluation

Interprétation des résultats

En 12 ans les sites sont devenus un petit peu plus accessibles, mais l'évolution est très lente et les résultats encore très loin d'être bons.

Sur 78% des sites, une personne avec un handicap rencontrera des obstables qui l'empècheront par exemple de faire des courses en ligne, de se renseigner sur une activité culturelle, de suivre l'actualité ou de contacter un service de sa commune.

Résultat par année
Année Résultat
2007 4%
2008 -
2009 7%
2010 10%
2011 8%
2012 13%
2013 14%
2014 -
2015 15%
2016 -
2017 18%
2018 24%
2019 22%

Contact