Plugin cards: plugin images missing alt attribute

[afercia]

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.

[ChrisMKindred]

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.

[afercia]

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

[TomHarrigan]

@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;
}

[TomHarrigan]

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

[ChrisMKindred]

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

[afercia]

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.

[afercia]

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.

[wonderboymusic]

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.