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

Question

We have a dijit.Tree that indicates a node type by using an icon. The icon is a unique indicator that tells the person this node is a "book" or a "DVD" or a "magazine" for example.

dijit renders the icon as a background image in CSS which we know screen readers do not see.

I tried overriding the getTooltip method to provide a tooltip saying "book" or "DVD". It successfully adds the "title" attribute to the "dijitTreeRow". If I mouse over the node, I see the text. This is not ever focused on when the user moves down to get from one node to the next.

When navigating the tree, the up and down arrows traverse the nodes. The span with the visible text is focused on and that string is read. You can see the dotted line focus as well as hear this with JAWS in the most basic of examples: https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html

What I have not been able to figure out is how to create an indicator that the screen reader will pick up on that will read "Book" alongside "The Great Gatsby".

Does anyone have any tips on how they made this dijit widget accessible for the screen reader when the images are an indicator that should be heard by the blind user?

Answer 1

The tree supports HTML labels, via setting the labelType property on the model you give it.

Assuming you don't want to change the store data (or override the getLabel method), you can reimplement dijit/Tree.getLabel and produce the HTML label, and wrap it with a span with an aria-label.

(code lifted from the 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]);

    }
});

If your data might contain HTML-ish characters that you don't want to render, escape the characters in getLabel too.