Page MenuHomePhabricator

Wikistats Beta: Fix accessibility/markup issues of Wikistats 2.0
Closed, ResolvedPublic8 Story Points

Description

Wikistats 2.0: http://stats.wikimedia.org/v2

currently has several accessibility and markup issues (in order of priority):

  • it lacks WCAG level AA conformant color contrast on following elements:
  • lang attribute on html is missing
  • heading must not be empty
  • Wikimedia logo is missing alt attribute
  • search input must have a connected label
  • page must feature a main ARIA landmark

Event Timeline

Restricted Application added a project: Analytics. · View Herald TranscriptJan 22 2018, 10:05 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

https://gerrit.wikimedia.org/r/#/c/398459/ has aimed at taming a few color issues. IMO making use of Wikimedia UI Base would be a good resource to address basic color UI recommendations conforming to WCAG level AA.
See for example --color-placeholder for search placeholder.

Nuria renamed this task from Fix accessibility/markup issues of Wikistats 2.0 to Wikistats Beta: Fix accessibility/markup issues of Wikistats 2.0.Feb 5 2018, 5:34 PM
Nuria moved this task from Incoming to Dashiki on the Analytics board.
Nuria updated the task description. (Show Details)Feb 24 2018, 10:53 PM
mforns added a subscriber: mforns.

From duplicate task:

https://www.mediawiki.org/wiki/Topic:Tp059xh118wkx24b
Also, use this to clean up other things such as:
Replace Language Selector with "coming soon"
Other little cleanup things
View metrics dialog - align
Plan for internationalization

mforns moved this task from Dashiki to Mentoring on the Analytics board.Mar 8 2018, 6:06 PM

@mforns which search placeholder and input are mentioned here, the one in TopicExplorer or the one in WikiSelector ?

Change 419962 had a related patch set uploaded (by Mrcornacchio; owner: mrcornacc):
[analytics/wikistats2@master] Change TopicExplorer placeholder contrast to WCAG AA compliance

https://gerrit.wikimedia.org/r/419962

@sahil505 I think we should check both.
See that there's already one Gerrit patch to fix that particular issue with the TopicExplorer.

There's another related patch which the bot didn't seem to catch: https://gerrit.wikimedia.org/r/419958/

Change 423176 had a related patch set uploaded (by Mrcornacchio; owner: mrcornacc):
[analytics/wikistats2@master] Fix stylelint errors and TopicExplorer placeholder contrast

https://gerrit.wikimedia.org/r/423176

Change 419962 abandoned by Mrcornacchio:
Change TopicExplorer placeholder contrast to WCAG AA compliance

https://gerrit.wikimedia.org/r/419962

@Volker_E I have a question about this issue:
" heading must not be empty" | Which heading(s) are you referring to? What do they need to contain to be considered non-empty?

@MCornacchio The wikiselector search is wrapped in a h5 currently, which is superfluos semantically IMO.

<h5 class="ui right floated header wikiselector"><div single="true"><div class="ui search"><div class="ui icon input"><input type="text" placeholder="" class="prompt"> <i class="search icon"></i></div> <!----></div></div></h5>

Change 425925 had a related patch set uploaded (by Sturmkrahe; owner: Sturmkrahe):
[analytics/wikistats2@master] Fix accessibility/markup issues

https://gerrit.wikimedia.org/r/425925

Change 423176 abandoned by Mrcornacchio:
Fix stylelint errors and TopicExplorer placeholder contrast

https://gerrit.wikimedia.org/r/423176

Change 426848 had a related patch set uploaded (by Mrcornacchio; owner: mrcornacchio):
[analytics/wikistats2@master] Fix stylelint errors and TopicExplorer placeholder

https://gerrit.wikimedia.org/r/426848

Sturmkrahe added a comment.EditedApr 18 2018, 8:29 PM

Here are before and after pictures for change 419958 (https://gerrit.wikimedia.org/r/419958/), patch set 5:

BeforeAfter
Detail view
Metric widgit

Change 426848 merged by jenkins-bot:
[analytics/wikistats2@master] Fix stylelint errors and TopicExplorer placeholder

https://gerrit.wikimedia.org/r/426848

MCornacchio removed MCornacchio as the assignee of this task.May 3 2018, 6:03 PM
MCornacchio added a subscriber: MCornacchio.
mforns added a comment.May 7 2018, 7:55 PM

@Volker_E
Even if you merged this patch, I understand that this task is not done yet, because there are still changes to be applied in other sections of the code. Is that correct?

@mforns Don't follow which patch you refer to, this one https://gerrit.wikimedia.org/r/#/c/419958/ has also stronger visual impacts, which I support, but I don't want to overrule project owners, therefore only +1. This one was mostly on code level and on undisputable things. Will update task description.

Volker_E updated the task description. (Show Details)May 7 2018, 9:42 PM

@Volker_E
Thanks, I understand it better now.
We'll work on this task in the upcoming weeks.

mforns triaged this task as Normal priority.May 8 2018, 2:37 PM
mforns set the point value for this task to 8.
sahil505 moved this task from Next Up to In Progress on the Analytics-Kanban board.

@mforns @Volker_E : I was going through the task description and I couldn't see the need of a label along with the search inputs? Can you please clarify if you are thinking of this from any other point of view. The 'Explore Topic' heading & the search placeholders are pretty much making clear what the search input is for. Let me know what you think.

sahil505 added a comment.EditedMay 29 2018, 12:18 PM

Color contrast of footer text & links are taken care of in T191672 so updating the description.

Volker_E added a comment.EditedMay 29 2018, 12:19 PM

@sahil505 Neither the “Explore topics” “heading” (which isn't marked up as heading, it's just a span) nor the placeholder are sufficient exposed to describe the search input in a screenreader.
A label, and if it's only a visually hidden one repeating the placeholder text, connected to the input is necessary.

sahil505 updated the task description. (Show Details)May 29 2018, 12:19 PM

Change 436002 had a related patch set uploaded (by Sahil505; owner: Sahil505):
[analytics/wikistats2@master] Fixed accessibility/markup issues of Wikistats 2.0

https://gerrit.wikimedia.org/r/436002

Change 436002 merged by Mforns:
[analytics/wikistats2@master] Fixed accessibility/markup issues of Wikistats 2.0

https://gerrit.wikimedia.org/r/436002

Nuria closed this task as Resolved.Jun 18 2018, 5:56 PM