Using aria-hidden="true" in post thumbnail link

[samikeijonen]

In twentysixteen_post_thumbnail() function there is aria-hidden="true" in post thumbnail link. In my understanding this is to avoid too much "noise" on screen readers because post title is already a link to post.

However @joedolson had a good point in a11y review process:

Avoid using aria-hidden on focusable targets: the content of the node will be hidden, but a user will still be able to tab to it, just not get any information about what it is.

I'm not even sure did Joe mean this use case but it still raises question for me. Should there be aria-hidden="true" in post-thumbnail link or not?

[samikeijonen]

Here is the ticket where we are discussing this:

https://themes.trac.wordpress.org/ticket/29739#comment:23

[karmatosed]

@davidakennedy what is your input on this? I'd like us to get all opinions before making a change.

[davidakennedy]

That's interesting!

When we made this change in Twenty Sixteen originally, it was something of a nice thing we could do for users with screen readers... it decluttered their experience a bit. But I can see how it would be confusing it they could tab to the image and hear no feedback. That's certainly worse than hearing more information I think.

All that said, in Safari with Voiceover, it skips over it entirely so I can't even tab to it. But it may not be like that in every browser and screen reader combo. So worth some thought.

@joedolson What do you think? Have you seen this in other browser/screen reader combos?

I would be fine with this going either way, as I see it more as an accessibility enhancement and not something critical to make the theme more accessible.

[joedolson]

Most combinations will allow the tab but ignore the content, and that's correct according to the specifications.

Neither option is perfect, so I don't really have a firm opinion. In one case, you have two links that are identical, except that one is wrapping an image - so it's redundant information creating excess noise for the screen reader experience. In the other case, you only have the one post link, but you have a "mystery" object in the page. That mystery object can create a sense of doubt that the user is getting all of the content, which is undesirable as well - even though they aren't actually missing anything crucial.

What's generally considered ideal when you have an image and a neighboring block of text that link to the same resource is to wrap them inside the same anchor tag and use an empty alt attribute on the image - but that's probably not a change that's readily feasible for the theme.

I'm fine either way. From a user experience perspective, I think that engendering doubt in the design is the worse choice.

[samikeijonen]

What about this solution?

https://twitter.com/davidmacd/status/756227495083515905

If you use aria-hidden on an interactive element or on a container with one it is still gets a tab stop unless you add tabindex="-1"

[afercia]

In Safari with VoiceOver it is true you can't tab to the linked image with aria-hidden="true" but you can get to it when using Control-Option-Right Arrow (or Left Arrow) as users usually do to explore content. Worth reminding the Tab key is used mainly inside forms but to read all the content users mainly use arrows. And here's what VoiceOver does on the linked image:

Firefox with NVDA on Win10 do the opposite thing :) It is possible to tab to the linked image (announced as "blank") but the image will be skipped when using arrows.

This different implementation across screen readers was not clear to me some months ago, but it's definitely something noticed in many other places and just confirms that aria-hidden="true" on focusable elements is tricky (the spec itself is not so clear) and should generally be avoided.

What's generally considered ideal when you have an image and a neighboring block of text that link to the same resource is to wrap them inside the same anchor tag and use an empty alt attribute on the image

FWIW this is what was done in core in a couple of places (for example. the attachments thumbnails in the Media Library list mode, and the Credits page). Agree with Joe that's probably not feasible for Twenty Sixteen at this point but maybe something worth considering for the next official themes.

The tabindex="-1" would solve the issue for screen reader users but will affect all keyboard users. I guess the real question here would be if the link on the featured image is really necessary.

[samikeijonen]

Thanks @afercia for a detailed answer!