Links / Breadcrumbs

ClickUp Ticket

Considerations and techniques for alternate text for background images (summary)

Try not to use CSS for important informational images

For ambient images that are CSS, it is a courtesy to provide alternate text. When doing so, place image in its own empty <span> with an aria-label and role="img. This is also true, in a situation where CSS must be used for information content.

If the <div> with the CSS image absolutely MUST contain other content, then provide an empty <span> with an aria-label and role="img" immediately following the <div> that has the image.

Reference link

Recommended to take ~5m and review this article in full.

Functional Description

• The container should not directly have the bg-img
• The span element that contains the background image should be the first element inside the container
• The span element that contains the background image should have role="img"
• The span element that contains the background image should have aria-label as the alt text

How to use this component

• Sections that contain background images should be contained in the class section__has-background-img
• Directly within the container of the background element there should be a span with the following attributes:
  • class="section__background-img"
  • role="img"
  • aria-label containing the image's alt text

Component Example

Code Snippets

HTML

                
<section class="section__has-background-img">
    <span class="section__background-img" role="img" aria-label="Smoggy sunset of skyscrapers with pink overlay"></span>
    <h3 class="heading">Element Example</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis dignissim sem vel tristique. Aliquam at neque mollis, imperdiet metus vitae, efficitur ex. Sed vitae leo risus. Aenean consectetur at augue at fermentum. Ut purus ligula, convallis in lorem at, vulputate viverra enim. Integer vel lacus efficitur, pharetra diam posuere, laoreet turpis. Nam tristique eros erat, nec bibendum lectus luctus ut.</p>
</section>
            

CSS

                
.section__has-background-img {
    position: relative;
    padding: 10rem 2rem;
}

.section__background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80');
}
                
            

History Tracking

1. Code orginally created by Kelly; Approved by Steen on Nov 21,2023