screen-readers - NVDA 没有在 span 中读取 aria-label - 有什么选择？

Question

我对可访问性问题还很陌生，我正在尝试在 NVDA 中读取 aria-label。

这是我的 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”。这已经在带有 Chrome 54、IE 11 和 Firefox 49 的 Windows 7 上进行了测试，都出现了同样的问题。这里是修改后的代码:

<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

尝试使用 title 属性。

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

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

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

在你的CSS中添加这个

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