NVDA 没有读取跨度中的 aria-label - 还有什么选择？

Question

我对可访问性问题相当陌生，我正在尝试在 NVDA 中读取 aria 标签。

这是我的 HTML：

    <div class="myClass">
          <input type="checkbox" name="mycheckbox" id="toggle" onclick="togglelongText()"aria-label="tldr">
          <label for="toggle" aria-label="tldr"><span class="active" aria-label="tldr">tl;dr</span>
          <span class="toggleshape"></span><span class="inactive" aria-hidden="true">tl;dr</span></label>
    </div>

无法在 Windows 上的 NVDA 上读取标签，并且我发现如果元素位于 div 或 span 内，则不会始终成功：

https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label

有哪些替代方案？你能帮我吗？

谢谢，

问候，

P。

编辑：

我做了一些返工，我设法让 aria 标签仅部分工作，因为它现在显示为“tl;dr”。已在 Windows 7 上使用 Chrome 54、IE 11 和 Firefox 49 对此进行了测试，所有版本都存在相同的问题。这是修改后的代码：

<div class="myClass">
    <input type="checkbox" tabindex="0" name="mycheckbox" id="toggle" onclick="toggleLongText()" 
     aria-label="TL;DR switch">
    <label for="toggle" aria-label="TL;DR switch"><span class="active" tabindex="0" 
     aria-label="TL;DR switch">tl;dr</span><span class="toggleshape"></span>
     <span class="inactive">tl;dr</span></label>
</div>

你能帮我吗？

Answer 1

尝试使用标题属性。

或者您可以使用 aria-labelledby="mytexttoberead" 作为属性

<span class="hidemefromUsers" id="mytexttoberead">This text will be read</span>

为“hidemefromUsers”类添加一个 css，这样最终用户就看不到它，只有屏幕阅读器会知道它的存在。

在你的 css 中添加这个

    .hidemefromUsers {
         position: absolute;
         left: -99em;
         height: 0;
     }