Visuals / Image

ClickUp Ticket

WCAG Description of Component

Images must have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various disabilities. This tutorial demonstrates how to provide appropriate text alternatives based on the purpose of the image:

Reference link

Functional Description

• Alt text is required unless it's a decorative image
• Should have width
• Should have height

Reference Links

• W3 Images Tutorial
• W3 Using alt attributes on img elements
• W3 Decorative Images
• W3 H37: Using alt attributes on img elements
• Article — Quick Tips: How to fix "Image elements do not have explicit width and height" in Page Speed Insights / Lighthouse

How to use this component

• Include alt="" on the img tag
• Include width="" on the img tag
• Include heigth="" on the img tag
• A class called img has been created to include the image is responsive

Component Example

Code Snippets

HTML

                
<img width="1168" height="780" class="img" alt="Smoggy sunset of skyscrappers with pink overlay" src="https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80">
            

CSS

                
.img {
    width: 100%;
    height: auto;
}
            

History Tracking

1. Code orginally created by Kelly; Approved by Steen on Feb 5, 2024