补充内容的可访问性

提问于 2024-04-26T07:08:57+08:00

浏览次

3

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

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

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

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

1 回答

0
如果您想避免创建DOM元素，有三个选项：
如果没有，请使用虚拟图像作为补充内容：
```
<label for="username">User Name
  <img role="presentation" src="required.png" alt="Required" />
</label>
<input type="text" id="username" aria-required="true" />
```
References
- Accessibility support for CSS generated content
回复于 2024-04-26T07:08:57+08:00

相关问题