Alternate text for Background Images
Add alternate text to Background Images for accessibility purposes

For those times when you need to use background-image
instead of using img
tag because of some design related constraints.
With background image, there is no attribute for alternate text alt
. But there is a way to do it.
1<div2 role="img"3 aria-label={article.img.title}4 style={{5 background: `url(${article.img.src})`,6 backgroundPosition: 'center',7 backgroundRepeat: 'no-repeat',8 backgroundSize: 'cover',9 }}10>11 <p className="hidden">{data.frontmatter.title} image</p>12</div>
Here, the trick is using role
and aria-label
, that is it. We’re setting the role of the div to img. And providing the alternate text with the help of aria-label.
🍃