-
829 étudiants -
175 sites web -
15 critères -
32% accessible
En bref
Pour la dixième fois, AnySurfer a évalué, avec l'aide d'étudiants, l'accessibilité des sites web en Belgique. 32% des sites évalués ont obtenu un score honorable.
Qui a évalué les sites web?
829 étudiants de 11 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:
- Artesis Plantijn Hogeschool Antwerpen, bachelier graphique et design média
- EPHEC, bachelier en informatique
- Haute École Libre Mosane (HELMo), bachelier en informatique
- Henallux, bachelier en informatique
- HoGent Aalst, bachelier en informatique
- HoGent Gent, bachelier en informatique
- Howest Kortrijk, bachelier multimédia et communication
- Odisee Brussel, bachelier en informatique appliquée
- Thomas More Geel, bachelier en informatique
- UC Leuven-Limburg, bachelier en informatique
- Vives Kortrijk, bachelier en informatique appliquée
Quels sites ont été évalués?
L'échantillon est composé de 175 sites web belges tant francophones que néerlandophones. Ils sont répartis en 17 catégories. Environ un tiers de l'échantillon est nouveau par rapport à 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.
Résultats
32% des sites (56 sur 175) ont obtenu un score de 75% ou plus et peuvent donc être considérés comme accessibles dans le cadre de ce moniteur. 68% 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, sauf le dernier que nous avons changé.
Dans 22% 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 16 % 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 moitié des sites (61%), 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 42% 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 40% 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 69% 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.
42% des sites de l’échantillon ont des vidéos qui sont sous-titrées. 31% n’ont pas de vidéo du tout et 27% 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 45% 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.
79% 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 88% 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 70% des sites analysés c’est OK. Dans 26% des cas les formulaires ne sont pas bien construits. Il y a 4% 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 19% des sites où les messages d’erreur après validation du formulaire ne sont pas complets ou pas présents. Dans 75% des cas ils sont OK. 5% des sites n’ont pas de formulaires ou ne nécessitent pas de messages d'erreur.
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 26% des sites le contenu n'est pas bien lisible, ou l'utilisateur est obligé d'utiliser la barre de défilement horizontale quand il utilise le zoom du navigateur à 400%.
Impact
Les personnes malvoyantes qui utilisent le zoom du navigateur ainsi que les personnes qui consultent le site sur un smartphone ou sur un petit écran ne peuvent pas avoir accès à tout le contenu, ou bien sont obligées d'utiler le défilement horizontal pour lire le contenu.
Solution
Faire en sorte que le contenu s'adapte à la largeur de la fenêtre (site responsive) et que tout le contenu soit lisible dans cette configuration.
Interprétation des résultats
Sur 68% des sites, une personne avec un handicap rencontrera des obstacles 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.
L'amélioration de 10% du résultat s'explique par le changement du dernier critère. Nous avons remplacé un critère qui était majoritairement pas OK par un critère qui est OK à 75%. Pour toute une série de sites qui auraient eu un score juste en dessous de 75%, cela les a fait passer au dessus.
| 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% |
| 2020 | 32% |
