Moniteur de l'accessibilité 2017

  • 1124 étudiants
  • 173 sites web
  • 15 critères
  • 18% accessible

Les résultats du moniteur de l'accessibilité de cette année sont dans la lignée de ceux des années précédentes, avec cette année encore une légère amélioration:

  • depuis 2015 nous sommes passés de 14,8% à 17,9% de sites accessibles

  • mais 82,1% de sites sont encore insuffisamment accessibles.

Les résultats de cette année sont le fruit de l'analyse de 173 sites web par 1124 étudiants au cours de l'année scolaire 2016-2017. Plus d'infos sur le déroulement du projet et la méthodologie.

Résultats par année
  • 17,9% 2017
  • 14,8% 2015
  • 14,2% 2013
  • 12,6% 2012
  • 8,4% 2011
  • 9,7% 2010
  • 7% 2009
  • 4% 2007
résultats par année

Échantillon

L'échantillon de 173 sites web contient des sites web belges aussi bien francophones que néerlandophones. Il a pour but de nous donner une idée globale de l'accessibilité du paysage internet belge. Cette année, les catégories de sites sont:

Résultats

31 des 173 sites de l'échantillon général (17,9%) ont obtenu un score de 75% ou plus et peuvent donc être considérés comme accessibles selon les critères de cette étude.

Résultat moyen par critère

Cette année un critère a été modifié par rapport aux années précédentes. Il ne nous semblait plus pertinent d'avoir un critère pour les objets Flash. Nous l'avons remplacé par un critère sur la langue des pages. Les autres critères sont identiques à ceux de l'année passée.

Dans 25% 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 site.

Ce critère est bien respecté dans la grande majorité des sites. Mais sur 19 % 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, 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 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 51% 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 30% 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 91% 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 68% 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.

15% des sites de l’échantillon ont des vidéos qui sont sous-titrées. 28% n’ont pas de vidéo du tout et 57% 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 52% des sites les contrastes sont OK. Sur 48% des sites, il y a des éléments dont le contraste est insuffisant.48% des sites utilisent des combinaisons de couleurs dont le contraste est en dessous du contraste minimum recommandé (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.

75% 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 94% 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 63% des sites analysés c’est OK. Dans 35% des cas les formulaires ne sont pas bien construits. Il y a 2% 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 28% des sites où les messages d’erreur après validation du formulaire ne sont pas complets ou pas présents. Dans 70% 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, 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

Analyse

Quand on regarde les scores de manière globale, les points qui sont plutôt bien gérés sont : les titres de pages, la langue des pages et la sémantique de base (utilisation correcte de listes et de titres).

Les points faibles sont variés et affectent divers publics:

  • Sur plus de la moitié des sites web il y a du mouvement, souvent un diaporama, qui ne peut pas être arrêté;
  • 65 % des sites ne sont pas utilisables au clavier;
  • Sur 68% des sites il y a des images dont les alternatives textuelles sont incorrectes;
  • 57% des sites proposent des vidéos non sous-titrées;
  • Sur 48% des sites, le texte n'a pas suffisamment de contraste avec l'arrière-plan et 48% des sites il est difficile de distinguer les liens du texte environnant.

Écoles participantes

Ephec Erasmus hogeschool Brussel HEB ESI Haute Ecole de la Province de Liège HoGent HoWest De Hogeschool Westvlaanderen Odisee PXL Thomas More UCLL

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

Contact
Hosted by Openminds