Images and iconography

Introduction

Imagery is a vital webpage component, that can help us create a smooth flow of content and aid comprehension for many users, for example, people with learning difficulties often better understand complex information in a visual format.

Images and alt text

It’s important we apply the correct alt text so all users can access images. The alt text article has more information on how this can impact different users in different situations.

This article will focus on the additional principles and techniques related to images which should be considered to make sure they’re accessible.

Image quality

It’s important to consider image quality not only in relation to different device sizes and resolution, but also for accessibility.

Users with low vision may use a screen magnifier to help them interpret content on the web. When a raster image is enlarged, there’s a risk that the quality will deteriorate, and any text or highly detailed areas of the image will become pixelated and hard to interpret.

Text within an image

Screen readers cannot read text that is embedded within an image. WCAG tells us that any text that’s a part of an image (i.e. cannot be highlighted or selected in the browser) should be avoided, and real text should always be used.

Images of text, such as a logo or brand name are exempt from this rule.

If it is absolutely necessary to create an image with text in it, these rules apply:

• Text size
  The text must be a reasonable size so that it’s still readable and not overly pixelated when zoomed in – as a general rule, at least 14px in size
• Colour contrast
  Text and functional graphic elements must comply with rules around colour contrast
• Exporting as SVGs
  These types of images should be created in a vector program like Illustrator or Sketch, and exported as SVG files – this is covered in more detail later in this article

Iconography

Icons are often used to supplement or replace text. It’s important they’re carefully considered however, so they’re well-designed, easily understandable and consistent in their usage.

Bear in mind the following when creating an icon or icon set:

• Familiarity
  Icons almost always require familiarity to be useful, and very few icons are considered universal. Examples of familiar icons are ‘home’ or ‘print’ icon. This could be mitigated by using text labels alongside (or instead of) icons, to improve usability and understanding.
• Interpretation
  Bear in mind, there is the potential for icons to be interpreted differently across different cultures and languages.
• Scalability
  The visual detail in the design must scale well. Images must not break down at a small size, because this may affect people’s ability to process and understand the icon.
• Colour contrast
  Icons must follow colour contrast ratio rules with a minimum contrast ratio of 3:1

Scalable Vector Graphics (SVGs)

SVG graphics offer the most flexibility with regards to accessibility. That’s because they:

• can be scaled while retaining quality
• are small in size when optimised
• are editable in both graphic programs and text editors
• are quick to load.

When exporting an image as an SVG it’s best to add to the page using the standard <img> element (ie. treat the SVG image as you would a PNG or JPG).

It’s also possible to embed SVG content directly into the page, and this is often done when the SVG represents something complex like a graph or chart. There are several approaches for this:

Treating the SVG as a static image

The following applied to the <svg> element, allows screen readers to treat an SVG as a static image:

role=”img” and aria-label=”a short text description”

The rules for providing alt text, and potentially a long description, will apply here. These are outlined in our alt text article

Making the SVG content accessible

Alternatively, we can make the SVG content itself accessible. This works for images which are very simple – such as a basic bar chart or line graph. If the image is too complex, then there isn’t a way to make the content usefully accessible.

The SVG content can be made accessible using ARIA.