Je veux que JAWS indique à l'utilisateur le type de nœud dans lequel il se trouve lors de la navigation sur dijit.Tree

Question

Nous avons un dijit.Tree qui indique un type de nœud en utilisant une icône. L'icône est un indicateur unique qui indique à la personne que ce nœud est un "livre" ou un "DVD" ou un "magazine" par exemple. Dijit rend l'icône en tant qu'image d'arrière-plan dans CSS que nous savons que les lecteurs d'écran ne voient pas.

J'ai essayé de surcharger la méthode getTooltip pour fournir une info-bulle disant "book" ou "DVD". Il ajoute avec succès l'attribut "title" à "dijitTreeRow". Si je souris sur le nœud, je vois le texte. Cela ne se focalise jamais sur le moment où l'utilisateur descend pour passer d'un nœud à l'autre. Lorsque vous naviguez dans l'arborescence, les flèches haut et bas traversent les noeuds. L'intervalle avec le texte visible est focalisé sur et cette chaîne est lue. Vous pouvez voir la ligne pointillée et entendre ceci avec JAWS dans les exemples les plus basiques: https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html

Ce que je n'ai pas réussi à comprendre, c'est comment créer un indicateur que le lecteur d'écran détectera lire "Livre" à côté de "The Great Gatsby".

Quelqu'un a-t-il des conseils sur la manière dont ce widget dijit a été rendu accessible au lecteur d'écran lorsque les images sont un indicateur qui devrait être entendu par l'utilisateur aveugle?

Answer 1

L'arborescence prend en charge les étiquettes HTML, en définissant la propriété labelType sur le model que vous lui attribuez.

En supposant que vous ne voulez pas changer les données du magasin (ou remplacer la méthode getLabel), vous pouvez ré-écrire dijit/Tree.getLabel et produire l'étiquette HTML, et l'envelopper avec un span avec un aria-label.

(code levé à partir de dijit.Tree reference).

var myModel = new ObjectStoreModel({ 
    store: myStore, 
    labelType: "html", // Hack to tell the tree node to render as HTML 
    query: {id: 'world'} 
}); 

var tree = new Tree({ 
    model: myModel, 

    getLabel: function(item) { 
     var label = this.model.getLabel(item); 
     // dojo.string 
     return dstring.substitute("<span aria-label='dvd ${0}'>${0}</span>", [label]); 

    } 
}); 

Si vos données peuvent contenir des caractères-ish HTML que vous ne voulez pas rendre, échapper aux personnages getLabel aussi.