All the gravatar images miss an alt attribute

[afercia]

See for example on ​https://make.wordpress.org/core/

All the Gravatar images in the comments and in the sidebar miss an alt attribute. When an image doesn't have an alt attribute (which, by the way, it's required in HTML5), screen readers try to read something anyway. The only available "thing" to read out is the filename:

It would be great to avoid such a terrible audible feedback for users. The two cases are different though.

Post comments

Images in the post comments are linked. Actually, the link is duplicate because the visible name is already linked to the same resource:

<a href="https://profiles.wordpress.org/jbpaul17" class="author-avatar ">
	<img src="https://gravatar.com/avatar/8ac4ec4b1f9cb342e59ed5127f050d24?d=mystery" width="48" height="48" class="avatar  grav-hashed" id="grav-8ac4ec4b1f9cb342e59ed5127f050d24-0" scale="0">
</a>
<a href="https://profiles.wordpress.org/jbpaul17" title="Posts by Jeffrey Paul (@jbpaul17)" class="entry-author ">
	Jeffrey Paul
</a>

I'd suggest to avoid the duplicate links in the first place: use just one link for both the image and the visible name, use an empty alt attribute alt="" on the image. For details, see what was done in the WordPress Credits page: ​https://core.trac.wordpress.org/ticket/34953#comment:2

Please note also the link on the name has a title attribute:

title="Posts by Jeffrey Paul (@jbpaul17)"

that's a wrong information because the link points to the .org profile, not to the author page. I'd suggest to either remove the title attribute or use something like title="see Jeffrey Paul profile"

Sidebar "Recent Posts and Comments"

Images in the sidebar are a different case. They're not part of the link but they probably should. When reading the links in the sidebar with a screen reader, there's no information at all about the author. Only the following gets announced:

Comment on Servehappy Roadmap	
Yesterday at 11:25 am

and then the following:

Comment on Servehappy Roadmap	
Yesterday at 11:23 am

and then...

Comment on Servehappy Roadmap	
Yesterday at 11:19 am

Exposing just the "commented on" and date/time info is not that useful, it would be great to include the author name, if possible. I'd consider to put the image inside the link and use the author name as alt attribute.

If this is not possible, then the image should stay not linked but it should use an empty alt attribute.

Worth noting the "gravatar card" appears just on hover and is not available for keyboard users (luckily, I'd say).

[audrasjb]

Good catch @afercia :)

It guess the problem is related to a misuse of get_avatar( ) function all around wordpress-meta.
​https://codex.wordpress.org/Function_Reference/get_avatar

alt parameter of this function seems always ommitted so there is almost no alt attribute at all.

IMO, there is two ways to fix it:

• Fix get_avatar( ) use in all wordpress-meta repo by adding an empty alt parameter.
• Fix get_avatar( ) function to set alt parameter by default to '' and fix this issue in the whole WP ecosystem :P

I can work on both solutions. What do you prefer?

Cheers,
Jb

[afercia]

@audrasjb :) not sure what meta is using, but as far as I see the get_avatar() function in core has a default empty alt attribute:

function get_avatar( $id_or_email, $size = 96, $default = '', $alt = '', $args = null ) {

[ocean90]

To get this fixed a PR needs to be submitted to o2, see ​https://github.com/Automattic/o2/search?utf8=%E2%9C%93&q=avatar&type=

[audrasjb]

Thanks @ocean90 . So let's roll!

[audrasjb]

PR sent here: ​https://github.com/Automattic/o2/pull/148

[pento]

Thanks for the PR, @audrasjb! I've merged it, and deployed to WordPress.org.

[afercia]

Thanks very much for the improvements here. Sorry to reopen:

This point is still to address:

Please note also the link on the name has a title attribute:
title="Posts by Jeffrey Paul (@jbpaul17)"
that's a wrong information because the link points to the .org profile, not to the author page. I'd suggest to either remove the title attribute or use something like title="see Jeffrey Paul profile"

Additionally, the author image is still a link with an image with an empty alt attribute. Should preferably be merged with the author name in one link or have a meaningful alt text.

[obenland]

@afercia Would the author display name be an acceptable alt attribute for that avatar?

[afercia]

@obenland See %s profile or See profile: %s would be better because that's where the link points to. However, the ideal solution would be putting the image (with an empty alt ttribute) and name inside just one link, prepending some screen-reader-text maybe.

[audrasjb]

Hi @obenland @afercia

Since o2 author link is actually linking to the author's posts (but not in w.org implementation of the plugin), I guess this is not an issue for Automattic/o2 but for w.org implementation of this plugin. I Guess we just need to use a filter to replace the title attribute used in w.org.

But @afercia is alright, the current markup is not perfect, and can be improved both in o2 and w.org implementation of the plugin.

[obenland]

Replying to afercia:

See %s profile or See profile: %s would be better because that's where the link points to.

As the image alt attribute? Not the link title?

However, the ideal solution would be putting the image (with an empty alt ttribute) and name inside just one link, prepending some screen-reader-text maybe.

I'd rather not do that. The user name doesn't get displayed on pages, and in all other cases we also have the entry date to deal with.

[obenland]

Name title fixed in [dotorg13845].

[obenland]

In 6491:

O2: More contextual title for profile links.

Props afercia.
See #3371.

[obenland]

@afercia Anything missing here?

[afercia]

As the image alt attribute? Not the link title?

Yes, for a linked image the alt attribute is actually the link textual content.

I'll let you decide, please just consider formal compliance can be ineffective if the links are not meaningful. See for example in the screenshot below: would you be able to understand where those two links point to when read out of context?

[obenland]

Created a ​new pull request.

[dd32]

Marking as fixed, the remaining issue is filed upstream with an open PR.