Andrew's Digital Garden

Using title for a11y

From my understanding, using just title to provide information for screen readers isn't consistent enough to be a recommended solution. Seemingly some screen readers do not read the title when it is attached to some elements, although it will still display a tooltip for sighted users which can be helpful.

Perhaps a better solution is to use aria-label (or other methods, such as SR-only text, aria-labelled-by, etc.) when trying to communicate to sighted readers, or using both aria-label and title when trying to add more information.

If the tooltip itself is meant to be accessible, there's entirely different patterns that help solve that. Look into aria-described-by and aria-labelled-by. Tooltips in general have problems with accessibility, considering touch screens, input methods, etc.

title does work better on <input> elements, but even then it's not ideal.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#accessibility_concerns https://inclusive-components.design/tooltips-toggletips/ https://dev.opera.com/articles/ux-accessibility-aria-label https://silktide.com/blog/i-thought-title-text-improved-accessibility-i-was-wrong/

[[a11y]]

Using `title` for a11y