Page MenuHomePhabricator

Fix button accessibility of emojis in User Feedback gadget
Closed, ResolvedPublic0 Estimated Story Points

Description

(Hmm, where is the task about deploying that gadget on MediaWiki.org ?)

Have the current emojis been tested with screen readers?

$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-up"' +
    'class="thumbs thumbs-up">👍</a>' );
$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-down"' +
    'class="thumbs thumbs-down">👎</a>' );

As I do not have rights to edit https://wikitech.wikimedia.org/wiki/MediaWiki:Gadget-userfeedback.js , I guess it could be something like this?:

$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-up"' +
    'role="img" aria-label="Yes" class="thumbs thumbs-up">👍</a>' );
$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-down"' +
    'role="img" aria-label="No" class="thumbs thumbs-down">👎</a>' );

Event Timeline

Aklapper renamed this task from Fix button accessiblity of User Feedback gadget to Fix button accessibility of User Feedback gadget.Jun 6 2019, 4:09 PM

Just to add to the task description, which is already pointing into a good direction. A good overview on the accessible use of emojis can be found in Ashley Sheridan's article. Two things should be amended:

$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-up"' +
    ' class="thumbs thumbs-up"><span role="img" aria-label="Thumbs up">👍</span></a>' );
$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-down"' +
    'class="thumbs thumbs-down"><span role="img" aria-label="Thumbs down">👎</span></a>' );
  • An element with an inherent role shouldn't be overridden with another role. In this case the anchor already carries link and the role="img should be provided to a span within wrapping the actual emoji. With this, the screen reader exposes it as a link carrying an image which reads “Thumbs up” or “Thumbs down”
  • “Yes” or “No” didn't seem sufficient to me without having all the context of the gadget. The aria-label should be short, but descriptive.

@Aklapper @Volker_E Thanks for pointing that! Article was a good one :)

@Quiddity Could you help update the code in my gadget on Wikitech: https://wikitech.wikimedia.org/wiki/MediaWiki:Gadget-userfeedback.js with:

$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-up"' +
    ' class="thumbs thumbs-up"><span role="img" aria-label="Thumbs up">👍</span></a>' );
$( '#mw-userfeedback-form' ).append( '<a id="mw-userfeedback-thumbs-down"' +
    'class="thumbs thumbs-down"><span role="img" aria-label="Thumbs down">👎</span></a>' );

@Quiddity Could you help update the code in my gadget on Wikitech

Nope! You need an Interface Admin to edit any .js/.css files in that namespace. :-)

@Quiddity Could you help update the code in my gadget on Wikitech

Nope! You need an Interface Admin to edit any .js/.css files in that namespace. :-)

:(

@bd808 @Krinkle Could one of you help? :)

Aklapper renamed this task from Fix button accessibility of User Feedback gadget to Fix button accessibility of emojis in User Feedback gadget.Jun 12 2019, 9:31 AM