Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#32509 closed defect (bug) (fixed)

List table: media thumbnail and title links improvements

Reported by: afercia's profile afercia Owned by:
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.2
Component: Media Keywords: has-patch
Focuses: ui, accessibility Cc:


In the Media Library, the attachment thumbnail is a linked image and its alt attribute is set with the alt-caption-title fallback see #18984. See screenshot:

For linked images though, the alt attribute should communicate the destination of the link or action taken, see A simple alt text decision tree

This impacts screen readers and the way(s) they read out content, depending on the "reading mode", not to mention other assistive technologies. All screen readers have different browsing modes, they name them in a different way but they're basically the same, for example:

  • "Say all" just lets the screen reader read out the whole page content
  • using arrows to navigate all page objects
  • tabbing to navigate through focusable elements
  • for tables, they have special keystrokes to navigate in every direction inside the table

Tested with Firefox + NVDA, here's how our example gets read out:

Say all          > `link graphic asdasd`
using arrows     > `link graphic asdasd`
table navigation > `link graphic asdasd`
tabbing          > `asdasd graphic link  Edit “typekit-bb-2014-4-copy”`

Only when tabbing it will read out *also* the link title in addition to the alt attribute: `asdasd graphic link Edit “typekit-bb-2014-4-copy”. In all other cases there's no information at all about the link's purpose.

Additionally, the linked Title and the filename below can be improved a bit.

Attachments (1)

32509.patch (2.2 KB) - added by afercia 9 years ago.

Download all attachments as: .zip

Change History (9)

9 years ago

#1 @afercia
9 years ago

  • Keywords has-patch added

In the proposed patch:

  • set the alt attribute to, for example, Edit “typekit-bb-2014-4-copy”
  • remove the title attribute from the image link
  • remove the title attribute from the Title link and use a separate string hidden with screen-reader-text
  • add a 'File name:' screen-reader-text before the... file name

#2 @afercia
9 years ago

Related: #32254 and #32255

#3 @joedolson
9 years ago

  • Milestone changed from Awaiting Review to 4.3

#4 @rianrietveld
9 years ago

Discussed this in the team chat: We stick to the current patch of #32255 and don’t add the aria-hidden + tabindex=-1> How to deal with the link in the image will be solved in #32509

Version 0, edited 9 years ago by rianrietveld (next)

#5 @helen
9 years ago

In 32687:

Media: move the thumbnail into the title column in list view.

This gives us more space for the title and row actions, and will make a responsive list table enhancement significantly easier.

props bradt for the initial patch.
fixes #29993 and #32255. see #32509 and #32395.

#6 @afercia
9 years ago

Having the thumbnail into the title column is a big improvement for accessibility too. This allow us to simply do not use any title or alt attribute on the link and the image, just an empty alt="" and move the image inside the existing link. The plan is to apply a very simple technique:
We'll try to handle this in #32254

#7 @obenland
9 years ago

Is there anything left to do here or can we close it?

#8 @afercia
9 years ago

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

Closing. After recent changes to the List Tables a better solution for the adjacent links is proposed in #32254

Note: See TracTickets for help on using tickets.