title
for a11yFrom 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/