Attempt to make the static graphic outputs accessible by incorporating them into a simple page instead of just linking the graphic itself.

itsozz · itsozz · commit 0b63de5cceb0 · 2020-05-07T18:31:28.000+01:00
diff --git a/accessible_graphics/resident_population_2018.html b/accessible_graphics/resident_population_2018.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+    <head>
+        <title>Trafford Data Lab: Resident Population of Trafford</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
+        <meta charset="UTF-8"/>
+
+        <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>Resident Population of Trafford</h1>
+            <cite>Source: Mid-2018 population statistics, Office for National Statistics.</cite>
+
+            <figure>
+                <img src="https://www.trafforddatalab.io/maps/static/output/trafford_population_2018.png" width="100%" alt="Map of Trafford showing the 21 wards coloured according to their mid-2018 population estimates."/>
+                <figcaption>
+                    Broadheath ward located in the South of Trafford has the highest resident population in the borough with just over 14,000 people living there. The neighbouring ward of Altrincham is next with just 1,000 fewer residents. The Northern wards of Gorse Hill, Longford and Clifford also have relatively large populations of around 12,500 people. Bowdon ward in the South and Davyhulme East ward in the West of Trafford have the fewest residents, around 9,500 people living in each. The remaining 14 wards have between 10,000 and 12,000 residents.
+                </figcaption>
+            </figure>
+        </main>
+    </body>
+</html>
diff --git a/css/accessible_graphics.css b/css/accessible_graphics.css
@@ -0,0 +1,44 @@
+body
+{
+    padding: 0;
+    margin: 0;
+    font-family: 'Open Sans', sans-serif;
+    color: #212121;
+}
+
+h1
+{
+    font-family: 'Roboto', sans-serif;
+    color: #707070;
+    margin-bottom: 0.1em;   /* to make the heading closer to the citation text */
+}
+
+h1, cite
+{
+    margin-left: 2rem;
+}
+
+cite
+{
+    font-size: 0.75em;
+}
+
+img
+{
+    border: 0;
+    max-height: 100vh;  /* we want the graphic to be completely visible in the full height of the display */
+    max-width: 90vw;    /* we also want the graphic to be completely visible in the width of the display with out scrolling - NOTE: the img has a width attribute set to 100% to prevent it appearing full size if the page is rendered without CSS */
+    width: auto;
+    display: block;
+    margin: auto;
+}
+
+figcaption
+{
+    display: block;
+    margin-top: 1em;
+    padding: 0.5em;
+    line-height: 1.75em;
+    background-color: #ddd;
+    box-shadow: 0 0 9px #ccc;
+}
