Images on web pages
Images can enhance understanding, but they must be purposeful and accessible. Every image should support the user’s task — not distract from it.
Make your images accessible
If adding an image to a web page make sure it is accessible to everyone including those that use assistive technology. Alt text helps assistive technology understand what the image shows.
Before adding alt text, you must decide if the image is decorative or informative.
Decorative images
Decorative images can be used for a news story or a social media post.
If it doesn’t add value to the content you can help assistive technology users ignore it. You can do this by:
- marking it as decorative in documents or other applications that include this as an option
- setting the alt text to null in the code (alt=””)
Informative images
Informative images must have alt text that:
- tells the user what information the image provides
- is meaningful, concise and no more than a sentence or two
A good way to think about alt text is how would you describe the image to someone who was on the telephone.
Avoid:
- using ‘image of’ or ‘photo of’. A screen reader will already read this out
- repeating the surrounding text like the title of a news story or guidance it relates to
Text on images
Don’t include text on your images. This is not accessible for people using screen readers. Search engines also cannot read information in images.
If the text is an important part of the content, write it in the body content.
Using complex images or diagrams
This includes flow diagrams or infographics.
Consider whether the information on diagrams or illustrations is better presented with text including headings and sub headings.
If these flow diagrams or illustrations help add more information and make things clearer, then include them and provide alternative text in the body content.
You should:
- add diagrams and illustrations as one image and not as separate components
- add alt text
- save them as .png files as this format is better for diagrams that include text and clear lines
Using charts and graphs
Complex images like charts and graphs can be difficult for some users, including those with low vision and learning disabilities to understand.
You need to include both a short and long description of the chart or graph.
Short description – This is a brief description of the image that you add to the alt text. For example, Bar graph showing number of potholes reported for 2024.
Long description – This is where you explain the content of the image in greater detail so a user who many not understand the visual image can have a full text alternative.
For example, Bar graph shows how many potholes reported in the following areas:
- Stafford, 99
- Staffordshire Moorlands, 101
- East Staffordshire, 72
- Tamworth, 91
- South Staffordshire, 189
Buttons and icons
These should only be used if there’s a clear user need and not for decorative purposes.
Maps
Don’t use geographical maps as images unless they are essential to the content. You can use interactive maps like the LocalGov Drupal location component or Google Maps that allows someone to navigate them using a keyboard.
Provide a text alternative in the body content for users who aren’t able to use the map. This could be the address and directions to get to the location.
