L'accessibilité des sites web, des normes et un état d'esprit...

Les autorités du web et d'ailleurs s'accordent à produire des normes d'accessibilité à l'attention du public en situation de handicap. Mais l'accessiblité s'adresse plus généralement à toute personne en situation d’inconfort sur un mobile ou une tablette par exemple. Un enjeu si important qu’il en est devenu une norme obligatoire pour les sites des institutions publiques depuis la loi du 11 janvier 2005 sur l’égalité des droits et des chances des personnes handicapées. Pourtant, l’accessibilité du web peine à être appliquée. Jetons un coup d’œil sur les solutions que nous utilisons pour assurer un certain niveau d’accessibilité de nos sites Drupal. 

Qu’est-ce que l’accessibilité web ?

L’accessibilité du web est la capacité à un site internet à rendre son contenu accessible pour tout le monde. Cette norme établie dans le cadre de la WAI (Web Accessibility Initiative) du W3C, a été mise au point pour les personnes handicapées ainsi que les seniors. Quelque soit le handicap ou la déficience, l'internaute doit être en mesure de percevoir, de comprendre, de naviguer et d’interagir facilement avec le site web. Toutefois, l’accessibilité web ne se résume pas seulement à l’UX, elle concerne tous les utilisateurs.

Si l’accessibilité n’est pas obligatoire pour les sites du secteur privé, elle a été en revanche imposée pour les institutions publiques depuis la loi du 11 janvier 2005, dont l’article 47 dispose de la défense de «  l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » et mentionne également « les services de communication publique en ligne des services de l'État, des collectivités territoriales et des établissements publics qui en dépendent (qui) doivent être accessibles aux personnes handicapées ».

L’accessibilité est vivement recommandée, puisqu’elle pourrait être prochainement imposée pour les entreprises depuis l’annonce de la Commission Européenne qui envisage une politique favorisant l’accessibilité numérique étendue également aux produits et services du secteur privé. Par ailleurs, prenons le cas des services d’offres d’emploi en ligne ou la partie « Candidature » d’un site, le fait que le service ne soit pas accessible par des personnes ayant un handicape contrevient au principe d'égalite de l'accès à l'emploi. 

Les normes d’accessibilité web

Il existe de nombreuses mesures destinées à améliorer l'accessibilité d'un site web, normatives ou simples recommandations, elles encouragent à respecter des optimisations du design et de l’UX, des optimisations dans le code, l'utilisation de technologies au détriment d'autres… Chez bluedrop.fr, nous avons eu l’occasion de travailler avec de nombreuses institutions publiques où l’accessibilité n’est pas une option mais une obligation. Cela nous a permis de nous pencher sur la problématique de l’accessibilité web.

Si vous souhaitez rendre votre site accessible, il existe un ensemble de règles à suivre qui permettent d’optimiser la construction de votre site pour le rendre accessible. Les normes sont nombreuses et englobent des règles qui sont plus ou moins similaires d’un référentiel à un autre. Chacune d'elle doit faire l'objet de transactions au moment de la conception. Au niveau international, il y a notamment :

• WAI (Web Accessibility Initiative) : fondée par le W3C vers la fin des années 90, la WAI propose des solutions techniques pour rendre le web accessible aux personnes handicapées.  Le groupe de travail de la WAI a mis au point les normes WAI-ARIA.
• WAI-ARIA (Web Accessibility Initiative – Accessible Rich Interactive Applications) : c’est une extension de la norme WAI qui permet de compléter les règles d’accessibilités notamment dans le cas de modules complexes. Les normes WAI-ARIA proposent entre autres des marqueurs sémantiques et de métadonnées aux contenus HTML pour favoriser l’accessibilité de l’interface et du contenu. Ces marqueurs sont notamment ajoutés à des outils tels que les lecteurs d’écrans.  Les WAI-ARIA sont utiles pour optimiser l’accessibilité des applications interactives riches.
• WCAG (Web Content Accessibility Guidlines): éditées par la WAI, c’est une des recommandations les plus importantes dans le domaine de l’accessibilité web. Elle se compose de trois niveaux : A, AA et AAA. Plus vous tendez vers le triple A et plus les règles d’accessibilité deviennent strictes et difficilement à mettre en place. Le double AA étant un niveau d’accessibilité correcte. Le WCAG repose sur 4 règles principales :
  • « Perceptible » : c'est-à-dire que tout le contenu non textuel comme les images et les vidéos doivent avoir une alternative textuelle de description ;
  • « Utilisable » : cela signifie que les éléments de l’interface et de la navigation doivent être accessibles à la souris et au clavier
  • « Compréhensible » : les visiteurs doivent être en mesure de comprendre l’information et le fonctionnement de l’interface.
  • « Robuste » : le contenu doit être accessible quelque soit l’outil de navigation utilisé.

Au niveau national, nous avons :

• RGAA (Référentiel Général d’Accessibilité pour les administrations » : c’est ce référentiel qui impose l’obligation de rendre les sites accessibles pour les institutions publiques. Il regroupe un ensemble de règles qui fixent le cadre référentiel d’accessibilité des services de communication publique sur Internet.
• AccessiWeb : c’est le référentiel édité par l’association française BrailleNet, membre du W3C, qui a notamment collaboré dans la rédaction du RGAA. Celui-ci repose sur les recommandations du WCAG et propose une méthode d’application pour respecter les recommandations internationales. Suite à un processus de vérification selon les critères Bronze, Argent, et Or décrivant le niveau d’accessibilité, l’association propose une labellisation privée « AccessiWeb » qui garantit la conformité aux critères du référentiel AccessiWeb, mais qui n'a aucune autorité normative.

Quel référentiel choisir ?

Si vous êtes un organisme public en France, vous avez l’obligation de vous référer aux normes du RGAA pour certifier que votre site est accessible, suivant le niveau d’accessibilité que vous souhaitez atteindre.

Si vous avez un site privé, vous avez le choix entre de nombreuses normes : internationales, européennes, voire nationales. Les référentiels se diffèrent de leurs critères et méthodes d’évaluation. Ainsi, votre choix sera influencé entre autres par :

• Le niveau d’accessibilité que vous souhaitez atteindre : atteindre un niveau d’accessibilité maximal est difficile voire parfois impossible puisqu’il implique de faire un compromis avec d’autres éléments comme la personnalisation du design, l’expérience utilisateur, les services proposés, les animations front-end, etc. Pour cela, il faut vérifier si les critères du référentiel conviennent à l'équipe projet. Bien que les principes se rejoignent, les critères sont différents d’un référentiel à un autre, certains étant plus stricts que d’autres.
• Le budget : le respect et la mise en œuvre de l’accessibilité d’un site implique un travail additionnel proportionnel au niveau d’accessibilité souhaité. Ce travail engendre du développement, de la mise en conformité, du conseil, de l’assistance, des recettes, des audits, des déclarations de conformité et / ou de labellisation, ce qui induit inévitablement de mobiliser des ressources humaines et financières supplémentaires. 

Autres  solutions pour rendre votre site accessible 

Rendre son site accessible n’est pas seulement une optimisation du code. On entend souvent dire que seulement 30% de l’accessibilité d’un site est lié au code, le reste se trouve ailleurs : webdesign, UX, contenu, ergonomie, dispositif d’assistance selon le handicap, etc. Nous avons listé quelques modules que nous utilisons chez bluedrop.fr pour répondre aux besoins d’accessibilité des sites Drupal. Attention, ces outils ne vont pas permettre de certifier que votre site est accessible, ils sont seulement vous aider à optimiser l’accessibilité de votre site.

Opquast

Opquast propose une certification et une extension pour Firefox qui permet d’effectuer plus de 450 tests automatiques pour vérifier plusieurs éléments dont l’accessibilité. En effet, il permet d’analyser une page web grâce à plusieurs tests, notamment :

• Opquast Bonnes pratiques qualité web ;
• RGAA ;
• Opquast Accessibility First step : error detection ;
• Opquast Accessibility second step: risk management.
• Accessiweb liste déployée ;
• Accessiweb liste générale.

Ce plugin est intéressant puisqu’il indique les résultats dont les problèmes et leur emplacement. Il propose d’exporter les résultats notamment sous format CSV.

Axe-cli

Axe-cli est un module Node.js développé par Deque University qui permet de tester l’accessibilité d’un site en ligne de commande. Pour cela, il faut :

• installer Node.js en version 6 ;
• installer axe-cli ;
• installer les webdrivers (pilote pour navigateur web) des navigateurs que vous souhaitez utiliser.

Après cela, vous pouvez utiliser la commande axe dans votre CLI, suivie de l’URL de la page que souhaitez tester. Il est possible de tester plusieurs pages à la fois, il faut simplement ajouter autant d’URL que nécessaire dans la commande. Le HTTP étant utilisé par défaut.

Il est également possible d’utiliser des règles spécifiques pour affiner votre test, en utilisant des tags comme par exemple « rules color-contrat ». De plus, vous pouvez réaliser votre test avec n’importe quel règle notamment la liste complète des règles du WCAG2. Ce module est pratique puisqu’il permet de délimiter la zone de la page à tester, en utilisant –include et –exclude. Concernant les résultats, il est possible de les sauvegarder en JSON.

Fangs

Fangs est une autre extension pour Firefox qui permet d’afficher le texte de la page tel qu’il serait lu par un lecteur d’écran pour personnes malvoyantes. En effet, ce simulateur permet d’avoir le rendu de votre page web au travers d’un lecteur d’écran et vous montre ce qu’endurent les personnes handicapées qui souhaitent naviguer sur le site. 

Ainsi, avec ce plugin, il est possible de voir les éléments qui ne sont pas accessibles et de les optimiser. Fangs peut s’avérer pertinent compte tenu des prix exorbitants des lecteurs d’écran pour les personnes handicapées.  

Wave

Wave est un outil d’évaluation de l’accessibilité pour aider les développeurs à rendre le contenu d’un site web plus accessible. Il permet de passer en revu les pages de votre site internet et présente les résultats sous forme d’icônes de couleurs dans un bloc en haut à gauche. Il signale entre autres:

• En rouge : les erreurs d’accessibilité ;
• En jaune : les alertes ;
• En vert : les fonctionnalités pour l’accessibilité ;
• En bleu : les éléments de structures ;
• En mauve : le HTML5 et ARIA ;
• En noir : les erreurs de contraste.

En cliquant sur les icônes, une bulle justificative vous explique l’erreur, l’alerte, etc.  Comment utiliser Wave ? C’est très simple, il vous suffit soit d’installer l’extension Firefox Wave soit de vous rendre sur wave.webaim.org et d’entrer dans le champ l’URL de votre site à tester. 

FireEyes

Similaire à Wave, FireEyes est une extension pour Firefox développé par Deque University qui permet de disposer dans l’analyse du code, d’un onglet supplémentaire appelé « Accessibility ». En cliquant sur celui-ci, l’extension analyse la page et vous délivre toutes les erreurs détaillées liées à l’accessibilité.

Les attributs ARIA

Aria (Accessible Rich Internet Applications) est un ensemble d’attributs qui permettent de créer du contenu et des applications web plus accessibles pour les personnes handicapées (notamment celles qui sont conçues avec Ajax et JavaScript). Ces attributs peuvent être ajoutés à n’importe quel langage de balisage, en particulier le HTML. Mis en œuvre dans les navigateurs et les écrans, ARIA fournit des éléments sémantiques supplémentaires pour décrire le rôle, l’état et la fonction des contrôles d’interfaces utilisateurs.

Par exemple, l’attribut role définit le type général d’un objet (article, alerte, etc.). Il est possible d’ajouter d’autres attributs ARIA qui permettent de fournir des propriétés comme la description d’un formulaire. Les attributs ARIA permettent entre autres :

• D’autoriser des points de repères de navigations accessibles ;
• Les widgets JavaScript ;
• Les suggestions pour les formulaires ;
• Les messages d’erreurs ;
• La mise à jour de contenu dynamique ;

Lecteurs audio et braille

Selon le type de handicap, il est possible de mettre à disposition des outils d’assistance notamment :

• Les lecteurs audio : ces technologies proposent un système de lecture d’écran disposant d’un synthétiseur vocal. Le lecteur récupère l’information textuelle et la restitue vocalement par caractère, pas mot ou par phrase.
• Le braille : si la personne malvoyante ou aveugle connaît le braille, le lecteur d’écran peut également gérer un afficheur braille connecté à l’unité centrale. C’est un périphérique disposant de 20 à 80 cellules piézoélectriques de 8 points brailles et qui permet de lire une portion de ligne d’un site internet. L’utilisateur doit actionner les touches de fonction de son appareil pour se déplacer sur l’écran.

La propriété CSS Speak

Une dernière petite solution qui vous aidera grandement dans l’accessibilité de votre site : la propriété CSS Speak. Cette propriété permet de définir comment doit être lu le texte d’un élément du site dans le cadre d’une restitution vocale. Il y a trois valeurs possibles pour cette propriété :

• None : la restitution vocale est désactivée ; 
• Normal : la restitution vocale est activée et le texte est lu mot par mot. Le navigateur saute le texte parlé et les pauses.
• Spell out : la restitution vocale est activée et le texte est lu lettre par lettre. Cette valeur est utilisée pour les abréviations et les acronymes.

Et dans Drupal 8 dans tout ça ?

Certains CMS sont prédisposés à faciliter l’accessibilité des sites web, notamment Drupal 8 qui intègre un certain nombre de recommandations en matière d’accessibilité. Les principales améliorations sont :

• Attributs ARIA et balisage HTML5 : Drupal 8 a amélioré le balisage pour faciliter la navigation des internautes malvoyants et aveugles qui utilisent des outils d’assistance s’appuyant sur le balisage du site. Par ailleurs, le HTML5 permet de favoriser la qualité de la sémantique des pages. Cela favorise l’identification des rôles, des états et des propriétés ARIA par les lecteurs d’écran.
• Balise ALT des images : alt text ou alt est l’attribut qui propose une description vocale de l’image. Avec cette balise, il est possible de renseigner autant de détails que possible pour expliquer ce qui est affiché à l’écran. Cette balise favorise grandement le référencement SEO.
• Les contrastes des couleurs du back-office : Drupal 8 a renforcé le contraste des couleurs par un fond plus sombre par défaut du back-office et ce dans le souci d’une meilleure visibilité des éléments du site.
• Les liens : les liens sont souvent mis en valeur par des couleurs ce qui n’avantage pas les personnes malvoyantes. Pour cela, Drupal 8 a conservé les liens soulignés.