For good UX we want the whole item to be clickable but we want to do this without having lots of links to
the same place (i.e we don't want to wrap the image in one link, the title in another, etc) because this
is bad for UX and accessibility.
But... We have a slight problem, we want our image to appear above the text on mobile
meaning we need our image first in the HTML.
Why is this a problem?
- Well, because it means that screen reader users and search engines
will associate the alt
text of the image as the most important link text. This is not helpful
or accessible unless maybe if the image contains text can be considered the core link text, but usually
this is repeated as part of the title.
So, it's important that you provide a null/empty alt
text for your images
(alt=""
), but only when used in 'image first listings', like those found in SUI or
similar scenarios where it makes sense. This ensures that the list item title is the first
thing associated with the link and, as with all links, the link text must describe the nature of the links
target page.
Isn't this bad? I've always been told images must have an alt
text?
- Yes and no, they must have alt
attribute, otherwise a screen reader will read out the filename of the image, imagine
that!
Providing actual text is the base line rule but there are exceptions when it makes logical sense for
accessibility. In this context, the alt
text of the image becomes the core link text. We
could 'tick a box' and provide an alt
text that matches the main title but then our poor
screen readers would have to read the same content twice! Null/Empty alt
atrributes allows
assistive technologies to ignore images that we, as authors, don't deem worthly.
Change your design so images don't come first!
- Accessibility should not limit creativity
and this performs very nicely screen readers, we of course check with real people using real assistive
technologies :-)