Skip to content

Commit

Permalink
Only wrap images with alt text in hyperlinks
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
tombye authored and huwd committed Oct 22, 2024
1 parent 64d0492 commit 66df4ad
Showing 1 changed file with 6 additions and 2 deletions.
8 changes: 6 additions & 2 deletions lib/govuk_tech_docs/tech_docs_html_renderer.rb
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,12 @@ def header(text, level)
%(<h#{level} id="#{anchor}">#{text}</h#{level}>\n)
end

def image(link, *args)
%(<a href="#{link}" rel="noopener noreferrer">#{super}</a>)
def image(link, title, alt_text)
if alt_text
%(<a href="#{link}" rel="noopener noreferrer">#{super}</a>)
else
super
end
end

def table(header, body)
Expand Down

0 comments on commit 66df4ad

Please sign in to comment.