Propulsé par le RAAMM

Test 6 – Rapport

Sixième test : les notes de bas de page

Nous avons débuté le sixième test le 23 mars 2016 en allouant une période de 14 jours aux testeurs pour effectuer la tâche. Cette sixième expérimentation portait sur le composant des notes de bas de page, dans le dessein d’en vérifier la fiabilité. Voici la page de test : https://labo.raamm.org/lab/tests/footnotes/index.html.

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-6-note-de-bas-de-page/. 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 notes de bas de page 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 d’une vingtaine d’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 48 rapports de test. 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 : « Je ne vois pas comment on pourrait simplifier davantage une telle démarche » et « L’objet du test m’inquiétait, mais ce fut plus facile que ce à quoi je m’attendais ». Le taux de réussite du sixième test dépasse les 85%. Le composant notes de bas de page est simple d’utilisation. Les résultats sont excellents pour le composant notes de bas de page bien qu’il y ait quelques éléments à corriger.

 

Problématiques et recommandations

Problématique 1 : Confusion dans la liste des notes

Jaws et NVDA annoncent six éléments dans la liste des notes, ce qui porte à confusion puisqu’il n’y a que trois notes. Notre solution est de remplacer les balises de liste de définitions par des balises de liste à puce. Les lecteurs d’écrans reconnaissent ainsi seulement les trois éléments de la liste des notes.

Recommandation 1 : (à l’étude)

Suppression des dl,dt,dd et remplacement par des ul, li

Problématique 2 : Confusion dans la lecture de la note même

Une fois dans la liste des notes, après avoir sélectionné l’appel de note, les lecteurs d’écrans lisent le numéro de la note, le texte de la note ainsi que le lien de retour de la note. Pourtant il n’est pas possible d’activer le retour sur la note sans appuyer de nouveau sur flèche bas afin de trouver réellement le lien de retour sur la note. Puisqu’il y a confusion, nous avons décidé d’intégrer la balise identifiant de la note dans une balise paragraphe. Ainsi, les lecteurs d’écrans lisent le numéro de la note et la note elle-même seulement.

Recommandation 2 : (à l’étude)

Le lien mène maintenant vers le premier <p> de la note de bas de page. Le id est maintenant dans ce <p>

Problématique 3 : Retour à l’appel de note

Lorsque l’on sélectionne le lien de retour dans la note de bas de page, le focus est amené sur la balise du numéro exposant de la note. Notre solution est de changer la cible du retour à la référence qui se fait maintenant sur le lien de départ plutôt que l’exposant. Ceci résout un problème de focus sur VoiceOver lors du retour à l’appel de note.

Recommandation 3 : (à l’étude)

Retour à la référence se fait maintenant sur la balise <a> et non sur la balise <sup>

Problématique 4 : plusieurs occurrences de la même note

Le focus retourne toujours à la première occurrence lorsqu’il y a plusieurs liens qui mènent à la même note. Notre solution est donc de permettre au composant de reconnaitre les multiples occurrences d’une même note et de pouvoir retourner au lien de départ approprié.

Recommandation 4 : (à l’étude)

Reconstruction pour la fonction de retour à la note précédente, puisque incapable de la faire fonctionner par défaut

var decompte = new Array(‘première’, ‘deuxième’, ‘troisième’);

$( document ).on( « wb-ready.wb-fnote », « .wb-fnote », function( event ) {

// Come back to the previous clicked footnote

$(‘.fn-lnk’).click(function(e) {

var currentRef = $(this).attr(‘id’);

                $(‘[href= »‘+$(this).attr(‘href’)+' »]’).each(function(index, element) {

                    if($(element).attr(‘id’)==currentRef) {

$($(this).attr(‘href’)).parent().find(‘.fn-rtn a’).attr(‘href’, ‘#’+currentRef);

$($(this).attr(‘href’)).parent().find(‘.fn-rtn a .wb-inv span’).text(decompte[index]);

}

                });

            });

});

 

Ajustements CSS causé par le changement des balises

.wb-fnote > ul {

margin: 0;

padding: 0;

list-style: none;

}

.wb-fnote > ul > li {

margin: .375em 0;

position: relative;

}

.wb-fnote ul ul {

margin: 0 0 0 3.75em;

padding: 0 .375em .375em;

}

.wb-fnote ul ul li {

margin: 0 0 0 1.75em;

padding: 0 .375em .375em;

list-style-type: disc;

}

.wb-fnote .ftn-ref {

border: 1px solid transparent;

}

.wb-fnote .ftn-ref:focus {

background-color: #eee;

border-color: #555;

}