Don’t Wrap Figure in a Link

In my post Brief Note on Figure and Figcaption Support I demonstrate how, when encountering a figure with a screen reader, you won’t hear everything announced at once:

No screen reader combo treats the caption as the accessible name nor accessible description, not even for an image that lacks one.

All Is Well

This is a good thing. Users don’t want to hear the media alternative (alt text) and then the caption all as a flat, uninterrupted string. Then hear it a second time as they navigate into the figure.

This is because the <figure> element (or, rather, its implicit role) does not allow name from content. It’s just a container.

But Then You Wrap It in a Link

This becomes a problem when you wrap the entire figure in a link. Something like this:

<a href="i-am-not-your-dad-final-v2-FINAL.html">
  <figure>
    <img src="figure-example_image.jpg"
       alt="A black t-shirt with bold pink all-caps text that reads ‘PUNCH NAZIS’.">
    <figcaption>The ‘PUNCH NAZIS’ tee we all need.</figcaption>
  </figure>
</a>

Now the link is wrapping a container that does not have an accessible name — remember it doesn’t get its name from its contents. It’s a not a text node.

Take a moment to guess how that might be announced.

Sometimes a browser and screen reader follow the rules, sometimes they decide meh, rules are worse for users.

• NVDA / Firefox opts to read everything (as I outline) then appends link, which can get verbose. You can still navigate all the content with the virtual cursor.
• JAWS / Chrome behaves as Firefox, but without the extra element information.
• Narrator / Edge announces simply as link, but lets you move the virtual cursor into the content. Using read-all, it doesn’t acknowledge the link and announces only the content.
• VoiceOver / Safari / macOS announces link and the caption. I can get to content using the virtual cursor.
• TalkBack / Chrome announces the link as I am not your dad final v2 final, link because it’s falling back to the URL of the link with no other accessible name handy. It seems impossible to get to the contents of the figure with explore-by-touch.
• VoiceOver / Safari / iPadOS announces the image, followed by link, then the caption, followed by link. Using explore-by-touch I can get to each part, appended with link.

That seems inconsistent at best and problematic for most. Imagine being a voice control user and trying to figure out what to speak. You’re better off throwing a numbered grid onto the screen.

And Then You Give the Link a title!?

But then this:

<a href="i-am-not-your-dad-final-v2-FINAL.html"
   title="Appropriate for casual Friday.">
  <figure>
    <img src="figure-example_image.jpg"
       alt="A black t-shirt with bold pink all-caps text that reads ‘PUNCH NAZIS’.">
    <figcaption>The ‘PUNCH NAZIS’ tee we all need.</figcaption>
  </figure>
</a>

The title attribute provides only the accessible description for a link. Unless the link has no accessible name, such as from contents. Step E, Host Language Label in the Accessible Name Computation specification says, for this scenario, the title becomes the accessible name.

Scroll back up and take a moment to guess how that might be announced.

• NVDA / Firefox honors the computation and announces only the value of title (followed by link of course). You cannot get to the image, either with the virtual cursor or image navigation. Everything in the figure is lost.
• JAWS / Chrome behaves as Firefox.
• Narrator / Edge announces as link followed by the value of title, and otherwise behaves as it did without the title.
• VoiceOver / Safari / macOS announces link and the caption and then title, treating it as the accessible description. I can get to content using the virtual cursor.
• TalkBack / Chrome announces the link as the value of the title, using it as the accessible name. It seems impossible to get to the contents of the figure with explore-by-touch.
• VoiceOver / Safari / iPadOS announces the image, followed by link, then the caption, followed by link, ignoring title. Using explore-by-touch I can get to each part, appended with link and then the title.

In short, adding title hides the contents of the figure from the majority of screen reader users. That’s bad.

What to Do?

Don’t wrap <figure> in a link.

If you do it anyway, don’t make it worse by adding a title (or other accessible name technique) to that link.

If you have a boss / client insisting the entire figure must be clickble / tappable, then consider a block link. It’s not ideal, but it is less overtly user hostile.

For a fun party game, guess how all other roles / HTML elements that do not get name from content would behave in the same scenario. Write it down. Then test it similarly to my example. Keep score. Don’t do it as a drinking game.

Don’t Believe Me?

Fine. Test it yourself. Or use the embed below.