Improve Images page guidance about alt text

[EoinShaughnessy]

What

Update our Images guidance's section about alt text.

Why

The current image in the guidance is not a realistic example of an image seen in a service. We now need to add a better one, because the Accessibility Team want to:

• link the GOV.UK alt text guidance to ours
• tell their users to follow our guidance when using images and alt text within services

Also, there may be an issue with recommending that it's sometimes ok to leave the alt attribute empty. When you do that, screen readers do not announce there's an image on the page, which could exclude some users from knowing the image exists.

Finally, we could also describe some different ways of adding images.

For full context on these issues, and the previous update to this guidance, see the closing comment on #1893: Inconsistent GDS guidance on ALT text.

Epic lead

Calvin

Who needs to work on this

Content designer or technical writer, designer, developer, accessibility specialist

Who needs to review this

Design System teammates, people from the Accessibility community

Done when we

• [x] find a suitable image, if necessary write alt text for it, and add it to our guidance
• [x] work with the Accessibility Team to find out what use of the alt attribute best helps users
• [ ] revise current guidance to reflect new image and any user research from the Accessibility Team
• [ ] add content about different ways of adding images

[EoinShaughnessy]

@joelanman After asking around, I heard about this image in the 'Renew a passport' service:

Would that be a good example of an interactive image within a user journey? Or is it not, because the pictorial content and the interactive bits are separate from each other?

[EoinShaughnessy]

Update after talking to Accessibility Team:

The 'Renew your passport' image in the previous comment here is probably a good example for us to include - as long as it has good alt text. The alt text needs to say the text that's in the image.

Also, it's ok that the pictorial bits are not something users have to click on, because the 'previous' and 'next' buttons are themselves parts of the image - which means we can define the image as being interactive.

We also need to check how the screen-reader navigation/alt text work when you click on 'previous' and 'next' within the service.

[StephenGill]

Hi,

I suspect that the text and navigation aren't part of the element - they're probably marked up as separate elements.

But I don't think you need to get into that here: it's pretty specific to that context, and you want something that's useful in a variety of contexts.

Suggest:

• cropping the image show it only shows the four diagrams
• say we don't use images for the sake of it - but it's ok to use this sort of image if it helps to clarify things
• but you must also include equivalent information in text form

On Tue, 1 Feb 2022 at 12:47, EoinShaughnessy @.***> wrote:

Update after talking to Accessibility Team:

The 'Renew your passport' image in the previous comment here is probably a good example for us to include - as long as it has good alt text. The alt text needs to say the text that's in the image.

Also, it's ok that the pictorial bits are not something users have to click on, because the 'previous' and 'next' buttons are themselves parts of the image - which means we can define the image as being interactive.

We also need to check how the screen-reader navigation/alt text work when you click on 'previous' and 'next' within the service.

— Reply to this email directly, view it on GitHub https://github.com/alphagov/govuk-design-system/issues/1988#issuecomment-1026805376, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABI6BP3XBXYWR6OVFIJQQ6TUY7I4VANCNFSM5JG5FATQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.***>

--

Stephen Gill Content lead, services programme Government Digital Service

T: 077962 98949

[dav-idc]

Here's a cropped version of that image (sourced from here):

[dav-idc]

Here's a first-draft of the alt text for this diagram, baed on the limited context I have of the service fro which it originated.

Feel free to suggest edits or improvements! My goal will be to keep the alt text to two sentences and 240 characters, while conveying the important contextual information shown in the image.

Proposed alt text: first draft

"Three illustrations show methods of taking a passport photo. Two incorrect methods show the person taking a close-range photo using a selfie camera or webcam, while the correct method shows someone helping to take a photo from a distance."

(Character count: 238 characters)

(Note: ideally the alt text would be under 140 characters so it's read out all in one line by a screen reader, but that's not a strict requirement. As Stephen suggested above, including equivalent information in text form would allow us to trim down the alt text even further.)

[jbuller]

I Am Not A Content Designer But here's my stab, in the top to bottom order of the image:

Illustrations of portrait photo-taking methods. Correct way is someone taking a photo of a person from a distance. Two incorrect ways show a person using a phone to take a selfie and using a laptop webcam at short range 219 characters

[calvin-lau-sig7]

Thanks both! Here's a suggested edit to get this into GOV.UK recommended plain language and writing style.

3 illustrations show different ways to take a passport photo. 2 incorrect ways show the person taking photos at close range on their own using a phone's selfie camera or webcam. The correct way shows another person helping to take a photo from a distance.

Any thoughts if we should mention the 'sight lines' capturing the head and shoulders? So something like this for the last sentence:

The correct way shows another person helping to take a photo from a distance far enough to include the person's head and shoulders.

[dav-idc]

Thanks so much @calvin-lau-sig7!

Based on the text that was originally placed beside the image, I think the "sight lines" info would be of lower relevance (but probably should be added to the in-page text instructions).

As for this new alt text, I see it hits 242 characters. I heard from Marian on the GOV.UK team that 240 characters is the max limit for alt text in GOV.UK, so I'm thinking we should stay below that. Could we shave off 2 characters somewhere perhaps?

(Side-note: Generally, the goal would be to keep alt text below 140 characters whenever possible - but even that limit is fairly arbitrary. I think in this case, the additional text is helpful though. An alternate approach would be to split the image up into 3 separate illustrations, but that would likely make it even more confusing to navigate.)

[EoinShaughnessy]

Another iteration to hopefully reduce the character-count, while retaining the necessary info:

3 illustrations of how to take a passport photo. 2 incorrect ways show someone taking their own photo with a phone camera or webcam. The correct way shows someone else helping to take a photo from a distance that includes the person's head and shoulders.

Also worth mentioning, although I'm not sure about its relevance here - the style guide (see its section on 'Numbers') says, "If a number starts a sentence, write it out in full"...

[EoinShaughnessy]

@calvin-lau-sig7 @davidc-gds I think this is 239 characters long:

Three illustrations of taking a passport photo. Two incorrect ways show someone taking their own photo with a phone camera or webcam. The correct way shows someone else helping to take a photo that includes the person's head and shoulders.

[calvin-lau-sig7]

Had a chat with @StephenGill who clarified his earlier suggestion:

• cropping the image show it only shows the four diagrams
• say we don't use images for the sake of it - but it's ok to use this sort of image if it helps to clarify things
• but you must also include equivalent information in text form

Basically, the 'passport photo' example he sent in isn't a good candidate for alt text. And can't think of a scenario (ideal enough for us to put up as an example) where an image would need alt text — its information would be explained in body text and only be used as an enhancement.

From our convo, my thinking our approach might be to:

• align more with GOV.UK's image guidance (link out or add) — e.g. 'You should describe what’s happening in the image in the body text'
• leave in the DS alt text guidance, with a qualifier — e.g. 'If you need to give information in alt text instead of body text, you should:"
• remove the example, as it we've not seen an appropiate image or use case for this within a service

[edwardhorsford]

I worked on the above passports page.

As @StephenGill notes, the navigation is regular html navigation, not part of the diagram. The diagram is not interactive.

I suspect we would have used an empty alt text for the diagram as it's a visual representation of the text on the page.

I should note that I don't think the above diagram is in use any more on the Passports service - at least I can't see it.

[calvin-lau-sig7]

A GOV.UK accessibility expert, wrote this note:

Images of text

There are two main points I'd like to make...

If marketing images of text are "essential" (which is what WCAG calls its one out of two exceptions) is very much a grey area that we actually don't agree on. The annoying thing is that the Understanding document was written in 2008 when their main concern was having headings as images and when CSS wasn't evolved as much as it was today. That's why some of the things in the Understanding document can be somewhat contradictory.

But having the text on the image repeated close to the image is a sure way to pass that WCAG success criterion.

The other thing I wanted to clarify is that the text close by doesn't actually need to be the exact same text on the image. But it needs to have the same meaning.

Some examples...

During the last session Esther gave the example of BEIS' department page on GOV.UK. When we discussed this particular case in the surgery we decided which instances of the "featured" articles at the top we would pass or fail. I've made this spreadsheet with the results. But to summarise...

We only agreed in two cases if the image is exempt or not. But it doesn't matter if the image of text is exempt if the text close by is a valid alternative. We would pass four instances, fail two instances and are not sure if to pass or fail two more instances because we're not sure if they are exempt.

(The page has been updated since then, that's why there is one additional entry in the spreadsheet that's not on the page.)

The general outcome which is the most relevant for the image policy is that if you cannot avoid having images of text you should always convey the same meaning in text close to any image of text. That will always pass WCAG, no matter if the images are exempt or not.

[dav-idc]

Latest update on image guidance progress

On 1 June 2022, members of the GOV.UK Design System team met with members of the GOV.UK content team and with accessibility specialists.

Things we agreed on

• An image should be considered as a visual aid
• Informative image content should always be available in the body content

Proposed changes going forward

• How things are named:
  • ‘Alt text’ and ‘alternative text’ refer to the alt="" attribute
  • ‘Text alternatives’ is the term for anything else which conveys the information in the image, for example text descriptions, captions, content in the body content, etc.
• The GOV.UK image guidance may be updated, based on new insights provided by an accessibility expert on the GOV.UK team
• Link the two sets of guidance in some way, and clarify which audiences should follow which guidance

Questions that still need to be answered

• What file formats should be used for images, and when?
• What do we do about images, illustrations or graphics that include text in them?
• Is there a better word than ‘context’ to explain what value of the image needs to be conveyed in alt text and text alternatives?

Next steps

• The GOV.UK team will determine how and when to update their image guidance
• The Design System team will continue to work towards publishing the updates they have for now
• The Design System team will look at the proposed changes and questions above and try to incorporate any answers into their update

[calvin-lau-sig7]

We're merging the PR for this with #2239 , as the content is being consolidated together as a single update (see 'headings sort' in this doc)

Moving forward, PR for both issues will be #2059