Add another thing

[HelenOsg]

What

This pattern is trying to capture details for multiple items of the same things, for example the need to capture details of a user's job and then ask the user if they have another job - building a picture of multiple jobs/employment. It was found on Apply for New Style ESA replaying one of the data fields, the most relevant to the theme of the questions (in one example the employer name) helped the user identify which job they were giving information about. Having a replay of the employer questions they have just answered "You've told us about XXXX" helped the user to separate individual job details This pattern has been used in a number of question themes within the online form, anywhere where multiple items of a thing need to be captured E.G. Voluntary work, Pensions, Health Insurance.

Example: Apply for New Style ESA

Example: NSJSA

Why

The 'Add to a list' pattern doesn't work for this as it's not adding one element but collecting a larger amount of data about users employment, such as; employer details, working pattern, any expenses paid and other data attributes. So we needed to have multiple data inputs associated with the job/s and this didn't fit with the existing 'Add another' pattern

Anything else

Original issue information: 4 Feb 2019 @srich-DWP https://github.com/dwp/design-system-community-backlog/issues/10

[HelenOsg]

Get an updated view on pattern and research. Speak to Rich. identify other services using it.

[htmlandbacon]

Following a workshop and review with @jon-houghton - we ended up with this.

[jonhurrell]

@abbott567 Do you have any suggestions or advice around how we can accessibly describe a multi-step user journey in an image, or is it an acceptable user experience to embedded (admittedly lengthy) content within an alt that describes the flows and UI over many screens? Is there a smarter way we can do this?

[abbott567]

Detailed reply

@jonhurrell For any complex image it's generally accepted as best-practice to leave the alt attribute blank and describe the image in the body content. This way screen reader users can access structured content if you need to describe multiple steps with headings etc. By dumping it all in the alt attribute, structure like headings and lists etc is lost.

It also means anybody else who doesn't understand the picture has access to the text alternative. By putting it in the alt attribute it isn't available to sighted users who might struggle to understand the image. GDS have recently changed their guidance to just do away with alt text in attributes all together. You can read the updated GDS guidance on alt text in the content and publishing guidance on GOV.UK.

It looks like the GDS Design System hasn't caught up yet and still has published content on alt text in the attribute, but I suspect that will change to align with the content design guidance at some point. I'll raise an issue to nudge them.

TLDR (too long didn't read)

Give the image a blank alt attribute to mark it as decorative and hide it from screen readers. Describe everything the image represents in the body copy using properly structured content. Check out the updated GDS guidance on alt text.

[abbott567]

I've opened an issue to align the guidance on alt text in the GOV.UK Design System.

[jonhurrell]

@abbott567 Thanks, appreciate the feedback.

[jonhurrell]

Published pattern. You can contribute any research or insights using this discussion