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标签只是部分工作，因为它现在读取＆＃34; tl; dr＆＃34;。这已在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

尝试使用title属性。

或者您可以使用aria-labelledby =＆＃34; mytexttoberead＆＃34;作为属性

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

为班级添加一个css＆＃34; hidemefromUsers＆＃34;因此它不会被最终用户看到，只有屏幕阅读器才会知道它的存在。

在你的css中添加这个

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

Answer 2

aria-label、aria-labelledby 和 aria-describedby 无法与所有 HTML 元素一致地工作。简短回答：它们应该用于交互式元素。 Léonie Watson here 的更长答案。

NVDA没有读取咏叹调标签 - 替代方案是什么？

2 个答案: