Quatrième test : les boites de dialogue

Nous avons débuté le quatrième test le 29 janvier 2016 en allouant une période de 13 jours aux testeurs pour effectuer la tâche. Cette quatrième expérimentation portait sur le composant des boites de dialogue, dans le dessein d’en vérifier la fiabilité. Voici la page de test : https://labo.raamm.org/lab/tests/modal/index.html.

Nous avons rencontré plusieurs difficultés avec le composant de la Boite à Outils de l’Expérience Web :

1. Le dialogue n’est pas identifié comme tel. La mention « document » donnée par JAWS n’est pas claire.
2. L’utilisateur de JAWS peut continuer à lire le contenu de la page à la fin de la boite de dialogue et les commandes de listes (de liens, de titres, etc.) fonctionnent dans la boite de dialogue et permettent donc à l’utilisateur de se perdre ailleurs dans la page sans avoir répondu au dialogue.
3. On ne peut pas fermer le dialogue avec la touche échappement.

Nous avons donc cherché une meilleure solution et avons utilisé la boite de dialogue de l’Accessible Modal Dialog. Voici le lien pour plus d’informations : http://github.com/gdkraus/accessible-modal-dialog.

Les testeurs sont invités à se rendre sur le site web du laboratoire spécialement conçu à cet effet : https://labo.raamm.org/test/test-4-boites-de-dialogue/. Le testeur doit d’abord s’inscrire sur le site. Après avoir rempli la section sur les environnements, il peut commencer à faire des tests. La page du laboratoire nous présente les tests en cours et ceux qui sont terminés. Dans la page du test, l’on retrouve une description de l’élément à examiner, une section d’aide, les objectifs du test, ainsi que le formulaire à remplir pour soumettre un rapport. Un lien Tester les boites de dialogue mène le testeur vers une autre page où se trouve le composant à tester et la description de tous ces éléments, afin d’en effectuer la vérification.

L’usager teste l’élément dans un ou plusieurs environnements puis remplit le formulaire de commentaires du rapport. Il lui est possible de noter les difficultés rencontrées ou d’émettre un questionnement à même ce formulaire. Lors de la compilation des résultats, notre animateur-coordonnateur contacte au besoin le testeur par téléphone afin d’obtenir des explications supplémentaires sur la problématique rencontrée et de faire les suivis nécessaires.

Plus de 25 utilisateurs et d’experts ont testé le composant. Certaines personnes l’ayant expérimenté sur plus d’une plateforme, nous avons reçu un total de 62 rapports de test qui se sont révélés inestimables. Plusieurs recommandations ont pu être formulées à la suite de la compilation finale.

 

Résultats expliqués

Tout d’abord, il est important de noter que les utilisateurs et experts ont réussi à utiliser le composant Boite de dialogue sans embûche majeure. Le test a reçu plusieurs commentaires très positifs sur son fonctionnement : « Simple d’utilisation et facile à comprendre » et « J’ai tendance à penser que les choses sont plus compliquées qu’elles le sont dans la réalité ». Le taux de réussite du quatrième test dépasse les 90%. La boite de dialogue est donc un composant ayant une utilisation simple.

Les résultats sont excellents pour le composant boite de dialogue bien qu’il y ait quelques éléments à corriger.

 

Problématiques et recommandations

Les étapes suivies par notre intégrateur ainsi que ses solutions sous forme de code se retrouvent dans l’annexe 1.

Problématique 1

Manque de stabilité avec VoiceOver iOS

Nous avons les commentaires suivants :

• « Le bouton de la première boite de dialogue ne fonctionne pas. »
• « J’étais incapable d’activer le bouton pour fermer la boite. »
• « Impossible d’actionner le bouton dans la première boite que ce soit avec ou sans VoiceOver. Impossible d’entrer un chiffre dans la seconde : donc impossible de confirmer. Impossible d’actionner le bouton Annuler avec ou sans VoiceOver. »
• « L »affichage de la boite est actuellement nul sur iPhone en mode portrait: Le texte de l’en-tête de section déborde de la boite. On ne peut voir les boutons même sans VoiceOver. Impossible de faire quoi que ce soit dans cet environnement. »

Il est donc important que le dialogue soit visible dans l’écran sinon les boutons ne sont pas accessibles.

Recommandation 1 (intégré)

Permettre aux boites de dialogue le défilement vers le bas de leur contenu. On peut ainsi atteindre le bouton et fermer la boite de dialogue même si le contenu de celle-ci dépasse de prime abord les marges de l’iPhone.

Problématique 2

Perte de focus sur Internet Explorer avec Jaws

En fermant la boite, le focus retourne au début de la page

Recommandation 2 (intégré)

Un retour à l’élément a été ajouté quand on quitte la boite de dialogue.

Problématique 3

Fermeture parfois difficile dans les boites de dialogue

Tel que proposé dans WAI-ARIA 1.0 Authoring Practices, permettre de fermer la boite de dialogue avec la touche Escape. Ainsi, si l’utilisateur rencontre un problème comme ici dans la première boite, il pourrait toujours fermer cette boite. Escape There should be a method to close the dialog without taking any action. This could be implemented via a cancel button which is keyboard accessible. It is recommended that a dialog also be cancelled by pressing the Escape key with focus on any item.(http://www.w3.org/WAI/PF/aria-practices/#dialog_modal).

Recommandation 3 (intégré)

Il est maintenant possible de fermer les boites de dialogue avec la touche Échappement pour une plus grande facilité d’utilisation.

 

Conclusion

La quatrième série de tests est probante. La compilation de ces données nous a ainsi permis de cerner quelques problématiques concernant le composant des boites de dialogue, particulièrement sur l’intégration de celle-ci.

 

Annexe 1

Recommandation 1

Permettre aux boites de dialogue le défilement vers le bas de leur contenu. On peut ainsi atteindre le bouton et fermer la boite de dialogue même si le contenu de celle-ci dépasse de prime abord les marges de l’iPhone.

Ajustement CSS :

– Suppression de la position fixe de la boite de dialogue et remplacement par une position absolue pour permettre le déroulement de la page si le contenu de la boite de dialogue dépasse la zone visible.

Voici le code que j’ai ajouté/modifié :

.accModal {

…

/*position:fixed;*/

position:absolute;

}

 

Recommandation 2

Un retour à l’élément a été ajouté quand on quitte la boite de dialogue.

La variable focusedElementBeforeModal n’est pas bien gérée avec VoiceOver. 

VoiceOver ne comprend pas ‘:focus’ en jQuery. La variable est maintenant changée au clic des boutons.

Voici le code que j’ai ajouté/modifié :

jQuery(‘.startModal’).click(function(e) {

     focusedElementBeforeModal = $(this);

        showModal($($(this).attr(‘data-target-modal’)));

});

– Aussi, pour VoiceOver, nous avons remarqué une bien meilleure stabilité lorsqu’on utilise en plus du focus des ancres pour revenir aux boutons :

function hideModal() {

…

focusedElementBeforeModal.focus();

window.location.hash = ‘#’+focusedElementBeforeModal.attr(‘id’);

}

 

Recommandation 3

Il est maintenant possible de fermer les boites de dialogue avec la touche Échappement pour une plus grande facilité d’utilisation.

Voici le code que nous avons ajouté :

$(document).keyup(function(e) {

if (e.keyCode == 27) // esc

hideModal();

});