From 82f6c20101c329132f8a5ac75ecdc58827490c92 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 7 Dec 2016 17:00:53 +0000
Subject: [PATCH] Add alt text for the images on the product page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The images are telling you stuff that is extra to the text on the page
so they should be explained for users who can’t see them.
---
 app/templates/views/signedout.html | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index 5a934836d..cc97cc276 100644
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -45,7 +45,7 @@
         </p>
       </div>
       <div class="column-half">
-        <img src="/static/images/product/01-templates.svg">
+        <img src="/static/images/product/01-templates.svg" alt="">
       </div>
     </div>
   </div>
@@ -61,7 +61,10 @@
         </p>
       </div>
       <div class="column-half">
-        <img src="/static/images/product/02-reporting.svg">
+        <img
+          src="/static/images/product/02-reporting.svg"
+          alt="A screenshot of GOV.UK Notify showing counts of emails and text messages sent"
+        >
       </div>
     </div>
   </div>
@@ -75,14 +78,20 @@
           Upload a spreadsheet of email&nbsp;addresses or
           phone&nbsp;numbers and Notify sends the messages.
         </p>
-        <img src="/static/images/product/03-spreadsheet.svg">
+        <img
+          src="/static/images/product/03-spreadsheet.svg"
+          alt="A screenshot of a spreadsheet with columns for email address, name and colour"
+        >
       </div>
       <div class="column-half">
         <p>
           Integrate the GOV.UK Notify API with your web&nbsp;application or
           back office system.
         </p>
-        <img src="/static/images/product/04-api.svg">
+        <img
+          src="/static/images/product/04-api.svg"
+          alt="A screenshot of some computer code with a notify.send_email function"
+        >
       </div>
     </div>
   </div>
@@ -102,7 +111,10 @@
         </p>
       </div>
       <div class="column-half">
-        <img src="/static/images/product/team.jpg">
+        <img
+          src="/static/images/product/team.jpg"
+          alt="A photo of the GOV.UK Notify team gathered around a big screen. One team member is pointing at a graph on the screen."
+        >
       </div>
     </div>
   </div>