Moniteur de l'accessibilité 2018

Toegankelijkheidsmonitor 2018

  • 1070 étudiants
  • 186 sites web
  • 15 critères
  • 24% 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 une amélioration notable :

  • de 18% de sites accessibles en 2017, nous sommes passés à 24% de sites accessibles en 2018. L’augmentation que nous avons pu observer l’année dernière se confirme clairement.

  • mais 76% des sites sont encore insuffisamment accessibles.

Cette année encore nous avons pu compter sur l'aide de 1070 étudiants qui au cours de l'année académique 2017-2018 ont collaboré à ce moniteur de l'accessibilité. Ils ont analysé un échantillon de 186 sites web (13 de plus que l'année passée). Plus d'infos sur le déroulement du projet et la méthodologie.

Resultats par année
  • 24% 2018
  • 18% 2017
  • 15% 2015
  • 14% 2013
  • 13% 2012
  • 8% 2011
  • 10% 2010
  • 7% 2009
  • 4% 2007
Resultats par année

Échantillon

L'échantillon de 186 sites web contient des sites web belges tant francophones que néerlandophones. Il a pour but de nous donner une idée globale de l'accessibilité du paysage internet belge. Les catégories sont le mêmes que l'année passé auxquelles nous avons ajouté la catégorie "Gouvernements" en prévision de la future législation concernant l'accessibilité des sites webs du secteur public. Cette année, les 15 catégories de sites sont les suivantes:

Resultats

44 des 186 sites de l'échantillon général (23,7%) 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

Dans 20% 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 21 % 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 (59%), 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 38% 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 97% 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 63% 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.

27% des sites de l’échantillon ont des vidéos qui sont sous-titrées. 23% n’ont pas de vidéo du tout et 50% 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 44% 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.

76% 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 93% 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 77% des cas ils sont OK. 3% 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 (75%), 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

Les pourcentages par critère sont forts similaires à ceux de l’édition précédente. Nous observons une grande amélioration dans la différence visuelle entre un lien et le texte environnant (de 52% à 62%). Le sous-titrage des vidéos qui passe de 43% à 50% et le code source valide de 18% à 25% sont deux autres points en forte progression.

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é;
  • 60 % des sites ne sont pas utilisables au clavier;
  • Sur 63% des sites il y a des images dont les alternatives textuelles sont incorrectes;
  • 50% des sites proposent des vidéos non sous-titrées;
  • Sur 44% des sites, le texte n'a pas suffisamment de contraste avec l'arrière-plan et 38% 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 Odisee PXL Thomas More UCLL IFOSUP Wavre Artesis Plantijn Hogeschool Antwerpen

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

Contact