WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#30076 closed defect (bug) (fixed)

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

Reported by: rianrietveld Owned by: iandstewart
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Bundled Theme Keywords: has-patch needs-testing commit
Focuses: accessibility Cc:

Description

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

Attachments (5)

30076.patch (781 bytes) - added by joedolson 5 years ago.
Fetches alt attribute from metadata, creates new alt attribute and passes to post thumbnail request.
30076.2.patch (822 bytes) - added by joedolson 5 years ago.
Handles empty alt.
30076.3.patch (589 bytes) - added by joedolson 5 years ago.
Alternate solution using aria-hidden to reduce verbosity
30076.4.patch (640 bytes) - added by joedolson 5 years ago.
forgot fallback in prior patch
30076.5.patch (574 bytes) - added by Jayjdk 5 years ago.
Formatting fix

Download all attachments as: .zip

Change History (26)

#1 @iandstewart
5 years ago

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

#2 @joedolson
5 years ago

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.

#3 @iandstewart
5 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.1

#4 @joedolson
5 years ago

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
5 years ago

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

#5 @iamtakashi
5 years ago

  • Keywords has-patch added; needs-patch removed

#6 @iandstewart
5 years ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #core-themes by iandstewart. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-themes by iamtakashi. View the logs.


5 years ago

#9 @iamtakashi
5 years ago

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
5 years ago

Handles empty alt.

This ticket was mentioned in Slack in #core by johnbillion. View the logs.


5 years ago

@joedolson
5 years ago

Alternate solution using aria-hidden to reduce verbosity

#11 @joedolson
5 years ago

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

@joedolson
5 years ago

forgot fallback in prior patch

#12 @afercia
5 years ago

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).

#13 @joedolson
5 years ago

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.

#14 @iandstewart
5 years ago

@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.

This ticket was mentioned in Slack in #core-themes by iamtakashi. View the logs.


5 years ago

#16 @iandstewart
5 years ago

  • Keywords commit added

@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.

#17 @iandstewart
5 years ago

  • Owner set to iandstewart
  • Resolution set to fixed
  • Status changed from new to closed

In 30231:

Twenty Fifteen: accessible alt text for post thumbnail links.

Props joedolson, fixes #30076.

@Jayjdk
5 years ago

Formatting fix

This ticket was mentioned in Slack in #core-themes by jayjdk. View the logs.


5 years ago

#19 @iandstewart
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#20 @iandstewart
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 30232:

Twenty Fifteen: missing spaces for code standards.

Props Jayjdk, fixes #30076.

#21 @lancewillett
5 years ago

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.

Note: See TracTickets for help on using tickets.