Dashicons usage - accessibility on profiles

[joedolson]

The implementation of dashicons on WordPress.org pages in the profile badges in profiles.wordpress.org (see ​http://profiles.wordpress.org/joedolson) 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.

[joedolson]

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

[Otto42]

Per https://meta.trac.wordpress.org/ticket/421#comment:2 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 ​http://make.wordpress.org/community, 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.

[nacin]

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

[iandunn]

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.

[joedolson]

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

[Otto42]

#617 was marked as a duplicate.

[melchoyce]

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.

[iandunn]

Screen reader text added in [dotorg9967].

[SergeyBiryukov]

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

[samuelsidler]

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.