dojo 我希望JAWS在用户导航dijit.Tree时告诉用户他们所在的节点类型

myzjeezk  于 2022-12-16  发布在  Dojo
关注(0)|答案(1)|浏览(148)

我们有一个dijit.tree,它用一个图标来表示节点类型,图标是一个唯一的指示符,它告诉用户这个节点是一本“书”、一张“DVD”或一本“杂志”。
dijit将图标呈现为CSS中的背景图像,我们知道屏幕阅读器看不到它。
我试着重写getTooltip方法来提供一个工具提示“book”或“DVD”。它成功地将“title”属性添加到“dijitTreeRow”。如果我将鼠标移到节点上,我就会看到文本。当用户向下移动以从一个节点到下一个节点时,这一点从来没有被关注过。
在树中导航时,向上和向下箭头将遍历节点。具有可见文本的范围将被聚焦并读取该字符串。在最基本的示例中,您可以看到虚线焦点,也可以通过JAWS听到这一点:https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html
我一直没能弄清楚的是如何创建一个指标,屏幕阅读器将拿起,将阅读“书”旁边的“了不起的盖茨比”。
当图像是盲人用户应该听到的指示符时,有没有人有什么技巧可以让屏幕阅读器访问这个dijit小部件?

mbzjlibv

mbzjlibv1#

该树支持HTML标签,方法是设置modellabelType属性。
假设您不想更改存储数据(或覆盖getLabel方法),可以重新实现dijit/Tree.getLabel并生成HTML标签,然后用spanaria-label Package 它。
(code从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]);

    }
});

如果您的数据可能包含您不想呈现的HTML字符,也可以对getLabel中的字符进行转义。

相关问题