辅助内容的可访问性

Question

我试图向HTML元素添加“不可见”补充内容，并且我想避免在DOM中创建新元素。我还想尽可能保持可访问性（即通过屏幕阅读器VoiceOver和JAWS读取）。我将如何做到这一点？

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

1. 我可以使用title属性，但似乎是与此相关的quite a few problems。此外，我希望能够自定义文本的外观（无论是自定义工具提示还是小工具），并且title将生成浏览器的默认工具提示。

2. 我可以把内容放到aria-label attribute，但这似乎更适合于替代内容，而不是补充内容。

3. 最易于访问的方法似乎是aria-describedby，但是这需要将内容放入一个带ID的独立DOM元素以及ARIA角色tooltip，这在现在不是真的可行。

4. 最后是HTML5 data-* attributes，这里有供脚本等使用的内容，但没有关于可访问性的内容。

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

Answer 1

如果你想避免创建DOM元素，有三种选择：

• CSS hiding + clipboard
• Generated content
• Aria Live Regions

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

<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