Design that meets accessibility requirements is a mandatory concern at iAdvize. As we refactor our solution to be WCAG AA compliant, we’ve come across a hot debate: how should we handle the “focus” state in our UI? It sounded like simple enough question at first, yet it has sparked many conversations between designers, developers and product managers alike.

It has helped us grow and we did find a few solutions, but before we discuss those, let’s have a little reminder about WCAG requirements when it comes to keyboard navigation and focus rings.

WCAG Requirement

2.1.1 Keyboard: All functionalities of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. …

About

Thomas Genissel

Front-end developer at iAdvize

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store