补充内容的可访问性答案

【问题标题】：Accessibility of supplementary content补充内容的可访问性
【发布时间】：2013-06-27 19:42:45
【问题描述】：

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

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

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

最好使用属性，因为如果我不使用 JavaScript，我也可以使用 CSS attr() 方法访问内容。再说一遍，屏幕阅读器会读取生成的内容吗？

【问题讨论】：

只是好奇 - 您对在 DOM 中创建新元素的具体反对意见是什么？
我同意蒂姆的观点，您考虑将其添加到哪些元素
我认为您需要举例说明您正在尝试做的事情。如果它的帮助文本，你在帮助什么：缩写使用<abbr>。上下文老兄！

标签： html accessibility wai-aria

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

【讨论】：