Image update (#2101)

* Change image, caption and alt text

* Add image example to assets folder and link from image component page

* Update image, caption and alt text in image component

* Update package number

---------

Co-authored-by: Sara Wilcox <sara.wilcox1@nhs.net>
Co-authored-by: Ananda Maryon <anandamaryon@gmail.com>

CHANGELOG.md

@@ -1,5 +1,10 @@
 # NHS digital service manual Changelog
 
+## 7.3.0 - 17 December 2024
+
+:wrench: **Maintenance**
+- Update image, caption and alt text in image component
+
 ## 7.2.0 - 6 November 2024
 
 :new: **New features**

app/views/design-system/components/images/default/index.njk

@@ -1,7 +1,7 @@
 {% from 'images/macro.njk' import image %}
 
 {{ image({
-  src: "https://assets.nhs.uk/prod/images/S_0318_Bullous_pemphigoid_lesions_.2e16d0ba.fill-320x213.jpg",
-  alt: "Lots of sore red patches with small blisters spread across white skin on a woman's chest.",
-  caption: "It can affect large areas of the body or limbs."
+  src: "/assets/image-example-stretch-marks.jpg",
+  alt: "Close-up of a person’s tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
+  caption: "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
 }) }}

app/views/design-system/components/images/index.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Components" %}
 {% set pageDescription = "Use images only if there is a real user need. Avoid unnecessary decoration." %}
 {% set theme = "Content presentation" %}
-{% set dateUpdated = "January 2023" %}
+{% set dateUpdated = "December 2024" %}
 {% set backlog_issue_id = "28" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -21,32 +21,28 @@
   }) }}
 
   <h2>When to use images</h2>
-  <p>Informative images that meet real user needs can be very important on health services - especially where they help users identify specific health problems and get the treatment they need.</p>
-  <p>We've also found users with some access needs (such as dyslexia) navigate health information (conditions and treatment) pages through images. Images help them orient themselves and they separate out the content.</p>
+  <p>Informative images that meet real user needs can be very important on health services, especially where they help users identify specific health problems and get the treatment they need.</p>
+  <p>We've also found users with some access needs (such as dyslexia) navigate health information through images. Images help them orient themselves and they separate out the content.</p>
   <p>But having unnecessary or decorative images can frustrate users, especially on information pages or transactional journeys.</p>
-  <p>The NHS.UK team is working on more guidance about when and how to use images.</p>
 
   <h2>How to use images</h2>
   <p>Images should flow with the text content, not appear too prominent or isolated.</p>
   <p>We recommend stacking images. We've found that gallery views (images side by side) confuse users.</p>
   <h3>Captions</h3>
-  <p>The image component is made up of 2 elements - the image and a caption underneath it in a white box.</p>
+  <p>The image component is made up of 2 elements:</p>
+  <ul>
+    <li>the image</li>
+    <li>a caption underneath it in a white box</li>
+  </ul>
   <p>Not all images need captions. If you use them:</p>
   <ul>
     <li>write a full sentence ending with a full stop</li>
     <li>keep captions short – ideally 1 sentence but no more than 2</li>
     <li>start the caption with a number if the images show a sequence</li>
     <li>do not duplicate alt-text (<a href="#alternative-text">alternative text</a>)</li>
   </ul>
-  <p>The caption assumes that the user can either see the image or read the alt-text. Use it to explain what you want users to conclude from it - for example, how serious their symptom is or what stage their condition has reached.</p>
-  <p>Here's an example. The alt-text is "Small red spots on white skin". The caption explains that that's how chickenpox starts.</p>
-
-    <figure class="nhsuk-image nhsuk-u-margin-top-6">
-      <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/ABF9YH_GDGeL2X.2e16d0ba.fill-320x213.jpg" alt="Small red spots on white skin">
-      <figcaption class="nhsuk-image__caption">
-        1. Chickenpox starts with red spots. They can appear anywhere on the body.
-      </figcaption>
-    </figure>
+  <p>The caption assumes that the user can either see the image or read the alt-text. Use it to explain what you want users to conclude from it, for example, how serious their symptom is or what stage their condition has reached.</p>
+  <p>In the above example, the alt-text is "Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin." The caption explains that stretch marks can be different colours and fade over time.</p>
 
   <h3>Accessibility</h3>
   <p>Do not use images that have words in them, because screen readers will not be able to read the words.</p>
@@ -61,6 +57,5 @@
   <h2>Research</h2>
   <p>In testing we found gallery views (images side by side) confused users. Users either missed the images in the right hand column or they didn't know how to interpret the sequence. To get around this we recommend stacking images.</p>
   <p>We also found that users clicked images in gallery views, expecting them to appear larger in a pop-up modal. When we increased the size of the images and stacked them in 1 column (not 2), we didn't see anyone clicking on them to expand them.</p>
-  <p>We tested images on the <a href="https://www.nhs.uk/conditions/chickenpox/">chickenpox</a> page on the NHS website in 2018. They tested well and all users said that the images helped them understand the symptoms.</p>
 
 {% endblock %}

app/views/whats-new/index.njk

@@ -9,6 +9,24 @@
 
   <h2>Latest updates</h2>
 
+  <h3>December 2024</h3>
+  <table class="nhsuk-table">
+    <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in December 2024</caption>
+    <thead class="nhsuk-table__head">
+      <tr class="nhsuk-table__row">
+        <th class="nhsuk-table__header" scope="col" style="width: 25%;">Section</th>
+        <th class="nhsuk-table__header" scope="col">Update</th>
+      </tr>
+    </thead>
+    <tbody class="nhsuk-table__body">
+    <tr>
+      <td class="nhsuk-table__cell">Design system</td>
+      <td class="nhsuk-table__cell">
+      <p>Replaced image in <a href="/design-system/components/images">image component</a></p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
   <h3>November 2024</h3>
   <table class="nhsuk-table">
     <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in November 2024</caption>
@@ -29,8 +47,8 @@
       <td class="nhsuk-table__cell">Design system</td>
       <td class="nhsuk-table__cell">
       <p>Added a <a href="/design-system/components/task-list">task list component</a> and a pattern to <a href="/design-system/patterns/complete-multiple-tasks">help users complete multiple tasks</a></p>
-      <p>Changed side navigation in <a href="/design-system/patterns">patterns</a><p>
-      </td>
+      <p>Changed side navigation in <a href="/design-system/patterns">patterns</a></p><p>
+      </p></td>
     </tr>
     </tbody>
   </table>

app/views/whats-new/updates.njk

@@ -10,6 +10,25 @@
 
 {% block bodyContent %}
 
+<h2>December 2024</h2>
+  <table class="nhsuk-table">
+    <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in December 2024</caption>
+    <thead class="nhsuk-table__head">
+      <tr class="nhsuk-table__row">
+        <th class="nhsuk-table__header" scope="col" style="width: 25%;">Section</th>
+        <th class="nhsuk-table__header" scope="col">Update</th>
+      </tr>
+    </thead>
+    <tbody class="nhsuk-table__body">
+    <tr>
+      <td class="nhsuk-table__cell">Design system</td>
+      <td class="nhsuk-table__cell">
+      <p>Replaced image in <a href="https://service-manual.nhs.uk/design-system/components/images">image component</a></p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+
 <h2>November 2024</h2>
   <table class="nhsuk-table">
     <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in November 2024</caption>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-service-manual",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "NHS digital service manual",
   "main": "app.js",
   "directories": {