Tutoriel "composants d’interface JavaScript"

Introduction

Cette étude a été réalisée pour répondre aux exigences du RGAA 3 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.

Quatre 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

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)
• Certaines personnes ayant des tremblements de la main, qui trouvent l'utilisation de la souris très difficile et se servent donc habituellement d'un clavier

Ou alors si un composant a un défaut de description ou d'alternative cela rend impossible pour les technologies d'assistance la lecture du texte à haute voix, ou la conversion en braille. 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 sa 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 n’étant pas une bibliothèque d’interface, pour pouvoir tester des composants d’interface riche afin de savoir s’ils répondent aux exigences du RGAA 3, il a fallu choisir une bibliothèque de composants d’interface utilisant JQuery. Pour ce faire, JQuery-ui (https://jqueryui.com) a été utilisée. Pour effectuer le test de ces composants, la version de JQuery utilisée est la 1.11.2 et celle de JQuery-ui est aussi la version 1.11.2.

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
• Accordion
• Autocomplete
• Datepicker

Bootstrap components avec le plugin "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.1.1 qui lui même a pour dépendance jQuery JavaScript Library v1.11.2.

La bibliothèque Bootstrap avec le plugin de Paypal renforce l'accessibilité des composants de Bootstrap. Néanmoins il reste 2 erreurs sur la modale, celle-ci se ferme lorsque l'utilisateur clique en dehors de la modale et le focus n'est pas donné sur le 1^er élément. La correction n'est pas proposé ici pour éviter d'avoir un plugin de plugin.

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.2.28 de AngularJs, et 0.12.1 de Angular Bootstrap.

Voir les tutoriels des composants corrigés

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

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 0.13.1 de React, et 0.19.1 de React Bootstrap.

Voir les tutoriels des composants corrigés

• Modal
• Tooltip
• Progress bar
• Accordion
• Tabs

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 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.