Essex County Council logo Essex.gov.uk

alphaThis is our new digital manual - it's a work in progress.

Using images on web pages

Only use images if it adds value and purpose to your content. For example, images showing:

  • different types of potholes to report a dangerous pothole
  • different wedding venues for weddings
  • a caravan’s internal layout for booking short breaks

Make your images accessible

If you’re adding images to a web page, make sure they are accessible to everyone including those that use assistive technologies.

Alt text allows assistive technology to describe the image to people with visual impairments.

Alternative text (alt text)

Before adding alt text, you need to 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 the image is decorative and 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

Here’s an example of good descriptive alt text. Insert image Alt text: Doctor writing up notes in surgery

Here’s an example of a bad alt text. Insert image Alt text: Nominations open for the 2020 Essex Teaching Awards

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.

GIFs and animation

GIFs and animation are distracting and people with seizure disabilities or sensitivity to motion may dislike moving or flashing images.

GIFs and animation should only be used if there’s a clear user need. They should contain no more than 3 flashes per second.

If you’re using them to explain something, provide a text alternative, captions or transcripts in the body text.

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.

The W3C has a tutorial on making complex images accessible.

Short description

This is a brief description of the image that you add to the alt text.

An example is: Bar graph showing council tax totals for 2019.

Long description

This is where you explain the content of the image in greater detail so a user who may not understand the visual image can have a full text alternative.

An example is: The bar graphs shows how much is spent each day on the following services:

  • Adult social care, £1,698,647
  • Schools, £1,250,376
  • Children’s services £360,496
  • Early years and childcare, £264,404
  • Environment and waste, £224,404
  • Public health, £175,131
  • Infrastructure, £174,819
  • Library services, £38,739
  • Economic development, £18,582
  • Coroners services, £9,198
  • Country parks, £8,917
  • Registrar services, £6,961

Logos

Don’t use logos to brand web pages or acknowledge partners. Logos should only be used if there’s a clear user need. For example, using the Verify Visa logo for taking payments as this is seen as a trusted source.

GOV.UK has more guidance on using logos.

Buttons and icons

These should only be used if there’s a clear user need and not for decorative purposes.

For example, see our contribution calculator which has a start button that serves a function.

Image maps

Don’t use geographical maps as images unless they are essential to the content.

You can use interactive maps like Google maps that allow someone to navigate them using a keyboard.

Provide a text alternative in 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. See our visit us page.

Adding images on webpages

Images should be:

  • in landscape format
  • high resolution that can be resized appropriately
  • less than 500KB per image
  • saved as .jpeg files – this format is better for photographs

Avoid using images with a white background. Use background colours to give good colour contrast.

Only include images that you have permission to use.

If you’re using images with copyright restrictions, make sure you give the appropriate credit to the owner.

If you’re using photographs of people, make sure you have their consent before using them.

Contact the Communications and Marketing Content Team for advice on using images and copyright. Email them at picture.desk@essex.gov.uk.