bencullimore commented 5 years ago

Use this issue to discuss images in the NHS digital service manual

davidhunter08 commented 5 years ago

Discussion from https://github.com/nhsuk/nhsuk-frontend/issues/171

Original question: by @Demotive

Out of interest, why is the width set at 2/3 for larger screens? One could forsee uses where this wasn't the case?

Original response: by @bencullimore

Here are some notes as to why images are set to 2/3 on large screens:

Content team's needs Upon investigating our content teams needs for using images they suggested that the images should flow with the text content; not appear too prominent or separate (isolated). They also recommended that captions are as important as the images themselves, so must reflect this in their importance on the page.

How to present images We found gallery views (images side by side) confusing to users - this also jarred with the content teams needs for the images to appear as part of the content. With gallery views, users either missed the images in the right-hand column or they didn't know how to interpret the sequence. To simplify this we recommend stacking images (if part of the content).

We also found users clicking images in gallery views - expecting them to appear larger in a pop-up modal. By increasing the size of the images, and having them stacked in one column (not in two) we didn't see anyone clicking on them to expand in testing.

Hypothesis If the images are three quarters the reading space Then users will understand their place within the page (read as part of the text), and if multiple images are used, where the image sits in sequence Because the images flow with the content

Research findings Images tested well with all users, stating that they helped them understand how symptoms might appear and support written content (usability lab, Leeds, 20th June 2018)

sarawilcox commented 3 years ago

@annasutton2 has raised an issue. (Thanks Anna! Well spotted.)

In this section of the accessibility guidance (https://service-manual.nhs.uk/accessibility/content) where we show examples of informative images, the captions have full stops at the end.

But in the image in this section https://service-manual.nhs.uk/design-system/components/images the caption has no full stop.

For CoMo reasons full stops are needed. This is because the text on the page (including captions) could be syndicated without the images. (@markasrobinson and @annasutton2, the examples on the chicken pox page make sense without the images. But the example in the images component just says "Itchy, red, watering eyes". Would that text be syndicated without the image?)

@mcheung-nhs, can I check please, are there any accessibility reasons not to add full stops? @davidhunter08 for info.

mcheung-nhs commented 3 years ago

@sarawilcox - can't see any issues with having or not having full stops. I've checked using JAWS, NVDA and VoiceOver and the full stop / period is not read out.

sarawilcox commented 3 years ago

@davidhunter08 any comments? If you think this is OK, I might suggest that we approve this at Content Style Council.

davidhunter08 commented 3 years ago

No comments from me @sarawilcox 👍

sarawilcox commented 3 years ago

@sarawilcox - can't see any issues with having or not having full stops. I've checked using JAWS, NVDA and VoiceOver and the full stop / period is not read out.

Hi @mcheung-nhs, do screen readers pause when there's no full stop? For example, on this chickenpox page? When I try VoiceOver, it runs on like this: Check if it's chickenpox 1. ... stay in a small area 2. ... blisters may burst 3.

What I don't know is whether this would cause any confusion to users of assistive tech. I wonder if we could add this to the issues we want to check in our accessibility testing of different content scenarios?

Here's the shingles page, where captions have full stops: https://www.nhs.uk/conditions/shingles/

mcheung-nhs commented 3 years ago

Hi @sarawilcox - in these examples, for JAWS and NVDA, the text is broken up by the screen reader announcing the figure element, so there is no difference whether there is a full stop or not at the end of the caption.

sarawilcox commented 3 years ago

Looks like we could propose including full stops - one for April Style Council meeting.

sarawilcox commented 3 years ago

We need to update our images guidance page. The current example isn't in line with our latest practice.

We don't recommend using captions to just describe the image. That's better done in the alt text. The alt text is currently "Picture of allergic conjunctivitis" and the caption is "Itchy, red, watering eyes". Captions should ideally be full sentences that make sense without the image visible.

I suggest using the example in the accessibility guidance: https://service-manual.nhs.uk/accessibility/content#use-alternative-text-for-images-in-content

sarawilcox commented 3 years ago

At May Style Council, we agreed to use the example currently in the accessibility guidance in the images component guidance too – using the better of the 2 examples in both places. Action: change the image in the image component guidance.

We also agreed to add the following text to the image component guidance, under How to use images:

Not all images need captions. If you use them:

write a full sentence ending with a full stop

do not duplicate alt-text

use the caption to explain why the image is there and what you want users to conclude from the image

Read more about captions and alt text for images in content in the accessibility guidance.

sarawilcox commented 3 years ago

Done, getting ready to publish changes agreed at May Style Council meeting.

sarawilcox commented 3 years ago

Feedback on the images component page: What is a pop-up modal? @bencullimore, is there a simpler way to explain this, please?

bencullimore commented 3 years ago

Feedback on the images component page: What is a pop-up modal? @bencullimore, is there a simpler way to explain this, please?

We noted users clicking the images during usability testing. When asked why their response indicated that they wanted to make the image bigger.

The assumed user intention/mental model we could take from that is; clicking an image (or pressing on touch screen devices) makes an image bigger - either expanding the image on a page or a pop up modal window.

This pattern (clicking image to increase size) can be found on many eCommerce sites.

Be aware that this wasn't a recommendation to make the changes. Expanding images on click (on page or overlaid pop up) has many accessibility implications so would need to be explored further.

sarawilcox commented 3 years ago

Thanks @bencullimore. It was more about understanding what a "modal" is. It sounds like it's a window that pops up and stops you doing anything in the main window. Do we need to include the word "modal" on the page if it's confusing some people? Could we just say: "We also found that users clicked images in gallery views, expecting them to appear larger in a pop-up window"? Is the word "modal" important here?

bencullimore commented 3 years ago

Thanks @bencullimore. It was more about understanding what a "modal" is. It sounds like it's a window that pops up and stops you doing anything in the main window. Do we need to include the word "modal" on the page if it's confusing some people? Could we just say: "We also found that users clicked images in gallery views, expecting them to appear larger in a pop-up window"? Is the word "modal" important here?

That sentence is great @sarawilcox . No I don't think Modal is important.

sarawilcox commented 3 years ago

Updated guidance on captions released today. I'll follow up the issue around the word "modal".

sarawilcox commented 3 years ago

Some GOV.UK advice, received via Basecamp: We advise that you provide the alternative image description in body text rather than the alt text field, because it will be available to more users. (People who use magnification software do not have access to the alt text field, and will often need the information.)

I think we reviewed this, didn't we @PaulineRichardson, and decided we weren't going to follow it.

sarawilcox commented 3 years ago

Captions

There are ongoing questions about whether or not we should include symptoms info in captions. Some comments from NHS.UK Slack: "I was just wondering if you know of any research into whether screen reader users, or people who use "reader mode" (without images), are disadvantaged if a page has symptom information contained in captions? Some user research by MT1 indicated that symptom info can be overlooked / missed by screen reader users with a visual impairment because they tend to skip over images, assuming they won't be helpful, while reader mode makes images disappear completely (along with their caption of course). We found this was a problem when key info was in a caption and it's something we may be able to look into further, " "At the May Style Council meeting, there was a suggestion that we add "Do not include key symptom information in captions”. But someone said that in transformation work, we have included key symptoms in this way to make things clearer and avoid repetition." "It's also tricky if symptom info is in a caption and we have to add another sentence or two to make the content inclusive - such as an image of a red rash shown on white skin. In that instances we might have to add quite a lot to the caption to explain what the rash looks like on other skin tones, which then makes it too long. This is especially challenging when symptom info is not in the main content of the page at all, but only contained in captions." "I'd suggest adding some examples of 'good' caption". "We only ever tell the user what skin colour is being shown via the alt-text." (not in caption)

sarawilcox commented 3 years ago

Captions

@marklegassick has proposed that we include another bullet point in guidance:

"keep captions short - ideally 1 sentence but no more than 2" Also a suggestion on NHS.UK Slack that we make it clear that numbers can be added to captions if the images show a sequence. And a request for more examples. To be discussed at July Content Style Council.

sarawilcox commented 3 years ago

It looks like people would welcome more guidance on captions e.g.:

examples of good and bad captions
whether or not to include symptoms
what to say if the image isn't there to help users understand how serious their symptom is or what stage their condition has reached

sarawilcox commented 3 years ago

M2600209-Scarlet_fever_rash-SPL width-1534 Shared by @marklegassick:

This image scarlet fever image caption is a 'bad example' (the page has since been updated).

The previous image and caption was:

The rash feels like sandpaper and starts on the chest and tummy. On lighter skin it looks pink or red. On darker skin it can be more difficult to see, but you can still feel it.

This is 3 sentences and was 3.5 lines.

Mark suggested not including how the rash appears on different skin tones in this caption. It's not the most important information.

A better caption would be:

The rash looks looks like small, raised bumps and starts on the chest and tummy before spreading.

marklegassick commented 3 years ago

GOV.UK guidance about images says this about captions:

Captions

The caption field is optional. You can use a caption to:

label a graph, infographic or diagram
name a person in a photo

Do not use the caption to describe your image instead of putting it in the body text - some screen reading software does not read captions when the ‘Alt text’ field is empty.

If you do not need a caption, do not include one.

https://www.gov.uk/guidance/content-design/images

There doesn't seem to be any specific guidance about caption length, but most style guides say they should be short. Not the best source but Wikipedia has quite a long page about captions and states that:

There are several criteria for a good caption. A good caption:

clearly identifies the subject of the picture, without detailing the obvious;
is succinct;
establishes the picture's relevance to the article;
provides context for the picture;
draws the reader into the article.

Succinctness

Succinctness is using no superfluous or needless words. It is not the same as brevity, which is using a relatively small number of words. Succinct captions have more power than verbose ones. More than three lines of text in a caption may be distracting; instead, further information can be provided in the article body. And remember that readers wanting full detail can click through to the image description page.

https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Captions

sarawilcox commented 3 years ago

We held a meeting with Alistair Duggin this afternoon to explore the accessibility issues around captions.

We're going to do some further work to explore the problems and possible alternative solutions.

Notes in the Content Style Council folder in SharePoint. https://hscic365.sharepoint.com/:w:/s/servicemanual/Eew_1164Q0xCgVjrcPHazL0BRHxF8qE-u0Z8Ew5qJ-qYeQ?e=DljuGe.

sarawilcox commented 3 years ago

At July Style Council meeting, we agreed to add the following 2 bullet points to the guidance on image captions in the images component:

keep captions short - ideally 1 sentence but no more than 2
start the caption with a number if the images show a sequence (Approved by clinicians.)

Otherwise we decided not make any more changes to the captions guidance pending further investigation of the accessibility issues (see comment above). We're hoping to return to this at to the October meeting.

sarawilcox commented 3 years ago

Mission team 1 found some people miss content in captions, both users with access needs and users without. But captions can include key information, like symptoms.

We're considering removing them but some people benefit from them as people scan in different ways.

We had a meeting to discuss this back in August and came up with some options.

Find out where we use images and the potential impact of removing captions.
Explore other ways of presenting text (aria labels?) so it looks like a caption but mark it up so people don't miss it if they choose not to view images. Or explore using plain text <p> above the image.
Consider redesigning the component. Our component treats body text as primary, images secondary and captions least important, in small font. But our original use of images treated captions as primary or equal in importance to body text.
See if one of our teams could mock up and test alternatives, for example, without captions.

sarawilcox commented 3 years ago

We've checked which NHS website pages uses the caption tag. There's a spreadsheet in SharePoint for NHS Digital staff: https://hscic365.sharepoint.com/:x:/r/sites/servicemanual/Shared%20Documents/Content%20style%20council/2021/July%202021/captions%20on%20the%20NHS%20website.xlsx?d=w6c4e11e469294375acecd61403fe6ec7&csf=1&web=1&e=C01G4k

mcheung-nhs commented 2 years ago

I've done a bit of testing when using reader mode in Safari and Firefox and Edge and in all cases, the image gets displayed and the alt text and caption is read when using a screen reader. Testing with Lynx, a text only terminal browser, the alt text and caption text is displayed.

I also tested if you disable images in Chrome and Firefox and in both instances the caption text remains.

mcheung-nhs commented 2 years ago

WebAim have updated their guidance (Oct 2021) on alt text: https://webaim.org/techniques/alttext/

sarawilcox commented 2 years ago

Related issues

Latest thinking re the image guidance. It is likely to consist of 4 illustration styles:

anatomy Illustration style (currently going through UR with Mission Team 1)
instructional illustrations (instructions for use - IFU)
character/people illustrations
icon style

What

App icon list is used on a series of better health products which is co-owned by the NHS and Office of health improvement and disparities (OHID).

These products are:

Better health
Every mind matters
Healthier families
Start for life

Screenshot example

Why

These app icon list are used in multitude of ways to help orient users around dense content. These are content blocks styled to resemble bullet points with an icon replacing the dot.

Additional details

In the usability testing session I observed users gravitated towards these icon list, often slowing down to read the content details within them compared to other content blocks on the page.

My observation is that users are able to more easily digest the content because they are broken down into smaller chunks and are separated into bullet points using the icon as a decoy to create some separation of what would have otherwise been a large content block.

I have added a screenshot of the research summary slide deck.

These have also tested well when used on Every mind matters wellbeing tips section, having similar effects where the user slows down to digest the tips being offered. These are collection from user feedback taken from a series of usability testing sessions conducted with 20 users in March 2021 by @misakihata and Zoonou (agency)

Screen reader behaviour

From what I can gather, the image is entirely ignored and skips to the sub-heading for each content block. This might be because of the presence of a sub-header, it might be repeated content if the icon is described.

nhsuk / nhsuk-service-manual-community-backlog

Images #28

Captions

Captions

Related issues

What

Why

Additional details

Screen reader behaviour

Related issues

61 #4