0

我们有一个 dijit.Tree，它使用图标指示节点类型。该图标是一个独特的指示符，它告诉人们这个节点是例如“书”或“DVD”或“杂志”。

dijit 将图标呈现为 CSS 中的背景图像，我们知道屏幕阅读器看不到。

我尝试覆盖 getTooltip 方法来提供一个工具提示，说“书”或“DVD”。它成功地将“title”属性添加到“dijitTreeRow”。如果我将鼠标悬停在节点上，我会看到文本。这从未关注用户何时向下移动以从一个节点移动到下一个节点。

导航树时，向上和向下箭头遍历节点。具有可见文本的范围被聚焦并读取该字符串。您可以在最基本的示例中看到虚线焦点以及使用 JAWS 听到这一点：https ://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html

我无法弄清楚的是如何创建一个屏幕阅读器将接收的指示器，该指示器将与“了不起的盖茨比”一起阅读“书”。

当图像是盲人用户应该听到的指示符时，是否有人对他们如何使屏幕阅读器可以访问这个 dijit 小部件有任何提示？

4

1 回答 1

0

树支持 HTML 标签，通过在你给它的模型labelType上设置属性。

假设您不想更改存储数据（或覆盖该getLabel方法），您可以重新实现dijit/Tree.getLabel并生成 HTML 标签，并用 aspan和aria-label.

（从dijit.Tree 参考中提取的代码）。

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-ish 字符，请也将这些字符转义getLabel。

于 2017-02-16T19:32:00.770 回答