What attribute use to put captions hidden in HTML (do not want in CSS) for the visually impaired?

Question

What attribute use to put captions hidden in HTML (do not want in CSS) for the visually impaired?

Navigation

#1 by (1 votes)

0

I would like to put a caption hidden in an image using only HTML, but it is not the title of the image when I put the mouse over it, it is an attribute of the image, a legend that does not appear for normal users, but when a visually impaired is using a text-reading tool, the program or tool reads this caption that the programmer has placed and thus helps the viewer to access information describing the image.

html img

asked by anonymous 27.07.2017 / 23:37

1 answer

Event on element created after DOM loading Know years, months, days, hours, etc ... That have passed since a certain date

score 1 · Answer 1

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, is used to define a string in the tag of the current element. It can be compared to 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 noticed that:

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