Page MenuHomePhabricator

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

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

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: Annual-Report.
Volker_E updated the task description. (Show Details)Jan 19 2018, 6:41 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

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

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

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

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

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

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:

Volker_E updated the task description. (Show Details)Jan 20 2018, 3:30 AM

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

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

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 updated the task description. (Show Details)Jan 25 2018, 11:26 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

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

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

At the main navigation items non-active color:

BeforeAfter

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.

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.

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

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

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

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

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

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

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:

If Stories is expanded, other items cannot be reached.


All items can be clicked, no scrolling is needed.

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

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)