dojo - I want JAWS to tell the user what kind of node they are in while navigating the dijit.Tree -

we have dijit.tree indicates node type using icon. icon unique indicator tells person node "book" or "dvd" or "magazine" example.

dijit renders icon background image in css know screen readers not see.

i tried overriding gettooltip method provide tooltip saying "book" or "dvd". adds "title" attribute "dijittreerow". if mouse on node, see text. not ever focused on when user moves down 1 node next.

when navigating tree, , down arrows traverse nodes. span visible text focused on , string read. can see dotted line focus hear jaws in basic of examples: https://dojotoolkit.org/reference-guide/1.10/dijit/tree.html

what have not been able figure out how create indicator screen reader pick on read "book" alongside "the great gatsby".

does have tips on how made dijit widget accessible screen reader when images indicator should heard blind user?

the tree supports html labels, via setting labeltype property on model give it.

assuming don't want change store data (or override getlabel method), can reimplement dijit/tree.getlabel , produce html label, , wrap span aria-label.

(code lifted dijit.tree reference).

var mymodel = new objectstoremodel({     store: mystore,     labeltype: "html", // hack tell tree node render 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]);      } }); 

if data might contain html-ish characters don't want render, escape characters in getlabel too.