Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#32400 closed defect (bug) (fixed)

Plugin cards: plugin images missing alt attribute

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


See screenshot:

Since they're linked images, screen readers will read out what they can find there, and there's only one information available: the link URL:

NVDA reads out part of the URL, for example:

link plugin-install tab=plugin-info…

ChromeVox reads out the file name, for example:

"icon Image Link"

"icon-256x256 Image Link"

Would probably be a perfect case for this suggested W3C technique:
H2: Combining adjacent image and text links for the same resource

Any thoughts more than welcome.

Attachments (3)

32400.diff (955 bytes) - added by ChrisMKindred 9 years ago.
32400_1.diff (1.0 KB) - added by ChrisMKindred 9 years ago.
32400.2.patch (1.4 KB) - added by afercia 9 years ago.

Download all attachments as: .zip

Change History (15)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

9 years ago

9 years ago

#2 @ChrisMKindred
9 years ago

  • Keywords has-patch added

I added a span with a class of screen-reader-text and threw the title in so it doesn't mess with the format of the plugin-card itself. I think that still follows the W3C technique mentioned above.

Last edited 9 years ago by ChrisMKindred (previous) (diff)

#3 @SergeyBiryukov
9 years ago

  • Milestone changed from Awaiting Review to 4.4
  • Owner set to afercia
  • Status changed from new to reviewing

#4 follow-up: @afercia
9 years ago

@ChrisMKindred thanks, by the way what the W3C technique suggests and I'd recommend to follow, is to put both the image and the title inside the link. This way we can also remove one redundant link. Pretty much like what was done for the Media Library (in list mode).

#5 @TomHarrigan
9 years ago

@afercia, not sure I understand. Putting the actual visual title (rather than the screen reader text title) in that same anchor tag is going to change the layout of the card. The anchor tag has the .plugin-icon class which define the dimensions ( 128x128 ) of the icon area and would thus confine the visual title to that left-most portion of the card

.plugin-icon, .plugin-icon img {
    width: 128px;
    height: 128px;

#6 @TomHarrigan
9 years ago

Nevermind, spoke too soon, I see what you mean from the media list.

#7 in reply to: ↑ 4 @ChrisMKindred
9 years ago

@afercia @TomHarrigan I think I get what you guys are taking about now. By just putting the h4 inside the link it eliminates the need to add the screen-reader-text class and the additional title text all together.

Last edited 9 years ago by ChrisMKindred (previous) (diff)

#8 @afercia
9 years ago

Tested a bit 32400_1.diff and noticed this way the focus style is missing. I think it's not a CSS bug, browsers don't apply a box-shadow on inline elements. Also, I'm not sure block level links are the way to go, looks like block level links can be problematic for screen readers.
I'd rather try to put everything inside the heading and apply the CSS classes accordingly.

9 years ago

#9 @afercia
9 years ago

  • Keywords commit added

In the refreshed patch, everything is now inside the heading. The plugin "icon" is already absolutely positioned so no need for any CSS changes. Moved the CSS class plugin-icon from the link to the icon.
So, no visual changes :) Just better accessibility: combined adjacent image and text links for the same resource.

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

9 years ago

#11 @afercia
9 years ago

  • Owner changed from afercia to wonderboymusic

#12 @wonderboymusic
9 years ago

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

In 34760:

Plugins: on the Install page, move the name of each plugin into the <h4> to accommodate screen readers.

Props afercia, ChrisMKindred.
Fixes #32400.

Note: See TracTickets for help on using tickets.