What is the Equivalent of the “alt” Attribute for div Elements?

Sometimes, we want to add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision.

In this article, we’ll look at how to add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision.

Equivalent of the “alt” Attribute for div Elements

To add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision, we can set the role attribute to img, then we can add the alt attribute to the div.

So we can write:

<div role="img" alt="heart">
  ♥︎
</div>

if the div has an image as its content.

If the div has non-image content, then we can set the role to text along with the aria-label attribute with the text description of the div’s content.

To do this, we write:

<div role="text" aria-label="Rating: 100%">
  Rating: ★★★
</div>

Conclusion

To add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision, we can set the role attribute to img, then we can add the alt attribute to the div.