Specifying both aria-label and title

Question

I have an input for which I would like to provide an accessible label as well as a default tooltip.

Based on my research this is my understanding:

• title alone is not enough for accessibility.
• aria-label would not show tooltip
• specifying both aria-label and title might lead to some screenreaders reading both.

Is there a better approach to achieve this?

Answer 1

Strictly speaking, the best approach is to use a visible label with the label element, since this makes the input easier to use with voice control. (Voice control is why WCAG 2.1 introduced SC 2.5.3 : "For user interface components with labels that include text or images of text, the name contains the text that is presented visually." However, that SC does not require visible labels.)

If you don't want a visible label, you need to be aware about the precedence rules for "accessible name calculation". WAI-ARIA 1.1 contains some basic information about this:

name comes from values provided by the author in explicit markup features such as the aria-label attribute, the aria-labelledby attribute, or the host language labeling mechanism, such as the alt or title attributes in HTML, with HTML title attribute having the lowest precedence for specifying a text alternative.

This means that you should expect a screen reader to read out the value of the aria-label attribute instead of (not in addition to ) the value of the title attribute. A tooltip would just show the content of the title attribute, as expected (but screen readers don't use a mouse unless they have some residual vision).

Since the accessible name calculation algorithm in WAI-ARIA 1.1 is a bit short, the W3C is working on a more detailed algorithm in a draft specification that is currently available on GitHub. See paragraph 5.1.1 in HTML Accessibility API Mappings 1.0

However, the official specifications that are relevant to this question are currently WAI-ARIA 1.1 (cited above) and Accessible Name and Description Computation 1.1 from December 2018.