1174 sujets

Accessibilité du Web

Tooltip bootstrap / tanaguru / rgaa3

Bonjour, petite question sur une erreur rgaa3 remontée par Tanaguru.

Environnement :
Joomla3 / bootstrap3 / utilisation des tooltips (tooltip BS)

Mon code : 

<a title="" class="hasTooltip" href="monhref.fr" data-original-title="Plus d'informations sur les animations">Voir<a>


Règle & Erreur Tanaguru :
- Règle : Pour chaque lien texte ayant un titre de lien (attribut title), le contenu de cet attribut est-il pertinent ?
- Erreur : Les liens ont un attribut title vide

Mon avis
Oui le title est vide mais le focus ou le survol de ce lien génère : 

<a title="" class="hasTooltip" href="monhref.fr" data-original-title="Plus d'informations sur les animations" aria-describedby="tolltip8585">Voir<a>
[i]...plus loin dans le code : [/i]
<div id="tolltip8585">Plus d'informations sur les animations</div>


A l'origine, le title est rempli mais Bootstrap le vide et génère le reste en JS et d'après la doc c'est accessible.

Question :
Tanaguru ne comprend pas cette manipulation Bootstrap ?
Bootstrap ne gère pas correctement son tooltip ?
L'erreur est-elle connue ?
Suis-je si mauvais ?
Une idée ?

Enjoy...
Modifié par Cr2a (21 Jul 2015 - 17:12)
Administrateur
Bonjour,

Je pense que l'outil automatique de Tanaguru ne peut pas deviner le code JS généré (qui effectivement semble correct), tout simplement, non ?

Il faut l'interpréter au cas par cas, j'imagine, car tout ne peut pas être automatisé.
bonjour @Raphael
Je pense aussi, j'ai posté sur le discuss de Tanaguru pour avoir des informations.

Merci pour ta réponse
Enjoy
Administrateur
Bonjour,

c'est le défaut plus général des outils de test qui analysent le code HTML envoyé initialement par le serveur (ce que fait Tanaguru) et non sur l'état du DOM après le chargement ou pendant l'utilisation.

Pour beaucoup plus de lecture, 2 articles de K. Groves :
The Problem with Automated Website Accessibility Testing Tools
Web Accessibility Testing Tools: Who tests the DOM? (et un lien vers une page-piège)

Il garde l'avantage de pouvoir surveiller beaucoup de pages (pas très utile pour un audit initial, très utile pour un site en prod) et ce genre de test va de toute façon être très difficile à tester de façon automatique vu qu'on peut faire pleiiiin de choses en JS et de plein de manières différentes...
Bonjour à tous,

Effectivement, c'est le grand défaut des outils automatiques mais pas celui de Tanaguru. Tanaguru traite le HTML généré sur les audits de pages et de scénarios.

Donc après chargement du javascript, avec les scénarios, il est même possible d'auditer plusieurs états d'une page Web. Donc pendant l'utilisation.

Le problème du titre de lien vide c'est qu'il invalide dans ce cas automatiquent le critère 6.2.4 pour les référentiels d'accessibilité un lien n'est utilisé uniquement au survol ou au focus. Jaws ou NVDA traite les liens, par exemple les listes de liens sans que le focus ou le survol soit actif.
Si en tant qu'utilisateur de lecteur d'écran je configure mon outil pour restituer le contenu des titres de liens. Comment sera restitué ton lien ?

Fred.
Bonjour à tous,

Effectivement, c'est le grand défaut des outils automatiques mais pas celui de Tanaguru. Tanaguru traite le HTML généré sur les audits de pages et de scénarios.

Donc après chargement du javascript, avec les scénarios, il est même possible d'auditer plusieurs états d'une page Web. Donc pendant l'utilisation.

Le problème du titre de lien vide c'est qu'il invalide dans ce cas automatiquent le critère 6.2.4 pour les référentiels d'accessibilité un lien n'est utilisé uniquement au survol ou au focus. Jaws ou NVDA traite les liens, par exemple les listes de liens sans que le focus ou le survol soit actif.
Si en tant qu'utilisateur de lecteur d'écran je configure mon outil pour restituer le contenu des titres de liens. Comment sera restitué ton lien ?

Fred.
A mon sens le problème vient surtout de l'intitulé du lien "Voir", qui n'est absolument pas pertinent.

Sorti de son contexte le lien "Voir" ne nous renseigne absolument pas de quoi il s'agit ni du contenu que nous allons trouver sur la page ciblée.

Dans le cas où cet intitulé ne peut pas être changé, il faut alors renseigner l'attribut title="" afin de compléter celui-ci.

Voici donc quelques exemples de possibilités :

- <a href="...">Voir plus d'informations sur les animations</a> (meilleur cas)
ou
- <a href="..." title="Voir plus d'informations sur les animations">Voir</a>
ou encore
- <a href="...">Voir<span class="visuallyHidden"> plus d'informations sur les animations</span></a>
Modifié par Nigel (29 Sep 2015 - 11:34)
Étant moi-même utilisateur de lecteur d'écran, jaws en l'occurence, je vois plusieurs potentiels problèmes avec la technique actuelle :
1 - Vu que le title est vide, il y a une probabilité pour que le lien soit vide dans la liste des liens invoquée par Insert+F7. C'est un raccourci que beaucoup de débutants utilisent !
2 - Si je ne navigue avec le curseur virtuel i.e. flèche haut/bas, ce qui est très courant, je n'ai aucune chance de voir la tooltip.
3 - Avec le test ci-dessous, sans le aria-live, la tooltip n'est pas lue, même en arrivant sur le lien avec tab et même en appuyant sur des raccourcis classiques permettant d'obtenir plus d'informations sur l'élément en focus (Insert+Tab, Insert+F1, Ctrl+F1). Donc ajouter aria-describedby au focus seul ne fonctionne pas comme souhaité.
Testé avec IE et firefox avec Jaws 16. Si je veux voir la tooltip, je dois savoir qu'elle se met tout en bas du body et y aller avec le curseur virtuel; aucune chance qu'un utilisateur moyen ne la lise.

Code de mon test :

<!DOCTYPE HTML>
<html><head><title>Test focus</title></head><body>
<p>
<a href="#">Lien test avant</a>
<br />
<a href="#" id="yo">Lien test</a>
<br />
<a href="#">Lien test après</a>
</p>
<script type="text/javascript">
function yofocus () {
var div = document.createElement('div');
div.setAttribute('id', 'plop');
div.setAttribute('aria-live', 'assertive');
div.innerHTML = 'Ceci est une description';
document.body.appendChild(div);
this.setAttribute('aria-describedby', 'plop');
}

function yoblur () {
this.removeAttribute('aria-describedby');
var div = document.getElementById('plop');
div.parentNode.removeChild(div);
}

window.onload=function(){
var yo = document.getElementById('yo');
yo.onfocus = yofocus;
yo.onblur = yoblur;
};
</script>
</body></html>


En bonus il faut que vous sachiez que le title est automatiquement lu quand on passe sur le lien sous iOS avec VoiceOver sans que vous n'ayiez autre chose à faire; donc s'il y a une information à ne pas rater c'est là qu'elle doit être.
Modifié par QuentinC (30 Sep 2015 - 10:12)
Sujet clos
Aller à