Something I’m thinking about at the moment is how a lot of accessibility work is about what we don’t do as much as we what do, uh, do.
Three things in particular came to mind. And they seemed to match up with traffic lights.
Red light: adding keyboard interactivity
Adding keyboard interactivity to something. In particular adding tabindexes.
Red light! Stop!
We usually don’t need to worry about adding keyboard interactivity. The browser will do the work for us. Instead, we can think about the functionality of the thing. Is it a link, a button, a select? Use that HTML element, and we get keyboard interactivity for free.
Orange light: adding ARIA
Adding ARIA. In particular, adding aria-label.
Orange light! Wait!
The first rule of ARIA is “Use HTML instead of ARIA if you can.” Often when we’re adding ARIA it’s worth asking “Can I do this with just HTML? Why am I reaching for ARIA?”
Green light: using HTML
Using plain old semantic HTML. Green light! Go, go, go!
We get accessible names, (implicit) roles, values, and states. Chef’s kiss, magnificent!