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 added a project: WMF-Annual-Report.

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

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)

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 (1×2 px, 188 KB)

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

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 That color correction for the Donor list is great. Let's implement!

At the main navigation items non-active color:

BeforeAfter
image.png (102×1 px, 16 KB)
image.png (108×1 px, 18 KB)

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 removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

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 (382×654 px, 45 KB)

If Stories is expanded, other items cannot be reached.

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

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

(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 updated the task description. (Show Details)