Menu
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 aria-label and title might lead to some screenreaders reading both.Is there a better approach to achieve this?
449
aria-label should be used in conjunction with the title attribute. Aria for screen readers, and title attribute for other people who want more information about the action of the button.
Importantly, aria-labelledby overrides all other name sources for an element. So, for example, if an element has both an aria-labelledby and an aria-label , or an aria-labelledby and a native HTML label , the aria-labelledby label always takes precedence.
Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.
Like aria-describedby , aria-labelledby can accept multiple ids to point to other elements of the page using a space separated list. This capability makes aria-labelledby especially useful in situations where sighted users use information from the surrounding context to identify a control.
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
altortitleattributes 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.
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
