Add accessibility statement and begin to scrub ATIP from the site (#548)

* Add accessibility statement and begin to scrub ATIP from the site * scheme -> schemes * Fix svelte check * Fix typo and add missing section * Differing titles --------- Co-authored-by: Peter York <[email protected]>
acteng · Nov 25, 2024 · 56af17c · 56af17c
1 parent d0abdf8
commit 56af17c
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 7 deletions.
diff --git a/accessibility.html b/accessibility.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <title>Plan Your Active Travel Schemes - Accessibility Statement</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import AccessibilityStatement from "./src/pages/AccessibilityStatement.svelte";
+
+      // For govuk setup. For some reason, the initAll step doesn't work here.
+      document.body.className +=
+        " js-enabled" +
+        ("noModule" in HTMLScriptElement.prototype
+          ? " govuk-frontend-supported"
+          : "");
+
+      new AccessibilityStatement({
+        target: document.getElementById("app"),
+      });
+    </script>
+  </body>
+</html>
diff --git a/browse.html b/browse.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
     />
-    <title>ATIP v2 scheme browser</title>
+    <title>Plan Your Active Travel Schemes - Browse Page</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/choose_area.html b/choose_area.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
     />
-    <title>Active Travel Infrastructure Platform v2</title>
+    <title>Plan Your Active Travel Schemes - Choose Area</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/files.html b/files.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
     />
-    <title>ATIP v2 Scheme Sketcher</title>
+    <title>Plan Your Active Travel Schemes - File Management</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
     />
-    <title>Active Travel Infrastructure Platform v2</title>
+    <title>Plan Your Active Travel Schemes</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/local_storage.html b/local_storage.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
     />
-    <title>ATIP v2 Scheme Sketcher</title>
+    <title>Plan Your Active Travel Schemes - Clear Local Storage</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/scheme.html b/scheme.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
     />
-    <title>ATIP v2 Scheme Sketcher</title>
+    <title>Plan Your Active Travel Schemes - Sketch</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/pages/AccessibilityStatement.svelte b/src/pages/AccessibilityStatement.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import "../style/main.css";
+  // @ts-expect-error no declarations
+  import { initAll } from "govuk-frontend";
+  import { AlphaBanner } from "govuk-svelte";
+  import { Header } from "lib/common";
+  import { onMount } from "svelte";
+
+  onMount(async () => {
+    // For govuk components. Must happen here.
+    initAll();
+  });
+</script>
+
+<div class="govuk-width-container govuk-prose">
+  <Header />
+  <AlphaBanner />
+
+  <h1 style="margin-top: 30px">
+    Plan Your Active Travel Schemes Accessibility Statement
+  </h1>
+
+  <p>
+    This accessibility statement applies to the Plan Your Active Travel Schemes
+    tool, which is for sketching and viewing active travel schemes at various
+    stages of the bidding and development process.
+  </p>
+  <p>
+    This website is run by Active Travel England. It requires use of and
+    interactions with maps.
+  </p>
+  <ul>
+    <li>
+      We include multiple options for basemap, allowing the user to decide what
+      works best for them
+    </li>
+    <li>
+      We intend to add user-configurable colour choices for map layers such as
+      boundaries, sketched schemes and trip generators
+    </li>
+    <li>
+      <a href="https://mcmw.abilitynet.org.uk/">AbilityNet</a>
+       has advice on making your device easier to use if you have a disability
+    </li>
+  </ul>
+
+  <h2>How accessible this website is</h2>
+
+  <p>We know some parts of the website are not fully accessible:</p>
+  <p>
+    This website is run by Active Travel England. It requires use of and
+    interactions with maps.
+  </p>
+  <ul>
+    <li>You cannot navigate most of the website using just a keyboard</li>
+    <li>
+      You cannot navigate most of the website using speech recognition software
+    </li>
+    <li>
+      You cannot listen to most of the website using a screen reader (including
+      the most recent versions of JAWS, NVDA and VoiceOver)
+    </li>
+    <li>
+      Colour will be used to convey information such as road width and speed
+      limits, until this is configurable it might present an accessibility
+      issue.
+    </li>
+  </ul>
+
+  <h2>Feedback and contact information</h2>
+  <p>
+    If you need information on this app or to provide further feedback on issues
+    please email <a
+      href="mailto:[email protected]"
+    >
+      [email protected]
+    </a>
+    . We’ll consider your request and get back to you in 20 days.
+  </p>
+
+  <h2>Enforcement procedure</h2>
+  <p>
+    The Equality and Human Rights Commission (EHRC) is responsible for enforcing
+    the Public Sector Bodies (Websites and Mobile Applications) (No. 2)
+    Accessibility Regulations 2018 (the ‘accessibility regulations’). If you’re
+    not happy with how we respond to your complaint, <a
+      href="https://www.equalityadvisoryservice.com/"
+    >
+      contact the Equality Advisory and Support Service (EASS)
+    </a>
+    .
+  </p>
+
+  <h2>Technical information about this website’s accessibility</h2>
+  <p>
+    Active Travel England is committed to making its website accessible, in
+    accordance with the Public Sector Bodies (Websites and Mobile Applications)
+    (No. 2) Accessibility Regulations 2018.
+  </p>
+
+  <h2>Compliance status</h2>
+  <p>
+    This website is not compliant with the Web Content Accessibility Guidelines
+    version 2.2 AA standard, due to the non-compliances listed below.
+  </p>
+  <ul>
+    <li>
+      The map information is necessarily visual and it cannot be converted into
+      text content
+    </li>
+    <li>
+      Similarly many interactions with the map cannot be performed by keyboard
+      only
+    </li>
+    <li>
+      Certain interactions with sketching require dragging with mouse or touch
+      pad
+    </li>
+  </ul>
+
+  <h2>Non-compliance with the accessibility regulations</h2>
+  <p>
+    Navigation and accessing information: We use a map to provide proposed
+    infrastructure schemes to visually help ATE teams assess schemes. This is
+    not used for navigational purposes.
+  </p>
+
+  <h2>Preparation of this accessibility statement</h2>
+  <p>
+    This statement was prepared on 24th September 2024. We did an internal audit
+    against WCAG guidelines.
+  </p>
+</div>
diff --git a/src/pages/LandingPage.svelte b/src/pages/LandingPage.svelte
@@ -24,7 +24,7 @@
   <Header />
   <AlphaBanner />
 
-  <h1 style="margin-top: 30px">Welcome to Plan.activetravelengland.gov.uk!</h1>
+  <h1 style="margin-top: 30px">Welcome to Plan Your Active Travel Schemes!</h1>
 
   <h2>Sketch Your Scheme:</h2>
   <p>
@@ -33,11 +33,15 @@
     GIS software.
   </p>
   <DefaultButton on:click={goToSketcher}>Start</DefaultButton>
+
   <h2>Browse existing sketches and geographic context:</h2>
 
   <p>
     View scheme sketches alongside other contextual layers, like bus routes,
     hospital locations, and authority boundaries.
   </p>
   <DefaultButton on:click={goToBrowser}>Start</DefaultButton>
+
+  <h3>Accessibility</h3>
+  <p>Our accessibility statement can be found <a href="accessibility.html">here</a>.</p>
 </div>