Avoid unnecessary decoration. Only use images if there’s a real user need.

Illustrations or representative imagery

If your image represents something physical, such as a letter, document or credit card you should use the aspect ratio of that item.

Hero or banner images

When using hero or banner images that fill the width of the users screen:

• when scaling down to small screens, a dominant colour of the hero picture to be used as the hero
• hero image criteria has to account for accessibility, contrast ratio, left hand side needs to be empty
• font colour to be defined by this
• maximum font size adjusted to hero content

Alternative text

Alternative text, or alt text, is read out by screen readers or displayed if an image does not load or if images have been switched off.

All images, except decorative images, must have alt text that:

• tells people what information the image provides
• describes the content and function of the image
• is specific, meaningful and concise

Use normal punctuation, like commas and full stops, so the text is easy to read and understand.

Do not:

• include the name of the photographer or person who created the image
• start with ‘Image of’, ‘Graphic of’ or ‘Photo of’
• repeat information from the page
• include extra information not on the page

Some images do not need descriptions. Use alt="" if the image is:

• decorative and does not include important content
• an icon that has a text label that the alt text would repeat
• used in a link and the image is not needed to understand the link

Use the Web Accessibility initiative alt decision tree to work out if the image needs alt text.

Avoid images that contain text, especially PNGs and JPGs because the text becomes unreadable when the user zooms in. If the image does contain text, use SVG because it remains readable when the user zooms in. The alt text should be the same as the text displayed in the image.

Back to top