I have a site that is displaying many of its images as background images using background-size: cover
to size them to completely fill the element while cropping off any parts of the image that don't fit.
The problem is that these images are NOT purely decorative. They are a critical part of the informational content of the page. This means they need alt
text in order to be accessible to screen readers and other assistive technologies.
What is the most semantic way to add alt
descriptions to background images?
article {
position: relative;
width: 320px;
margin: 5rem auto;
}
figure {
width: 100%;
height: 180px;
/* not accessible */
background-image: url('http://www.fillmurray.com/300/300');
background-size: cover;
background-position: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<article class="panel panel-default">
<header class="panel-heading">
<h4 class="panel-title">Title of Article</h4>
</header>
<div class="panel-body">
<figure class="article-image"></figure>
</div>
<footer class="panel-footer">
<a class="btn btn-default" href="#">Read</a>
</footer>
</article>