[wp-meta] [Making WordPress.org] #3371: All the gravatar images miss an alt attribute

[Making WordPress.org]

#3371: All the gravatar images miss an alt attribute
--------------------------------------+-----------------------------
 Reporter:  afercia                   |      Owner:
     Type:  defect                    |     Status:  new
 Priority:  normal                    |  Milestone:
Component:  Make (Get Involved) / P2  |   Keywords:  has-screenshots
--------------------------------------+-----------------------------
 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:

 [[Image(https://cldup.com/bst2-2mUEa.png)]]

 [[Image(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).

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/3371>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org