Making WordPress.org

Opened 6 years ago

Closed 4 years ago

#3371 closed defect (bug) (fixed)

All the gravatar images miss an alt attribute

Reported by: afercia's profile afercia Owned by:
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: has-screenshots
Cc:

Description

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:

https://cldup.com/bst2-2mUEa.png

https://cldup.com/vmUrmgJhuj.png

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

Change History (23)

#1 @audrasjb
6 years ago

  • Keywords 2nd-opinion added

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

#2 @afercia
6 years ago

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

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


6 years ago

#4 @ocean90
6 years ago

  • Keywords 2nd-opinion removed

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=

#5 @audrasjb
6 years ago

Thanks @ocean90 . So let's roll!

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


6 years ago

This ticket was mentioned in Slack in #meta by audrasjb. View the logs.


6 years ago

#9 @pento
6 years ago

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

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

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


6 years ago

#11 @afercia
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

https://cldup.com/CzSiPofWt7.png

#12 @obenland
6 years ago

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

#13 follow-up: @afercia
6 years ago

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

#14 @audrasjb
6 years ago

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.

#15 in reply to: ↑ 13 @obenland
6 years ago

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.

Last edited 6 years ago by obenland (previous) (diff)

#16 @obenland
6 years ago

Name title fixed in [dotorg13845].

#17 @obenland
6 years ago

In 6491:

O2: More contextual title for profile links.

Props afercia.
See #3371.

#18 @obenland
6 years ago

@afercia Anything missing here?

#19 @afercia
6 years ago

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?

https://cldup.com/FWekLyduIA.png

#20 @obenland
6 years ago

  • Owner set to obenland
  • Status changed from reopened to accepted

#22 @obenland
6 years ago

  • Owner obenland deleted
  • Status changed from accepted to assigned

#23 @dd32
4 years ago

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

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

Note: See TracTickets for help on using tickets.