Twenty Fifteen: Alt text of a thumbnail in archives can lead to confusing link texts

[rianrietveld]

The thumbnail of a post in archives is placed inside a link to the post itself.
The alt text is the alt text given with the image, this can result in a link text that makes no sense.

Screen reader users want to know what’s on the image, but don’t want to lose context on where the link is going. So how to add a valid alt text for the image, but also a valid link text representing the post title?

There are different ways to solve this, as we can see in ticket #15926 and #28861 Maybe finding a solution here, could also be a solution for #15926

[iandstewart]

Should this ticket be part of the Media component? And not Bundled Themes?

[joedolson]

No, I don't think so; this is relating to the usage of images in the archives view for Twenty Fifteen, not specifically to the Media saving of alt attributes.

Because this is specific to usage in the theme, I think this is an issue that needs to be handled in the theme.

I'd propose that the alt attribute should be left blank if the image is included inside the link; any alt attribute on the image would only serve to make the link overly verbose. If the image was a separate link or not linked, the alt attribute is more valuable.

[joedolson]

I just took a look, and my previous comment misunderstood the issue; a blank alt attribute is absolutely *not* appropriate in this case, because the image and the title are two separate links -- I'd had the idea that they were a single block-level anchor.

In this case, I propose that the link should include the alt attribute of the image, but also note that the image is a link to the post. This could get very verbose in some cases, but I don't think we want to lose the alt attribute data, if it's present; it could be helpful.

I'll prep a patch for this.

[joedolson]

Fetches alt attribute from metadata, creates new alt attribute and passes to post thumbnail request.

[iamtakashi]

I imagine often the first alt is blank and that leads to something like alt="; foo" If we can fix that, I think it's good to commit.

[joedolson]

Handles empty alt.

[joedolson]

Alternate solution using aria-hidden to reduce verbosity

[joedolson]

Need to update that patch; forgot the alt attribute title fallback.

[joedolson]

forgot fallback in prior patch

[afercia]

hi @joedolson, maybe we should reconsider the aria-hidden solution: I liked at first :) but my understanding is that it depends on browser + screen reader combination, the thumbnail link may still be focusable and announced as "blank". Tested with Firefox + NVDA, it's still in the tab order, focusable and "blank".

​http://www.w3.org/TR/aria-in-html/#fourth
Do not use role="presentation" or aria-hidden="true" on a visible focusable element.
Using either of these on a visible focusable element will result in some users focusing on 'nothing'.

​http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
...
In some browsers (aria-hidden content) it's not included in the accessibility tree in other browsers it is included in the accessibility tree.

• For browser that include aria-hidden content in the accessibility tree focusable content is included in tab order and is navigable and operable for AT users (as well as other users).

[joedolson]

That's why we have two alternative options still; these are two different potential paths, each with their own issues.

Using aria-hidden is the non-verbose option, minimizing repetition of data -- the other patch is the verbose option, which repeats a lot of information.

Neither option is ideal, so we need to make a decision.

[iandstewart]

@joedolson I'm a fan of 30076.4.patch for being simpler and easier to maintain/read/understand. If it works, it works for me.

[iandstewart]

@iamtakashi and @davidakennedy in Slack:

Takashi: I like the non-verbose option. If both are not ideal let's pick the simpler one.
David: I would agree there.

30076.4.patch it is.

[iandstewart]

In 30231:

Twenty Fifteen: accessible alt text for post thumbnail links.

Props joedolson, fixes #30076.

[Jayjdk]

Formatting fix

[iandstewart]

In 30232:

Twenty Fifteen: missing spaces for code standards.

Props Jayjdk, fixes #30076.

[lancewillett]

In 30387:

Twenty Fourteen: improve post thumbnail HTML output.

• Add aria-hidden attribute to reduce verbosity on archive pages.
• Add alt text in archives to avoid confusing link texts, see #30076 for context in Twenty Fifteen.

Props hiwhatsup, joedolson. Fixes #30144.