Opened 10 years ago

Closed 8 years ago

#420 closed defect (bug) (fixed)

Dashicons usage - accessibility on profiles

Reported by: joedolson's profile joedolson Owned by: iandunn's profile iandunn
Milestone: Priority: normal
Component: Profiles Keywords: needs-accessibility needs-ui


The implementation of dashicons on pages in the profile badges in (see have no screen-reader or keyboard navigator accessible text. The context for those links is only available through title attributes, which means that the badges are not visible in anyway to screen readers and keyboard navigators are dependent on a non-existent key to know what badges stand for.

Change History (13)

#1 @iandunn
10 years ago

  • Owner set to iandunn
  • Status changed from new to accepted

#2 @joedolson
10 years ago

Noted after posting this issue that the same is true for Social Media links; those links don't have any accessible text, either.

#3 @Otto42
10 years ago

  • Resolution set to invalid
  • Status changed from accepted to closed

Per by @jenmylo

The design is not completed yet, and the new profiles have not been announced as complete. We started with what you see so that we can test it more easily as we finish the design. What you see now is not the finished design. If you're interested in the profiles project, design decisions are made in the community team at, and we focus on contributor recognition and site projects during our team IRC chat the 4h Thursday of each month.

This is thus premature for meta.trac at this time.

However, I would almost consider this a bug, and maybe somebody from the accessibility team needs to be brought in to whatever design is occurring for the project, wherever that discussion is happening.

#4 @nacin
10 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Re-opening. This is a bug and meta trac is a perfectly fine place to track said bug.

#5 @iandunn
10 years ago

  • Cc mel@… jane@… added

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>

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

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

#6 @joedolson
10 years ago

I'm hugely pro the "making the badge titles visible text" option. I think that would make them easier for everybody.

If that's not an option, adding screen reader text would be helpful. It still leaves out the keyboard-dependent sighted users, but it would be an improvement.

I'd suggest using the clip property to handle screen reader hidden text, like in WP core, so that it gets support for RTL automatically.

.screen-reader-text { 
    position: absolute!important; 
    clip: rect(1px,1px,1px,1px); 
    overflow: hidden; 
    width: 1px; 
    height: 1px; 

#7 @Otto42
10 years ago

#617 was marked as a duplicate.

#8 @swissspidy
9 years ago

  • Cc hello@… added

#9 @melchoyce
9 years ago

  • Keywords needs-accessibility needs-ui added

Sorry, the email cc'd was broken for a while and I never saw this ticket. I think making the badge title visible makes sense, but will definitely need some design work. Adding the needs-ui tag so any designer can take a look at this.

In the meantime, I think we should definitely add screen reader text and use @joedolson's css.

#10 @iandunn
9 years ago

Screen reader text added in [dotorg9967].

#11 @SergeyBiryukov
8 years ago

  • Keywords needs-patch removed

Removing 'needs-patch' from components that are not open sourced yet, to help focus on tickets that actually need a patch.

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

8 years ago

#13 @samuelsidler
8 years ago

  • Keywords changed from needs-accessibility, needs-ui to needs-accessibility needs-ui
  • Resolution set to fixed
  • Status changed from reopened to closed

The initial issue here is fixed. If there's a broader redesign that should be done, that should be a new ticket and probably go through the community team first.

Note: See TracTickets for help on using tickets.