3

I'm trying to add "invisible" supplementary content to HTML elements and I would like to avoid creating new elements in the DOM. I would also like to maintain accessibility as much as I can (i.e. read out by screen readers VoiceOver and JAWS). How would I do this?

Note: In my context, supplementary content mostly consists of help text, but there are some instances where additional information will appear. For sighted users, this content might appear in a non-modal alert box or tooltip, for instance.

  1. I can use the title attribute, but there seems to be quite a few problems associated with this. Also I'd like to be able to customize the appearance of the text (whether it be a custom tooltip or widget) and title will produce the browser's default tooltip.

  2. I can put the content into the aria-label attribute, but this seems to be more appropriate for alternative content rather than supplementary content.

  3. The most accessible method seems to be aria-describedby, however that would require the content to be put into a separate DOM element with an ID along with ARIA role tooltip, which isn't really feasible at this point in time.

  4. Finally there's the HTML5 data-* attributes, which are there for content to be used in scripts and such, but there's nothing about the accessibility of that.

An attribute is preferable because I can also access the contents using the CSS attr() method if I do not use JavaScript. Then again, do screen readers read generated content?

4

1 回答 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" />

参考

于 2013-10-18T22:30:26.367 回答