Accessibility for html elements

Question

I've been searching around for a more definitive answer but it seems that what I've uncovered has been out of date or the forum has a dispute as to the correct answer.

I'm building a react web app without bootstrap. Where is it appropriate to use alt vs title vs aria-label properties?

*From what I've gathered:

a and Link tags use title and aria-label
img tags use alt and aria-label
button tags use title

Answer 1

Attribute aria-label is used in the context of interactive elements that can be clicked or manipulated in some ways. This is especially the case for links, buttons, and form elements, as well as elements that have been made artificially focusable with tabindex=0.

If the element you are trying to label isn't interactive, not focusable , you are better recommanded to use visually hidden text instead of aria-label. The former is much more universally recoghized, while the later isn't guaranteed to be read in the case of a non-interactive element.

The alt attribute is specific for images , ie <img> tag, as well as image buttons <input type="image"> . Everywhere else, it doesn't exist. It is usable both for interactive and non-interactive images. Avoid using alt and aria-label on the same focusable element to avoid any possibility that one is announced but not the other (in general one totally replaces the other).

The title attribute is less recommanded nowadays, because its support is extremely variable depending on the running screen reader and browser, as well as on which element it is used. It still often works at many places though, especially links and form elements. Again, avoid using both title and aria-label on the same element to avoid any possibility that one is announced but not the other (in general one totally replaces the other).