From 66df4ada1d9764ce60fe5d4d2492460f8e5e86af Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 20 Sep 2024 13:49:08 +0100 Subject: [PATCH 1/3] Only wrap images with alt text in hyperlinks When we wrap images in hyperlinks, we make the image's alt text their only content. If those images have no alt text, they are effectively empty links. This means they have no accessible name if queried by an accessibility API: https://w3c.github.io/html-aam/#img-element-accessible-name-computation ...so it'll be up to the screen reader to guess. In testing, this ends up being the file name, which can't be relied on to explain the image. All in all, this behaviour breaks the non-text content success criterion from WCAG 2.2: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html This issue is recorded here: https://github.com/alphagov/tech-docs-gem/issues/355 This commit take the approach of introducing a guard against images with no alt text and choosing not to wrap them in hyperlinks when found. My Ruby is basic at best but I looked at the method we're overwriting from the Red Carpet HTML renderer and copied across its interface more exactly, to make it clear where the alt_text variable comes from. --- lib/govuk_tech_docs/tech_docs_html_renderer.rb | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/govuk_tech_docs/tech_docs_html_renderer.rb b/lib/govuk_tech_docs/tech_docs_html_renderer.rb index f9f2d614..423eed0b 100644 --- a/lib/govuk_tech_docs/tech_docs_html_renderer.rb +++ b/lib/govuk_tech_docs/tech_docs_html_renderer.rb @@ -19,8 +19,12 @@ def header(text, level) %(#{text}\n) end - def image(link, *args) - %(#{super}) + def image(link, title, alt_text) + if alt_text + %(#{super}) + else + super + end end def table(header, body) From adc828b62b756a22c2e8cf75ac2e3de7e44ad624 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 20 Sep 2024 21:07:53 +0100 Subject: [PATCH 2/3] Update tech_docs_html_renderer.rb Rewrite alt text guard to be more exact --- lib/govuk_tech_docs/tech_docs_html_renderer.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/govuk_tech_docs/tech_docs_html_renderer.rb b/lib/govuk_tech_docs/tech_docs_html_renderer.rb index 423eed0b..31b47c4d 100644 --- a/lib/govuk_tech_docs/tech_docs_html_renderer.rb +++ b/lib/govuk_tech_docs/tech_docs_html_renderer.rb @@ -20,7 +20,7 @@ def header(text, level) end def image(link, title, alt_text) - if alt_text + if alt_text && !alt_text.strip.empty? %(#{super}) else super From 9ebbd216f1565705b5fecf95c697b12b6a5299bb Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 1 Oct 2024 09:34:45 +0100 Subject: [PATCH 3/3] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a667169e..ee4cba41 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ You need to - Use hidden attribute to show/hide expiry notices instead of just CSS - Only use dialog role for table of contents when it behaves like one (accessibility fix) - Prevent interactive elements being obscured by sticky table of contents header +- Only wrap images with alt text in hyperlinks ## 3.5.0