Retour d’expérience sur un plugin accessible

Retour d’expérience sur un plugin accessible (le 26/02/2016)

Sur le dernier plug-in accessible jQuery accessible autocomplete list récemment mis en ligne, j’ai rencontré quelques surprises que je vais vous relater dans un mini-retour d’expérience ici-tout-de-suite.

Plugin autocomplete

Un bref historique

Grosso modo, l’idée est partie d’un exemple de Heydon Pickering. Aurélien l’a repris, amélioré et m’a soumis un prototype, afin que je le « package » dans un plug-in. Je commence à avoir l’habitude, j’en suis à mon neuvième plugin. :)

On a fonctionné en tandem : Aurélien m’amenant le prototype, les comportements attendus et la connaissance fine des problématiques d’accessibilité (oui rien que cela !), et moi amenant le côté pratique/industrialisation/amélioration progressive du tout.

Amélioration progressive

Autant j’étais chaud pour certains plug-ins, autant je n’ai pas compris l’intérêt de celui-là… au début. Pourquoi réinventer la roue ? Un input avec un datalist fait très bien le job.

Oui, sauf que… non, pas du tout, j’étais lourdement à côté de la plaque.

Un rapide test sous Firefox/NVDA - depuis l’atelier de Paris Web, je n’hésite plus une seconde - me confirme que les suggestions d’un input/datalist ne sont pas du tout vocalisées. J’étais persuadé du contraire, bien mal m’en a pris.

Du coup, je révise complètement mon jugement et je me dis que cela pourrait effectivement être bien. Aurélien a déjà bien prémâché mon travail, j’ai un exemple qui fonctionne, et je n’ai « plus qu’à » le reconstruire.

Comme j’aime bien l’idée de l’amélioration progressive, je vais repartir d’un input/datalist (qui est déjà fonctionnel au clavier et sans JavaScript) et à partir de ces données, re-construire l’exemple. Grosso modo, prendre ces données, les stocker dans un tableau, manipuler le DOM pour obtenir ce qu’Aurélien m’avait donné dans son prototype, ajouter les événements qui vont bien et ajouter des options pour customiser le tout et le rendre plus facilement déployable/réutilisable.

Sortir le moins possible des comportements naturels

Si vous avez déjà utilisé VoiceOver sur un iPad, vous pouvez naviguer de manière analogue à des tabulations sur un clavier « classique », en gros, vous faites glisser votre doigt sur l’écran de gauche à droite pour faire une tabulation Tab, et de droite à gauche pour faire une tabulation inverse Maj+Tab.

Cela nous a indiqué à Aurélien et moi de ne pas restreindre la tabulation. Au moins l’utilisateur de ce mode de navigation sous VoiceOver sur iPad ne sera pas bloqué.

À un moment, je rencontre le souci suivant : quand on active une suggestion, cela la met dans le champ, puis… cela réactive les suggestions, vu qu’on est dans le champ et qu’on a encore le doigt sur Enter. Dommage, vu que la suggestion est juste après le champ dans l’ordre… on vient de créer un magnifique piège à doigt sur VoiceOver sur iPad, et aussi un piège à clavier.

Idée : interdire l’utilisation de Enter dans ce champ (vu que taper Enter dans la suggestion activait aussi Enter dans ce champ, ce qui lançait les suggestions, ces dernières s’activant dès qu’on touche au clavier dans le champ, vous suivez ?). Super, cela marche et cela résout mon problème !

Enfin, c’est une magnifique… fausse-bonne idée, voici le pourquoi ci-dessous.

Tester, tester, tester

À un autre moment, le développement était bien avancé, les suggestions s’affichaient bien, on pouvait tabuler dedans sans souci. Le plug-in marchait ! Il marchait tellement bien que j’en avais oublié l’essentiel : comme j’avais interdit certaines touches dans le champ, si l’on faisait Enter dedans (pour soumettre le formulaire)… cette touche était bloquée. Gag.

C’est un problème que je constate souvent : en voulant trop bien faire ou dans le feu de l’action, on finit par couper ou casser un comportement basique. N’oubliez jamais que votre test peut avoir d’autres champs à côté, avant ou après, et testez toujours les contrôles de bases.

Du coup, retour au problème qui m’a emmené dans cette mauvaise direction, l’activation d’une suggestion. Finalement, une idée toute simple résoudra le tout, mettre un imperceptible délai. Plus besoin de bloquer Enter, et donc plus de problème pour soumettre le formulaire.

Méfiez-vous de l’évidence

A posteriori, on peut toujours dire que c’est bateau, c’est évident, c’est grossier comme erreur… sauf que pas du tout. Dans le feu de l’action et avec des tests pas totalement naturels, c’est très facile de commettre ce genre d’erreurs, même avec les meilleures intentions. Surtout avec les meilleures intentions.

N’oubliez jamais de sortir la tête du guidon quand vous développez/testez, particulièrement en matière d’accessibilité. Testez au clavier, à la souris, avec une synthèse vocale, à la tabulation, sur tablette, sur tablette avec une synthèse vocale, etc.

Dites-vous bien que moins vous vous éloignerez des comportements de base, moins vous prendrez de risques.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1686


Aucun commentaire pour le moment.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.