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.

Copy
1<div
2  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.

🍃