Folks, accessibility is hard

Our engineering team often finds issues that we qualify as "last mile issues": you are 90% there, now there is just an additional 90% of work to finish this. It turns out accessibility is precisely one of these topics.

Strike this off as one of those features where we thought "almost there" was a decent compromise. We reviewed our lighthouse accessibility audit and stopped working at 90%, assuming that would be enough. Well, it happens that automatic tests will fail to detect a lot of real-world cases – and we do mean a lot.

During Commit 2019, we hosted three speakers that were either blind or with reduced vision. One of them shared with us a list of 13 accessibility issues that he found while trying to submit his talk during the Call for Papers. He was successful, mind you – but the experience left a lot to be desired. We can do better.  

Today, we are happy to send to production a new release that reflects this feedback received during Commit:

• If there are validation errors on form submission, transfer focus to first error field
• Add aria-describedby to any input field with validation errors
• Add aria-describedby to all input fields with an associated help line (39 fields affected)
• Add aria-label to all <nav> tags
• Accessible error pages
• Add accessible menu options to react-rug-menu
• Attribute for on labels should point to input[id] instead of input[name] (21 forms affected).
• Simplified accessible notification messages
• Accessible breadcrumbs (treat as any other navigation)
• Accessible "share this event" button (treat as any other popup menu)
• Accessible cookies message (add context to Accept button, and better button message)
• Accessible Markdown help
• Add <ul>/<li> to all <nav> menus to improve navigation on screen reader
• Add aria-label to all <nav> menus to improve discoverability on screen reader
• Focus first menu item after opening a popup menu
• Close popup menu when pressing escape
• Accessible login page
• Introduce <main> tag and "skip to content" link
• Update React test snapshots to include all ARIA attributes
• Use <ul>/<li> in footer instead of <dl>/<dd> (we honestly don't know how this arrived there)

Accessibility is a journey, not a destination. All form instances across Koliseo (including the Call for Papers submission form) are now in a better place, but the Agenda remains quite unusable for people with disabilities. We are aware and keep working on that, but we wanted to get something out the door as soon as possible.

Not being able to use our site sucks. We are fixing that.