2

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

你能帮我吗？

4

2 回答 2

2

尝试使用标题属性。

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

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

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

在你的CSS中添加这个

    .hidemefromUsers {
         position: absolute;
         left: -99em;
         height: 0;
     }
于 2016-12-28T12:06:51.600 回答
1

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

于 2021-05-06T10:22:02.183 回答