[wp-meta] [Making WordPress.org] #420: Dashicons usage - accessibility on profiles

[Making WordPress.org]

#420: Dashicons usage - accessibility on profiles
------------------------+-------------------------
  Reporter:  joedolson  |      Owner:  iandunn
      Type:  defect     |     Status:  reopened
  Priority:  normal     |  Component:  Profiles
Resolution:             |   Keywords:  needs-patch
------------------------+-------------------------
Changes (by iandunn):

 * cc: mel@…, jane@… (added)


Comment:

 I wonder if we should just add the badge title text under the badges.
 Relying on the `title` attribute seems bad for sighted users too, because
 at best, it's annoying to have to hover over the icon to see what it
 means, and at worst many users won't know that they ''can'' hover over it
 to find out what it means. CC'ing @melchoyce and @jenmylo to get feedback
 on that.

 If that's not desired, then I think the best solution would be to add some
 off-screen text specifically for screen-readers, so that it reads like:

 > "Jane Doe's badges: Plugin Developer, WordCamp Speaker"

 {{{
 <span class="screen-reader">Jane Doe's badges:</span>
 <ul id="user-badges" class="item-list" role="main">
         <li class="even private is-admin is-member">
                 <div class="badge item dashicons badge-speaker dashicons-
 megaphone" title="WordCamp Speaker">
                         <span class="screen-reader">WordCamp
 Speaker</span>
                 </div>
         </li>

         <li class="odd private is-admin">
                 <div class="badge item dashicons badge-plugins dashicons-
 admin-plugins" title="Plugin Developer">
                         <span class="screen-reader">Plugin
 Developer</span>
                 </div>
         </li>
 </ul>

 .screen-reader {
         position: absolute;
         left: -10000px;
         top: auto;
         width: 1px;
         height: 1px;
         overflow: hidden;
 }
 }}}

 @joedolson, what are your thoughts on that?

 #527 is related, and could be incorporated into either solution.

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/420#comment:5>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org