What attribute do I use to put closed captions in HTML (not CSS) for visually impaired?

Question

I would like to put a hidden caption on an image using HTML only, but it’s not the title of the image when I put the mouse on top, it’s an image attribute, a caption that doesn’t appear for normal users, but when a visually impaired person is using a text reading tool, the program or tool reads this legend that the programmer has placed and thus helps the visually impaired person to have access to information that describes the image.

Answer 1

The ARIA is a set of special attributes for accessibility, which can be added to any markup language, but is especially suitable for HTML. - MDN

The attribute aria-label, in particular, it is used to define a string in the tag of the current element. It can be compared with other image description methods in the following example:

<img 
  src="//example.com/404.png"
  title="mouse hover" 
  aria-label="screen readers">
<img 
  src="//example.com/404.png"
  alt="erro ao carregar imagem" 
  title="mouse hover" 
  aria-label="screen readers">
<img 
  src="//via.placeholder.com/150x150" 
  alt="erro ao carregar imagem" 
  title="mouse hover" 
  aria-label="screen readers">

It is clear that:

• alt replace the traditional error icon when the src is invalid;
• title displays a small text when the cursor rests on the image; and
• aria-label configures a text to be processed by the screen reader.