NVDA 未在跨度中读取 aria-label - 替代方案是什么？答案

【问题标题】：NVDA not reading aria-label in span - what is the alternative?NVDA 未在跨度中读取 aria-label - 替代方案是什么？
【发布时间】：2016-12-13 18:11:47
【问题描述】：

我对可访问性问题相当陌生，我正在尝试在 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>

你能帮忙吗？

【问题讨论】：

你用的是什么浏览器？
Chrome，但在 IE 或 Firefox 上没有什么不同 - 感谢您的回复。
我已经更新了问题。

标签： screen-readers nvda

【解决方案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;
     }

【讨论】：

谢谢。 hidemefromUsers 会是什么样子？你把它包括在哪里？
主要问题是我似乎无法在制表符或间距时使用/激活按钮/切换

【解决方案2】：

aria-label、aria-labelledby 和 aria-describedby 不能与所有 HTML 元素保持一致。简短的回答：它们应该用于交互元素。 Léonie Watson here 的更长回答。

【讨论】：