From fbd25edffff216f391dbc7c643816d56334f8c69 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 20 Sep 2024 13:49:08 +0100 Subject: [PATCH] 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)