Tutoriel "composants d’interface JavaScript"

Introduction

Cette étude a été réalisée pour répondre aux exigences du RGAA 3 2016 et aux besoins d’utiliser rapidement des composants d’interface riches accessibles (WAI-ARIA). De nombreuses bibliothèques JavaScript proposent des composants d’interface riches plus ou moins accessibles.

Cinq bibliothèques JavaScript ont été sélectionnées, avec des bibliothèques additionnelles de composants d’interface. Après en avoir testé l’accessibilité, des corrections ont été apportées si nécessaire afin de rendre ces composants conformes au RGAA 3.

Voici la liste des biblliothèques sélectionnées :

• JQuery + JQuery-ui
• Bootstrap + plugin paypal
• Angular + Angular-ui Bootstrap
• React + Bootstrap
• React + composants ReactJS

Tests de restitution

La grille de d'évaluation des design pattern impose que ces composants aient une restitution pleinement compatible avec une des deux combinaison de la base de référence. Voici la liste des logiciels utilisés lors de ces tests de restitution.

• JAWS 17.0.2727
• NVDA 2016.4
• VoiceOver 4
• Firefox 50.1.0
• IE9 et 11
• Safari dernière version

Rappels des bases de références :

• Combinaison 1 : NVDA + Firefox, JAWS + Firefox ou IE9 +, Voice Over + Safari
• Combinaison 2 : Jaws + Firefox, NVDA + Firefox ou IE9 +, VoiceOver + Safari

Problèmes utilisateurs

Utiliser des composants JavaScript doit satisfaire aux exigences d’accessibilité communes à l’ensemble des éléments du site : un accès et une utilisation possibles au clavier, comme à la souris, et une vocalisation conforme par les lecteurs d’écran. La compatibilité des composants JavaScript avec les technologies d’assistance est rendue possible par l’utilisation de WAI-ARIA, et plus particulièrement par le respect des motifs de conception recommandés par le W3C (http://www.w3.org/TR/wai-aria-practices/#aria_ex). C'est ce qui permet de garantir la compatibilité avec les technologies d’assistance, telles que les lecteurs ou agrandisseurs d’écran et les logiciels de reconnaissance vocale utilisés par les personnes en situation de handicap... Dans le cas où cette mise en conformité n’est pas envisageable, reste à la charge du développeur la mise en place d’une alternative à la fonctionnalité proposée par le composant.

Par exemple, lorsqu'un composant a un défaut de navigation au clavier, cela handicape :

• Les personnes aveugles (qui ne peuvent utiliser de périphériques comme les souris qui nécessitent une coordination de l’œil et de la main)
• Les personnes malvoyantes (qui peuvent avoir du mal à trouver ou à suivre le symbole du pointeur sur l'écran)
• Les handicapés moteurs qui ne peuvent pas se servir de la souris et utilisent exclusivement le clavier ou un dispositif de pointage spécifique

De même, si un composant présente un défaut de description ou d'alternative, la lecture du texte à haute voix ou la conversion en braille seront impossible pour les technologies d'assistance. Cela handicape donc les personnes qui ont des difficultés de vision, les personnes sourdes et/ou les personnes aveugles.

Pour plus d'informations, le W3C met a disposition un guide pour comprendre et mettre en œuvre la version 2.0 des Règles pour l'accessibilité des contenus Web

Conséquences techniques

L'accessibilité consiste à permettre aux personnes en situation de handicap d'accéder aux mêmes contenus et fonctionnalités que tout le monde, sans discrimination, et quelle que soit leur façon de consulter les pages web. Or, si la meilleure façon de garantir cet égal accès est de fournir une même interface nativement accessible à toutes et tous, il peut arriver que dans certains contextes techniques, les solutions à mettre en œuvre soient excessivement complexes et donc coûteuses. C'est pourquoi l'obligation légale d'accessibilité reprend la notion d'aménagement raisonnable telle que définie par la Convention relative aux droits des personnes handicapées de l'ONU :

« On entend par « aménagement raisonnable » les modifications et ajustements nécessaires et appropriés n’imposant pas de charge disproportionnée ou indue apportés, en fonction des besoins dans une situation donnée, pour assurer aux personnes handicapées la jouissance ou l’exercice, sur la base de l’égalité avec les autres, de tous les droits de l’homme et de toutes les libertés fondamentales »

La première attente fondamentale des utilisateurs est de pouvoir accéder aux contenus et fonctionnalités des sites publics, mais pas nécessairement sous la même forme. Mettre en place des alternatives peut être un compromis acceptable à condition qu'elles fournissent le même niveau d'information et des fonctionnalités équivalentes.

Lorsque les développements sont jugés déraisonnables, il convient alors de mettre en place une alternative permettant de donner accès aux mêmes contenus et à des fonctionnalités similaires. C'est ainsi que nous proposons parfois des solutions alternatives à des développements jugés trop complexes par rapport au bénéfice utilisateur.

Pour chaque bibliothèque, nous avons ainsi proposé des correctifs sous forme d’extension aux composants déjà existants, ou des solutions alternatives le cas échéant. Afin d'éviter de surcharger entièrement le code du composant, nous avons décidé de les étendre (comme par exemple pour JQuery-ui). Ceci afin d'ajouter la possibilité d’utiliser de nouveaux arguments en entrée de fonction, ou bien d’étendre certaines fonctions de ces bibliothèques pour en corriger le fonctionnement.

On garde ainsi la simplicité d’utilisation de ces composants, leur appel reste exactement le même (moyennant les nouveaux arguments s'il y en a), il suffit de charger le JavaScript qui étend le composant après avoir chargé le composant lui-même.

Synthèse des tests et correctifs proposés

JQuery UI

JQuery-ui (https://jqueryui.com) est la bibliothèque de composants d'interface utilisant JQuery. Pour effectuer le test de ces composants, la version de JQuery utilisée est la 3.1.1 et celle de JQuery-ui est aussi la version 1.12.1.

Malheureusement, la bibliothèque de composants JQuery-ui ne dispose pas de tous les composants WAI-ARIA que nous souhaitons évaluer et corriger, certains composants n’existent pas dans la bibliothèque proposée, ou alors ne correspondent pas du tout au motif de conception (Design Pattern) WAI-ARIA, et dans ce cas, il seront considérés comme hors du cadre de ces tests.

Voir les tutoriels des composants corrigés

• Slider
• Progressbar
• Dialog
• Autocomplete
• Datepicker

Commentaires sur les restitutions

• Progressbar :
  • NVDA + Firefox : progression non sonorisée, régression par rapport au composant original
• Modal - Dialog :
  • JAWS + IE : au curseur virtuel, on peut sortir de la modale
• Accordion :
  • JAWS + IE : nombre de panneaux non restitué

Bootstrap components avec le framework "Paypal Bootstrap Accessibility"

Pour ces tests, nous avons ciblé les modules du plugin Paypal Bootstrap Accessibility dans sa version 1.0.4 et qui a pour dépendance le plugin Bootstrap V3.3.7 qui lui même a pour dépendance jQuery JavaScript Library v3.1.1

La bibliothèque Bootstrap avec le plugin de Paypal renforce l'accessibilité des composants de Bootstrap. Néanmoins il reste 1 erreur sur la modale : le focus n'est pas donné sur le 1^er élément "focusable" lors de l'ouverture de celle-ci. De même il reste 1 erreur sur l'accordion : de l'extérieur du composant, lorsqu'un panneau est actif, le focus n'est pas donné sur le titre du premier panneau actif. La correction de ces composants n'est pas proposée ici pour éviter d'avoir un plugin de plugin.

Commentaires

• Modal - Dialog :
  • NVDA + Firefox : comportement imprévisible lors de la navigation au curseur virtuel
  • JAWS + Firefox : seul le titre est restitué
• Tabpanel :
  • NVDA + Firefox : lors du passage d'un onglet à l'autre, NVDA commence par indiquer l'état "réduit", puis le nom de l'onglet et l'état "développé"
  • NVDA + IE : nombre d'onglets, titres et onglet courant non restitués
  • JAWS + IE : nombre d'onglets, titres et onglet courant non restitués
• Accordion :
  • NVDA + IE : conforme, mais beaucoup d'informations "parasites" (URL de la page restituée avant chaque titre des panneaux)
  • JAWS + IE : nombre d'onglets non restitué

Angular UI Bootstrap

Angular Bootstrap est actuellememt l'une des librairies les plus utilisées pour AngularJs et offre un large panel de composants.

Nous avons utilisé ici les versions 1.5.8 de AngularJs, et 2.2.0 de Angular Bootstrap.

Voir les tutoriels des composants corrigés

• Slider
• Progressbar
• Dialog
• Tabpanel
• Tooltip
• Accordion
• Radiobutton
• Checkbox
• Datepicker

Commentaires

• Tabpanel :
  • NVDA + IE : le composant ne semble pas être détecté
  • JAWS + Firefox : le composant ne semble pas être détecté
  • JAWS + IE : le composant ne semble pas être détecté
• Accordion :
  • NVDA + Firefox : le nombre de panneaux n'est pas correctement restitué; NVDA indique "onglet 1/1", au lieu de 1/3, 2/3...
  • NVDA + IE : le composant ne semble pas être détecté
  • JAWS + Firefox : nombre de panneau pas correctement restitué
  • JAWS + IE : nombre de panneau pas correctement restitué
• Radiobutton :
  • NVDA + IE : impossible de savoir si un bouton est coché/décoché. L'état restitué par le lecteur d'écran est sélectionné (il s'agit peut-e^tre de l'utilisation d'aria-selected au lieu d'aria-checked ?)
  • JAWS + IE : état coché restitué + état sélectionné (cf remarque précédente)
• Checkbox :
  • NVDA + IE : état coché restitué + état sélectionné (cf remarque précédente)
• Datepicker :
  • NVDA + IE : navigation dans le calendrier impossible (plantage du lecteur d'écran à plusieurs reprises sur ce composant)
  • JAWS + Firefox : le composant ne semble pas être détecté
  • JAWS + IE : passage d'un mois à l'autre non restitué (lenteur lors de la navigation à l'intérieur du calendrier).

React Bootstrap

À l'heure des tests que nous avons effectués, la bibliothèque de composants la plus populaire et la plus complète pour React semble être React Bootstrap. Cette bibliothèque réimplémente les composants riches de la bibliothèque CSS Bootstrap, pour les rendre facilement intégrables dans une application React.

Nous avons utilisé ici les versions 15.4.1 de React, et 0.30.7 de React Bootstrap.

Voir les tutoriels des composants corrigés

• Modal
• Tooltip
• Progress bar
• Accordion
• Tabs

Commentaires

• Accordion :
  • NVDA + Firefox : le nombre d'onglets n'est pas restitué correctement; 1/1 au lieu de 1/3, 2/3, etc.
  • NVDA + IE : le contenu du composant est lu en entier, de manière linéaire
  • JAWS + Firefox : le nombre d'onglets n'est pas restitué correctement; 1/1 au lieu de 1/3, 2/3, etc.
  • JAWS + IE : la navigation à l'intérieur des panneaux est imprévisible (on "déplie" un panneau et c'est le contenu d'un autre qui est restitué par JAWS)
• Dialog :
  • JAWS + IE : composant non détecté
• Tabpanel :
  • JAWS + IE : la fonctionnalité de JAWS permettant d'atteindre le panneau contrôlé ne fonctionne pas

ReactJS

L'organisation ReactJS sur GitHub regroupe un certain nombre de bibliothèques couramment utilisées conjointement à React, comme redux ou reselect. Cette organisation propose aussi plusieurs composants présentés comme conformes aux motifs ARIA.

Nous avons utilisé ici les versions 15.0.0 de React, 1.4.0 de React Autocomplete, 1.6.2 de React Modal, 0.8.2 de React Tabs.

Voir les tutoriels des composants corrigés

• Autocomplete

Commentaires

• Dialog :
  • NVDA + Firefox : contenu non restitué
  • NVDA + IE : contenu non restitué
  • JAWS + Firefox : contenu non restitué
• Tabpanel :
  • JAWS + IE : nombre d'onglets non restitué

Conclusion

Ce que nous avons pu remarquer, lors des tests, c'est que seules les bibliothèques se clamant accessibles avaient fait un réel effort dans ce sens. Donc il faut prendre de grandes précautions si ce n'est pas le cas. Néanmoins, il ne reste pas impossible de faire des corrections sur les bibliothèques en erreur. Les corrections peuvent être plus ou moins aisées selon le composant et la bibliothèque. Une correction dans le noyau d'origine de la bibliothèque sera toujours plus efficace et pérenne qu'un plugin. jQuery, AngularJs, React permettent de créer du code accessible au même titre que JavaScript le permet. C'est son utilisation dans des bibliothèques de composants qui peut poser problème. La création de tickets d'anomalies dans les bibliothèques d'origine permettra de suivre l'avancement des corrections. Malgré cela nous avons rencontré des anomalies ouvertes depuis 2010 sans correction.