Merge pull request #4344 from alphagov/chart-accessibility-improvements

Chart component accessibility improvements
alphagov · Oct 30, 2024 · 92ee587 · 92ee587
2 parents 2c1702a + 6e9e10a
commit 92ee587
Show file tree

Hide file tree

Showing 69 changed files with 189 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Chart component accessibility improvements ([PR #4344](https://github.com/alphagov/govuk_publishing_components/pull/4344))
+
 ## 44.9.1
 
 * Layout super nav header: Correct name for search input ([PR #4347](https://github.com/alphagov/govuk_publishing_components/pull/4347))

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss
@@ -47,3 +47,18 @@
     padding: 0 govuk-spacing(4);
   }
 }
+
+.gem-c-chart .gem-c-chart__a11y-note-link {
+  display: none;
+  margin-bottom: govuk-spacing(2);
+}
+
+.js-enabled {
+  .gem-c-chart .gem-c-chart__a11y-note-link {
+    display: inline;
+  }
+
+  .gem-c-chart .gem-c-chart__a11y-note-link:focus-within {
+    display: inline-block;
+  }
+}
diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb
@@ -3,6 +3,7 @@
   add_gem_component_stylesheet("table")
   add_gem_component_stylesheet("details")
   add_gem_component_stylesheet("heading")
+  add_gem_component_stylesheet("skip-link")
 
   chart_heading ||= nil
   chart_heading_level ||= 2
@@ -44,6 +45,10 @@
   textPosition = nil
   textPosition = 'none' if minimal
 
+  if !minimal && !chart_heading
+    raise ArgumentError, "A chart heading must be provided for accessibility purposes."
+  end
+
   chart_library_options = {
     chartArea: { width: '80%', height: '60%' },
     crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' },
@@ -97,8 +102,14 @@
       <% unless minimal %>
         <div class="govuk-visually-hidden">
           <%= content_tag :div, chart_overview, class: "gem-c-chart__a11y-note-1" if chart_overview %>
-          <%= content_tag :div, t("components.chart.accessibility_html", table_id: table_id), class: "gem-c-chart__a11y-note-2" %>
+          <%= content_tag :div, t("components.chart.accessibility_html"), class: "gem-c-chart__a11y-note-2" %>
         </div>
+        <span class="gem-c-chart__a11y-note-link">
+          <%= render "govuk_publishing_components/components/skip_link", {
+            text: t("components.chart.accessibility_link", chart_heading: chart_heading),
+            href: "##{table_id}"
+          } %>
+        </span>
       <% end %>
 
       <%= line_chart(chart_format_data, library: chart_library_options) %>
@@ -112,6 +123,9 @@
           ) do %>
             <div tabindex="0" class="gem-c-chart__table-wrapper">
               <table class="govuk-table">
+                <caption class="govuk-visually-hidden" id="<%= "data-table-caption-#{SecureRandom.hex(4)}" %>">
+                  <%= t("components.chart.accessibility_heading", chart_heading: chart_heading) %>
+                </caption>
                 <% if table_direction == "horizontal" %>
                   <thead class="govuk-table__head">
                     <tr class="govuk-table__row">

diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml
@@ -11,6 +11,7 @@ accessibility_criteria: |
   Charts must:
 
     - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+    - contain a `chart_heading` option if `minimal` is not set to true, so that skip links and visually hidden headings are accurate
 shared_accessibility_criteria:
   - link
 uses_component_wrapper_helper: true

diff --git a/config/locales/ar.yml b/config/locales/ar.yml
@@ -37,7 +37,9 @@ ar:
         characters: أحرف
         words: كلمات
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/az.yml b/config/locales/az.yml
@@ -33,7 +33,9 @@ az:
         characters: simvol
         words: söz
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/be.yml b/config/locales/be.yml
@@ -35,7 +35,9 @@ be:
         characters: знакаў
         words: словаў
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/bg.yml b/config/locales/bg.yml
@@ -33,7 +33,9 @@ bg:
         characters: символа
         words: думи
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/bn.yml b/config/locales/bn.yml
@@ -33,7 +33,9 @@ bn:
         characters: ক্যারেক্টার
         words: শব্দসমষ্টি
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/cs.yml b/config/locales/cs.yml
@@ -34,7 +34,9 @@ cs:
         characters: znaky
         words: slova
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/cy.yml b/config/locales/cy.yml
@@ -37,7 +37,9 @@ cy:
         characters: nodau
         words: geiriau
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/da.yml b/config/locales/da.yml
@@ -33,7 +33,9 @@ da:
         characters: Tegn
         words: ord
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -33,7 +33,9 @@ de:
         characters: Zeichen
         words: Wörter
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/dr.yml b/config/locales/dr.yml
@@ -36,7 +36,9 @@ dr:
         characters: ارقام
         words: کلمات
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/el.yml b/config/locales/el.yml
@@ -33,7 +33,9 @@ el:
         characters: χαρακτήρες
         words: λέξεις
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -34,7 +34,9 @@ en:
         words: words
     chart:
       table_dropdown: Data table
-      accessibility_html: This chart is a visual representation of the data available in the <a href='#%{table_id}'>table</a>.
+      accessibility_html: This chart is a visual representation of the data available in the table.
+      accessibility_link: Skip to "%{chart_heading}" data table
+      accessibility_heading: Data table for "%{chart_heading}"
     chat_entry:
       heading: Try GOV.UK Chat
       description: Sign up to GOV.UK’s experimental new AI tool and find answers to your business questions

diff --git a/config/locales/es-419.yml b/config/locales/es-419.yml
@@ -33,7 +33,9 @@ es-419:
         characters: caracteres
         words: palabras
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/es.yml b/config/locales/es.yml
@@ -33,7 +33,9 @@ es:
         characters: caracteres
         words: palabras
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/et.yml b/config/locales/et.yml
@@ -33,7 +33,9 @@ et:
         characters: tähemärki
         words: sõnu
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/fa.yml b/config/locales/fa.yml
@@ -33,7 +33,9 @@ fa:
         characters: کاراکتر
         words: کلمه
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/fi.yml b/config/locales/fi.yml
@@ -33,7 +33,9 @@ fi:
         characters: merkkejä
         words: sanoja
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/fr.yml b/config/locales/fr.yml
@@ -33,7 +33,9 @@ fr:
         characters: caractères
         words: mots
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/gd.yml b/config/locales/gd.yml
@@ -35,7 +35,9 @@ gd:
         characters: Figiúr
         words: Carachtar
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/gu.yml b/config/locales/gu.yml
@@ -33,7 +33,9 @@ gu:
         characters: અક્ષરો
         words: શબ્દો
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/he.yml b/config/locales/he.yml
@@ -33,7 +33,9 @@ he:
         characters: תווים
         words: מילים
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/hi.yml b/config/locales/hi.yml
@@ -33,7 +33,9 @@ hi:
         characters: अक्षर
         words: शब्द
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/hr.yml b/config/locales/hr.yml
@@ -34,7 +34,9 @@ hr:
         characters: znakova
         words: riječi
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/hu.yml b/config/locales/hu.yml
@@ -33,7 +33,9 @@ hu:
         characters: karakterek
         words: szavak
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/hy.yml b/config/locales/hy.yml
@@ -35,7 +35,9 @@ hy:
         characters: նիշ
         words: բառ
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/id.yml b/config/locales/id.yml
@@ -32,7 +32,9 @@ id:
         characters: karakter
         words: kata
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/is.yml b/config/locales/is.yml
@@ -33,7 +33,9 @@ is:
         characters: stafi
         words: orð
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/it.yml b/config/locales/it.yml
@@ -33,7 +33,9 @@ it:
         characters: caratteri
         words: parole
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/ja.yml b/config/locales/ja.yml
@@ -32,7 +32,9 @@ ja:
         characters: 文字
         words: 単語
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/ka.yml b/config/locales/ka.yml
@@ -33,7 +33,9 @@ ka:
         characters: სიმბოლოები
         words: სიტყვები
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description:

diff --git a/config/locales/kk.yml b/config/locales/kk.yml
@@ -33,7 +33,9 @@ kk:
         characters: таңба
         words: сөз
     chart:
+      accessibility_heading:
       accessibility_html:
+      accessibility_link:
       table_dropdown:
     chat_entry:
       description: