Using images in content

Using complex images in content

Start with Before you use images in content before adding complex images.

Make sure everyone, including people using screen readers, can access information in complex images.

On this page

Quick checklist: is a complex image needed?

Use a complex image only if all of these are true:

  • There is a real user need for the image.
  • Text alone cannot clearly explain the information.
  • The image helps people understand content in a different way.
  • All essential information can be provided in nearby text descriptions.
  • You can add short alt text summarising the image (up to 150).
  • You have the rights and permissions to use the image (especially for photos of people).

If these conditions are not met, use clear written content instead.

What complex images are

Complex images are a type of informative image that contain too much information to describe fully using short alt text alone.

Examples include:

  • Maps showing multiple locations or geographic areas
  • Charts and graphs, including flow charts and organisational charts
  • Diagrams and illustrations that the page text relies on

Describe complex images

Make complex images accessible:

  • Decide why the image is included before describing it.
  • Add short alt text to briefly identify the image (up to 150 characters)
  • Describe all key information or trends in nearby text (above or below the image)

Why this matters

Complex images, such as charts, diagrams, infographics, or maps, contain too much information to be described by alt text alone. Providing a clear text summary or description ensures that people who cannot see the image can still understand the information. 

This principle applies to all content formats, including web pages, Word documents, and PDFs.

Example: a line chart showing library visits over time

Image: A line chart showing monthly library visits from January to June.

Nearby text: "Library visits increased steadily from January (12,000 visits) to March (15,500 visits), dipped slightly in April to 14,800 visits, and rose again in May to 16,200 visits before declining to 15,000 visits in June. The busiest branches were Mansfield Central Library, Newark Library, and Worksop Library. Overall, total visits increased by 8% compared with the same period last year."

Image alt text: "Line chart showing monthly library visits in Nottinghamshire from January to June, as detailed above."

Maps

Maps show geographic areas or locations. They can be navigational or reference maps.

Drawings, graphics, or diagrams that do not show geographic areas are not maps.

Navigational maps

Navigational maps help users find a location or show critical information, such as road diversions.

Design requirements 

  • Show routes, addresses, or critical locations clearly
  • Include landmarks only if they help navigation
  • Can be a static graphic or drawing.

Accessibility requirements

  • Provide a full text description nearby with all navigational details, such as addresses, routes, or instructions
  • Leave alt text empty unless the nearby text refers to the map
  • Avoid visual elements that do not support navigation

Example: navigational map

Image: Map image showing Newark Town Hall, roads, train station, and car park

Nearby text:

"How to get to us:

  • The Newark Town Hall is at Market Place, Newark-on-Trent, NG24 1DU
  • Accessible via A46.
  • 5-minute walk from Newark Castle station.
  • Parking at London Road car park."

Image alt text: Leave empty if the map is fully explained in nearby text. If the nearby text refers to the map, use: "Map of Newark Town Hall, train station and car park"

Reference maps

Reference maps show geographic features or areas of interest, not directions, like a planned development.

There are two types of reference maps:

  • Complex reference maps contain multiple layers of information and require nearby text descriptions.
  • Simple reference maps can be explained with alt text alone.

Design requirements

  • Show geographic features, locations, or areas clearly
  • Include labels for key features relevant to the content

Accessibility requirements

  • Complex reference maps: Provide a full nearby text description and brief alt text
  • Simple reference maps: Add alt text summarising the map in 1 to 2 sentences (up to 150 characters)
  • Include the type of map (survey area, planned development)

Example: complex reference map

Image: Detailed map of planned housing development, including roads, lots, parks, and community facilities.

Nearby text:

"Planned housing development overview:

  • Main access road from High Street
  • 120 residential lots, numbered 1 to 120
  • Community park in the centre
  • Local school and shops on the north side
  • Pedestrian pathways connecting all areas"

Image alt text: "Detailed map of planned housing development with roads, lots, parks, and facilities, as detailed above"

Example: a simple reference map

  • Image: Simple CGI map showing a new housing development in an online press release
  • Image alt text: "CGI graphic showing new housing development, school and car parks"

Charts and graphs

Charts and graphs show structured data. Use them only when text cannot explain the data clearly.

Design requirements

  • Single, flat image
  • All text horizontal (left to right)
  • Visible title above the image
  • Legend or key explaining colours or patterns
  • Axis and data labels clearly visible
  • Clear layout, minimal clutter

Accessibility requirements

  • Provide a long text description nearby explaining all data
  • Add alt text briefly describing the chart and pointing to the longer description
  • Ensure colours meet accessible contrast ratios (minimum 3:1, ideally 4.5:1)
  • Do not rely on colour alone  - add labels or patterns as needed

Example: Bar chart showing Nottingham and Nottinghamshire visitor statistics

Nearby text: A bulleted list detailing the same data as in a chart

"Visitors to Nottinghamshire attractions in 2024:

  • Sherwood Forest Visitor Centre – 120,000 visitors
  • Bestwood Country Park – 95,000 visitors
  • Rufford Abbey – 85,000 visitors
  • Gedling Country Park – 40,000 visitors
  • Newstead Abbey – 35,000 visitors

Image: Bar chart showing visitors to Nottinghamshire attractions in 2024

Image alt text: "Bar chart showing visitors to Nottinghamshire attractions in 2024, as detailed above."

Diagrams

Diagrams include flowcharts, process maps, structure charts, infographics, or layouts of rooms or buildings.

Use diagrams only if they help explain a process or summarise complex information.

Design requirements

  • Clear and easy to understand
  • Obvious starting point
  • Reading order: left to right, top to bottom
  • Simple shapes with minimal text and annotations
  • Use text or patterns to convey meaning if colour is used
  • Avoid overlapping lines or arrows

Accessibility requirements

  • Format as a single, flat image
  • Add nearby text describing all information
  • Leave alt text empty unless nearby text refers to the diagram
  • If nearby text refers to the diagram, alt text should briefly describe it and point to the full text

If the diagram explains a process, provide the same process in text.

Example: Diagram with steps

Image: Diagram showing steps for reporting a pothole

Nearby text:

"Steps for reporting a Pothole:

  1. Identify Location: Note road name, landmark, and pothole size
  2. Report Issue: Use online reporting tool or phone line
  3. Verification: Council inspects reported pothole
  4. Repair: Repair scheduled and completed
  5. Update: Status updated online for the reporter"

Image alt text: “Workflow diagram showing the steps to report a pothole, as detailed in text above.”

Alternatives to diagrams

Sometimes structured text with headings and bullet points can replace diagrams. This is often better because it:

  • is accessible to more users
  • is easier to update
  • allows text zooming and resizing
  • can be read by search engines
  • displays better on mobile devices