Images

[govuk-design-system]

Use this issue to discuss images in the GOV.UK Design System.

Description

When and how to use imagery on GOV.UK.

[selfthinker]

It would be good to add other techniques of adding images, not just <img />.
That becomes especially important when people don't know how to add alternative text with other techniques.

SVGs with information:

<svg aria-labelledby="alt-id">
  <title id="alt-id">Alternative text</title>
  ...
</svg>

Decorative SVGs:

<svg aria-hidden="true">
  ...
</svg>

Background images are treated as decorative by default. Adding alternative text can be done in multiple ways, for example by adding text within a visually hidden element.

But more people benefit when the alternative text is visible to everyone. That's true for all techniques.
The GOV.UK content guidance has recently been updated to say that:

Describe what’s happening in the image in the body text and leave the ‘Alt text’ field empty. This means the description is available to everyone.

Although the Design System should probably not be as absolute as that, it's worth mentioning it as a good alternative option.

There are more techniques, like icon fonts and special characters like emojis. But I suspect they won't be very relevant to the Design System and/or government services in general.

[CharlotteDowns]

Revisit guidance on alt text

We updated the alt text guidance on the images page of the GOV.UK Design System, to be clearer about what to include.

While looking at this, we agreed to review the rest of the alt text guidance in the future.

We want your help to improve this page. Tell us your ideas, experiences, and best practices for writing alt text. Alternatively, you can propose a direct change to the code using a pull request.

[Nooshu]

Adding another vote for guidance around the correct use of SVG's on a page. I had feedback asking where guidance could be found as the service is using an SVG image (so it scales) within a anchor to link to another service (on the NHS). It could cover:

• optimisation: e.g. SVGOMG
• accessibility (mentioned above)
• fallback options for older browsers.

[Nooshu]

We could consider adding a responsive image solution that also factors in more modern image formats (e.g. WebP, AVIF, JXL). Example markup using the <picture> element and <source>. E.g:

<picture>
  <source srcset="/images/priority-hints/image-name.avif 794w" type="image/avif"> 
  <source srcset="/images/priority-hints/image-name.webp 794w" type="image/webp"> 
  <img loading="lazy" class="figure__image" src="/images/priority-hints/image-name.png" alt="Image alt text" width="794" height="596">
</picture>

Can be used as a progressive enhancement, with older browsers falling back to the PNG.

[selfthinker]

Another small accessibility-related thing about inline SVGs is that they are focusable in IE. That means it can get quite annoying on pages with multiple online SVGs for people who navigate with keyboard only (including screen reader users).
Although that's a browser bug, it's quite easy to fix: Just add focusable="false" to the <svg> element.

[vickytnz]

I'm looking for examples of more specific image information. The closest I've found so far are:

HMG (Her Majesty's Government)

HMG guidelines

There is separately guidance about accessible animations and videos as part of "How to create accessible content for websites" section of GDS guidance 'Planning, creating and publishing accessible website content'

Home Office
Their design system has a page on images with a section about illustrations

Illustrations must have a consistent style to create trust. This includes print products as well. If your image represents something physical, such as a document, you should use the aspect ratio of that object.

Office for National Statistics (ONS)
No illustrations, but guidance on interactive charts and animations (focusing particularly on accessibility), diagrams (again, mainly about aaccessibillity), and using colours

Department for Work and Pensions (DWP)
No information about illustrations in the DWP Design System or communication standards guidance

HM Revenue and Customs
No information about illustrations in the HMRC Design system - guidance in other design systems

NHS Design System
Some icons but no guidelines.

[vickytnz]

Other illustration styles out in the wild:

EU document check app
App store link

Notably, the NHS app and HMRC app do not use illustrations (I think)>

[cristina-agramunt]

Other illustration styles out in the wild:

EU document check app App store link

Notably, the NHS app and HMRC app do not use illustrations (I think)>

Hi, I am also looking for information on the usage of illustration. The example you have used here is fairly similar to what we use on the Apply for a Nino - instructing the user to take a "selfie" and take photos of their documents using illustrations.

Unfortunately I have not found any specific guidelines about using illustrations or photography. Are we good to just use illustrations? Should we use photography instead?

My concern with illustrations is about the perfection on them. We have observed an issue on the Apply for a Nino application, specifically on the selfie with a passport screen, where users are having issues to get the passport readable.
The thing to note is that on that step, we are not concerned about readability but if the person on the passport matches the one on the selfie. The illustration shows the passport very clearly and crisp, so I am thinking that this is not helping the user to have confidence to submit a photo where the passport text is blurry.

[benhazell]

Recommend remove 'mainstream' from first par under Alternative text.
Mainstream is 2500 pages managed by GDS, but this guidance also applies to all content on www.gov.uk produced by depts, the half a million 'whitehall' pages.

Alternative text
This guidance is for government teams that build online services. To learn about publishing alternative text in GOV.UK content, go to GOV.UK’s ‘Images’ guidance.

[beccagorton-1]

We've used images on our DFE service, which is a training platform for early years providers. We had overwhelming feedback during alpha about breaking up the text heavy nature of a training service, with positive imagery, which we use for decorative purposes. We have used a few diagrams, and where we have done so we add the detailed explanation of the diagram in the main body of the learning material. We've found that users find training more engaging with images, and it encourages a positive learning environment.

[calvin-lau-sig7]

In March 2023, we updated the Images page to help teams make decisions on when to use images in their services.

In particular, we added a section on how to use images and ensure they’re as accessible as possible — giving advice to teams on how to meet or surpass relevant WCAG AA guidelines, in line with the GOV.UK Design System accessibility strategy.

To help us validate that this guidance is useful and practical for service teams across government, we want to hear from you.

We’re looking for feedback about any of these areas:

• how you use images to give information to users
• examples of the types of images used in services
• how you create and choose images to use in your service
• how you implement images (for frontend performance)

Give us your feedback and examples by posting a comment in this discussion.

[CharlotteDowns]

We have removed the 'Experimental' tag from components, patterns, and guidance in the Design System 😌.

The tag was being used on the images guidance to raise awareness that more research is needed to validate it.

We still want to get this feedback and we recently published new guidance on how to share findings from users which we hope will make it easier to collect information about how our Design System is being used across services.

[nhsbsa-jrhut]

Insights

On the Baby Loss Certificate service, we have used an image of the blank certificate that users will receive to set expectations and remove concerns and worries users had about what it would look like when they receive it.

We also found that users wanted the image to open in a new tab so they could refer to it when completing the rest of their application to see how the answers would be used.

From user feedback, we added the text "SAMPLE" to make it clear that this was a sample and would not display any information the user has entered so far.

Methods

Findings were gathered from user research sessions and feedback received from service surveys.

“I thought it was very helpful to be able to see a blank certificate before completing the form”

More information

Prototype link (password: NHSBSA)