Accessibility of supplementary content

Question

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?

Answer 1

If you want to avoid creating DOM elements, there are three options:

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

If not, use a dummy image for supplementary content:

<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