Skip to content

Commit 66df4ad

Browse files
tombyehuwd
authored andcommitted
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: #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.
1 parent 64d0492 commit 66df4ad

File tree

1 file changed

+6
-2
lines changed

1 file changed

+6
-2
lines changed

lib/govuk_tech_docs/tech_docs_html_renderer.rb

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,12 @@ def header(text, level)
1919
%(<h#{level} id="#{anchor}">#{text}</h#{level}>\n)
2020
end
2121

22-
def image(link, *args)
23-
%(<a href="#{link}" rel="noopener noreferrer">#{super}</a>)
22+
def image(link, title, alt_text)
23+
if alt_text
24+
%(<a href="#{link}" rel="noopener noreferrer">#{super}</a>)
25+
else
26+
super
27+
end
2428
end
2529

2630
def table(header, body)

0 commit comments

Comments
 (0)