Page MenuHomePhabricator
Create Task
Maniphest T185288

Fix accessibility issues of Annual Report 2017 before launch
Closed, ResolvedPublic
Actions

Assigned To
Volker_E
Authored By
Volker_E
Jan 19 2018, 6:38 AM
Project Tags
Referenced Files
F12898979: Screen Shot 2018-01-30 at 1.59.58 PM.png
Jan 30 2018, 10:06 PM
F12899170: Screen Shot 2018-01-30 at 2.01.04 PM.png
Jan 30 2018, 10:06 PM
F12898997: Screen Shot 2018-01-30 at 1.35.29 PM.png
Jan 30 2018, 10:06 PM
F12810004: image.png
Jan 26 2018, 8:21 PM
F12809996: image.png
Jan 26 2018, 8:21 PM
F12690638: image.png
Jan 20 2018, 10:35 PM
Subscribers
Aklapper
Etonkovidova
Volker_E
ZMcCune

Description

As of now, Annual Report has accessibility issues:

  • Footer > charity navigator image is missing alt text
  • Content images are missing alt text on “Stories” and “Donors”
  • Inlined SVGs feature several repeated ids, which might mess with screenreaders navigational functionality
  • Revisit user-scalable=no for viewport meta
  • Hamburger button doesn't have text node
  • Several links don't have text nodes
  • Donor list items fail WCAG level AA conformance
  • Main navigation links (inactive ones) are failing WCAG level AA conformance

Details

Related Changes in Gerrit:
SubjectAuthorRepoBranchLines +/-
Enable ability to zoom for usersVolkerEwikimedia/annualreportmaster+6 -6
Fix sustaining donors list items' color contrastVolkerEwikimedia/annualreportmaster+2 -2
Increase color contrast of main nav itemsVolkerEwikimedia/annualreportmaster+5 -13
Remove duplicated ids throughout documentsVolkerEwikimedia/annualreportmaster+33 -63
Add further `alt` attributes and textsVolkerEwikimedia/annualreportmaster+10 -9
Add discernible text to linksVolkerEwikimedia/annualreportmaster+25 -34
Hide hamburger button from assistive technologiesVolkerEwikimedia/annualreportmaster+6 -6
Add `alt` attribute to footer imageVolkerEwikimedia/annualreportmaster+6 -6
Customize query in gerrit

Related Objects
Search...

Event Timeline

Volker_E created this task.Jan 19 2018, 6:38 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 19 2018, 6:38 AM
Volker_E triaged this task as High priority.Jan 19 2018, 6:38 AM
Volker_E added a project: WMF-Annual-Report.
Volker_E updated the task description. (Show Details)Jan 19 2018, 6:41 AM
gerritbot subscribed.Jan 19 2018, 7:01 AM

Change 405249 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Add alt attribute to footer image

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

gerritbot added a project: Patch-For-Review.Jan 19 2018, 7:01 AM
gerritbot added a comment.Jan 19 2018, 8:06 AM

Change 405251 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Hide hamburger button from assistive technologies

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

gerritbot added a comment.Jan 19 2018, 8:06 PM

Change 405249 merged by Reedy:
[wikimedia/annualreport@master] Add alt attribute to footer image

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

gerritbot added a comment.Jan 19 2018, 11:01 PM

Change 405251 merged by Catrope:
[wikimedia/annualreport@master] Hide hamburger button from assistive technologies

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

Volker_E updated the task description. (Show Details)Jan 19 2018, 11:20 PM
gerritbot added a comment.Jan 20 2018, 1:35 AM

Change 405388 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Add discernible text to links

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

gerritbot added a comment.Jan 20 2018, 2:43 AM

Change 405392 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Add further alt attributes and texts

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

Volker_E updated the task description. (Show Details)Jan 20 2018, 2:46 AM
Volker_E updated the task description. (Show Details)
Volker_E added a comment.EditedJan 20 2018, 3:29 AM

Regarding donor list colors, #007dbd seems to be a sufficient color in terms of contrast to the background and to the “Patrons” list.
This would look as follows:

image.png (2,416×1,092 px, 188 KB)

Volker_E updated the task description. (Show Details)Jan 20 2018, 3:30 AM
gerritbot added a comment.Jan 25 2018, 6:09 PM

Change 405388 merged by VolkerE:
[wikimedia/annualreport@master] Add discernible text to links

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

gerritbot added a comment.Jan 25 2018, 6:09 PM

Change 405392 merged by VolkerE:
[wikimedia/annualreport@master] Add further alt attributes and texts

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

Volker_E updated the task description. (Show Details)Jan 25 2018, 6:57 PM
Volker_E updated the task description. (Show Details)Jan 25 2018, 7:13 PM
Volker_E closed subtask T185364: Financials section on start page features hidden buttons for pie chart background as Resolved.Jan 25 2018, 9:39 PM
Volker_E updated the task description. (Show Details)Jan 25 2018, 11:26 PM
gerritbot added a comment.Jan 25 2018, 11:30 PM

Change 406249 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Remove duplicated ids throughout documents

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

gerritbot added a comment.Jan 26 2018, 12:23 AM

Change 406249 merged by VolkerE:
[wikimedia/annualreport@master] Remove duplicated ids throughout documents

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

Volker_E updated the task description. (Show Details)Jan 26 2018, 12:25 AM
ZMcCune added a comment.Jan 26 2018, 8:16 PM

@Volker_E That color correction for the Donor list is great. Let's implement!

Volker_E added a comment.Jan 26 2018, 8:21 PM

At the main navigation items non-active color:

BeforeAfter
image.png (1,128×102 px, 16 KB)
image.png (1,134×108 px, 18 KB)
ZMcCune added a comment.Jan 26 2018, 8:22 PM

I understand @Volker_E. Let's implement this darker (and correctly accessible) gray color.

Really appreciate you working to make sure the site's design lives up to "Knowledge belongs to all of us" in its accessibility.

ZMcCune added a comment.Jan 26 2018, 8:27 PM

On the final to-do indicated here, @Volker_E let's test approaches to the user-scalable situation. I want to QA before implementing anything that could challenge animation playback.

gerritbot added a comment.Jan 30 2018, 6:42 AM

Change 406796 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Increase color contrast of main nav items

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

gerritbot added a comment.Jan 30 2018, 6:48 AM

Change 406797 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Fix sustaining donors list items' color contrast

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

gerritbot added a comment.Jan 30 2018, 7:19 AM

Change 406800 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia/annualreport@master] Enable ability to zoom for users

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

Volker_E added a subscriber: Etonkovidova.Jan 30 2018, 7:33 AM

@Etonkovidova ^ Change 406800 is the one I've been talking to you about. We could need your help to test it on various mobile portrait to landscape mode changes.

gerritbot added a comment.Jan 30 2018, 5:24 PM

Change 406796 merged by VolkerE:
[wikimedia/annualreport@master] Increase color contrast of main nav items

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

gerritbot added a comment.Jan 30 2018, 5:24 PM

Change 406797 merged by VolkerE:
[wikimedia/annualreport@master] Fix sustaining donors list items' color contrast

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

Volker_E updated the task description. (Show Details)Jan 30 2018, 5:36 PM
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
Etonkovidova added a comment.EditedJan 30 2018, 10:06 PM

Checked in iOS (the Chrome emulator and a real device) and Android (the Chrome emulator only).

All looks and works fine.

@Volker_E - two issues:
(1) The overlay menu is not scrollable.
Turn to a horizontal view and some menu items will not be reachable:

Screen Shot 2018-01-30 at 1.59.58 PM.png (654×382 px, 45 KB)

If Stories is expanded, other items cannot be reached.

Screen Shot 2018-01-30 at 1.35.29 PM.png (421×563 px, 47 KB)

All items can be clicked, no scrolling is needed.
Screen Shot 2018-01-30 at 2.01.04 PM.png (309×566 px, 33 KB)

(2) The 'Stories` menu item becomes automatically expanded when a device is turned horizontally.

gerritbot added a comment.Feb 1 2018, 2:00 AM

Change 406800 merged by VolkerE:
[wikimedia/annualreport@master] Enable ability to zoom for users

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

Volker_E closed this task as Resolved.Feb 1 2018, 2:30 AM
Volker_E updated the task description. (Show Details)
Volker_E mentioned this in T186185: Menu not scrollable on certain resolutions.Feb 1 2018, 5:07 AM

Thanks @Etonkovidova for your insights. Filed your notes in T186185

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits