Accessibility, finding the joy in tabbing

Introduction

I’ve been aware of accessibility and its lack of implementation in many websites for years. My hand is up, I have contributed to that very sad oversight.

Getting a foothold into the world of better understanding how to code for easier usage is a tough one. Littered with high end spec documentation and seemingly contradicting advice it’s easy to “give up” and concentrate on just “making it look good”.

It is however well worth reading or watching introductions into why accessibility is so important and the breadth of use cases (some may surprise you.) I was sold and rapidly became a convert, deciding to start somewhere, keyboard tab navigation was my muse.

An additional note to remember is that HTML natively supports tabbing, if it doesn’t work it’s been broken by inappropriate coding.

Who knew navigating by keyboard could be so useful and fun?

Once you pick up the basic keystrokes to navigate by keyboard you can see the benefits for users who cannot or struggle to use a mouse. With a few well coded strokes you can assist a user to rapidly transverse a page interacting with all the elements that are required.

Navigation keyboard keys

Activation keyboard keys

Additional actions keys

For a full list of all the keys including how to interact with other elements like forms and tabs see the Webaim Keyboard Testing manual.

Day to day usage

It takes a while to get used to a new way of travelling around and interacting with web pages but it’s worth it and really doesn’t take long at all. Once you get the hang of it you’ll be using it beyond testing what you’re working on and find it a great tool for surfing the web too.

At this point you’ll probably find that many sites, especially ‘fancy’ ones do not work as well as hoped, or at all. This is mainly due to the default behaviour of :focus being nullified with no option for :focus-visible being set.

Nightmare on A11y Street

You’ll also find modals are mostly an accessibility (a11y) nightmare. Focus being lost, content below being accessed inadvertently, tabbing between controls missed out… or even worse tabindex being set incorrectly. The list goes on.

My intention is write more articles about best practices and solutions to issues as I find them… time permitting.

In conclusion

Hat-tip to Matt “Woody” Woodman for bringing this to my attention, he’s an accessibility-first web designer I work with who prodded me to get the tabbing right. I deeply appreciate that as I too have now found the Joy in Tabbing.