Created accessible graphics page for IMD 2019 and amended the CSS so that the heading and source text is displayed off-screen for the benefit of screen readers as the content is duplicated within the graphic.

itsozz · itsozz · commit b990f996ea70 · 2020-05-11T17:42:32.000+01:00
diff --git a/accessible_graphics/index_of_multiple_deprivation_2019.html b/accessible_graphics/index_of_multiple_deprivation_2019.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+    <head>
+        <title>Trafford Data Lab: Index of Multiple Deprivation 2019</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
+        <meta charset="UTF-8"/>
+        <meta name="keywords" content="deprivation, deprived, imd, index, multiple, trafford, open, data, open data, data visualisation, visualisation"/>
+        <meta name="description" content="Index of Multiple Deprivation 2019 for Trafford based on the Indices of Deprivation 2019 from the Ministry of Housing, Communities & Local Government visualised by Trafford Data Lab."/>
+
+        <link rel="stylesheet" href="../css/base.css"/>
+        <link rel="stylesheet" href="../css/accessible_graphics.css"/>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%7CRoboto"/>
+    </head>
+
+    <body>
+        <main>
+            <h1>Index of Multiple Deprivation 2019 for Trafford</h1>
+            <cite>Source: 2019 Indices of Deprivation, Ministry of Housing, Communities &amp; Local Government.</cite>
+
+            <figure>
+                <img src="https://www.trafforddatalab.io/maps/static/output/trafford_imd19.png" width="600" alt="Map of Trafford showing the Lower-layer Super Output Areas coloured according to their deprivation rank."/>
+                <figcaption>
+                    The Indices of Deprivation measure relative levels of deprivation in 32,844 Lower-layer Super Output Areas (LSOAs) in England based on 39 indicators. Each LSOA contains approximately 1,500 residents or 650 households. They are ranked from 1 (most deprived) to 32,844 (least deprived) and assigned to a decile ranging from 1 (most deprived 10%) to 10 (least deprived 10%). The Index of Multiple Deprivation (IMD) is an overall measure of relative deprivation. Trafford contains some of most and least deprived areas in the country. The most deprived areas are primarily located in and around the wards of Bucklow-St Martins in the West and Clifford in the North, whilst the least deprived areas are located mainly in the Southern and Central areas of Trafford, particularly in and around the wards of Timperley and Brooklands. It should be noted that Electoral Ward boundaries and LSOA boundaries do not always perfectly align and so it is impossible to aggregate from LSOA to ward exactly. 
+                </figcaption>
+            </figure>
+        </main>
+    </body>
+</html>
diff --git a/css/accessible_graphics.css b/css/accessible_graphics.css
@@ -1,16 +1,8 @@
-h1
-{
-    margin-bottom: 0.1em;   /* to make the heading closer to the citation text */
-}
-
+/* The header and source of data are removed from the visible display as they are duplicated within the image, but are able to be read by screen readers. If CSS is turned off they appear in the correct location within the document to make sense of the content. */
 h1, cite
 {
-    margin-left: 2rem;
-}
-
-cite
-{
-    font-size: 0.75em;
+    position: absolute;
+	top: -30em;
 }
 
 img
