Question

我正在尝试向HTML元素添加“隐形”补充内容，我想避免在DOM中创建新元素。我还想尽可能地保持可访问性（即由屏幕阅读器VoiceOver和JAWS读出）。我该怎么做？

注意：在我的上下文中，补充内容主要由帮助文本组成，但在某些情况下会出现其他信息。例如，对于有视力的用户，此内容可能会显示在非模态警报框或工具提示中。

我可以使用title属性，但似乎有quite a few problems与此相关联。此外，我希望能够自定义文本的外观（无论是自定义工具提示还是小部件），title将生成浏览器的默认工具提示。
我可以将内容放入aria-label attribute，但这似乎更适合替代内容而不是补充内容。
最易访问的方法似乎是aria-describedby，但这需要将内容放入一个带有ID的单独DOM元素以及ARIA角色tooltip，这不是在这个时间点真的可行。
最后有HTML5 data-* attributes，这些内容可以在脚本等中使用，但是没有关于它的可访问性。

属性是首选，因为如果我不使用JavaScript，我也可以使用CSS attr()方法访问内容。那么，屏幕阅读器再次阅读生成的内容吗？

Answer 1

如果您想避免创建DOM元素，有三个选项：

如果没有，请使用虚拟图像作为补充内容：

<label for="username">User Name
  <img role="presentation" src="required.png" alt="Required" />
</label>
<input type="text" id="username" aria-required="true" />

<强>参考

Accessibility support for CSS generated content

补充内容的可访问性

1 个答案: