Accesibility action plan

[furilo]

• Review what things we should comply with
• Outline an action plan of things we need to do to comply
• Find a good validation tool

[martgnz]

I've been doing some research and here's what I've found so far:

Certification

We should comply with WCAG 2 AA, that's the W3C, Spanish and EU standard. In the near future intranets and mobile apps should pass this, too.

This means, as a summary, that Gobierto should be keyboard accessible, achieve a 4,5:1 contrast ratio, allow a 200% zoom level without breaking the layout, and have better semantics and hierarchy to improve screen reader output.

The plan

To improve the current situation we can fix things regarding contrast and hierarchy:

• We should try to improve the text colors to meet the suggested contrast ratios for body copy and headlines (using this tool).
• A button should be a <button>, not a link.
• Document issues
  • We should improve the hierarchy (missing a <h1>, for example)
  • We don't declare a language in the HTML
• Implement ARIA wherever is needed:
  • Lists
  • Tables
  • Tabbed interfaces

The biggest effort will be adding ARIA to the markup: tables, tooltips, tabs and forms should have clear roles and statuses to improve screen-reader's accuracy (the JS should change these attributes too).

Attached there's a short report with some issues we can look into. In the future we should test the website using VoiceOver or a similar technology, and it would be great to make a user test.

Good accessibility doesn't seem easy but we can improve if we start coding UI elements with better semantics from the start.

Tools

• A compilation of validators: https://www.w3.org/WAI/ER/tools/
• Chrome's Accessibility tools: https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb
• Great bookmarklet: https://khan.github.io/tota11y/
• Provides simple reports: https://github.com/addyosmani/a11y

Reference

• https://www.w3.org/TR/WCAG20/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ
• http:https://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad/pae_documentacion/pae_eInclusion_Preguntas_Frecuentes.html

Interesting reads

• https://www.smashingmagazine.com/2013/08/semantic-css-with-intelligent-selectors
• https://www.marcozehe.de/2013/03/08/sometimes-you-have-to-use-illegal-wai-aria-to-make-stuff-work/
• https://blog.twitter.com/2013/improving-accessibility-of-twittercom

[ferblape]

Question: is there any automated test we could add in our test suite to validate we are not introducing changes that are not valid accessibility point of view?

[martgnz]

Good question! pa11y seems to be what we are looking for.