Skip to main content

🔎 Focus on a11y globally

We've talked a bit about a11y in the previous step, but as front-end devs it should always be in the back of you heads at every stage of integrating a design!

A11y means Accessibility

info

“a11y” is a numeronym, with 11 representing the count of letters between the letter a and the letter y. Other numeronyms you may be familiar with include: i18n (internationalization), P2P (peer to peer), k8s (Kubernetes), W3C (World Wide Web Consortium), etc.

Keyboard navigation​

That one is so easy to test! Just tab through your website and see if you can reach every piece of interactive content! You can also use keyboard arrows to make sure nothing breaks on scroll. Doing this might higlight underlying issues and will make you a better developer in the long run, as it'll become mechanic!

Here's a non exhaustive list of things to always look out for:

  • Make sure you can't access invisible content by tabbing. Check document.activeElement when you're not sure about your current focus
  • Conversely, make sure you can't tab out of a restricted scope like a fullscreen menu or a modal!
  • Make sure to keep highlight styles on all your interactive elements using the :focus-visible selector! Do not blindly discard the outline CSS property
Recommended library: focus-trap

When working with keyboard navigation & scoped content like menus or modals, we strongly recommend using the focus-trap library! It allows to easily define boundaries to the tabbable elements without struggling with the tabindex property (which you can easily do nasty things with) and much more.

Screenreaders​

Another good way to get up to speed and realize the importance of a11y: try a screen-reader! It's a bit of a struggle at first, but it really showcases how worse it can quickly get if we - as front-end developers - are not careful enough for those users in our coding.

We can't review the whole a11y subject today, and that's not what you're here for today. But we think it was still an important point to make and we hope that with those few resources we shared, you too will improve your day to day coding a11y-wise.

A11y project