Enabling webpage keyboard navigation (on MacOS)

Gepubliceerd op:

Tags: accessibility | english | WCAG | webdevelopment

(Photo by Sergi Kabrera on Unsplash)

Keyboard navigation for webpages is essential according to the WCAG (https://www.w3.org/WAI/test-evaluate/preliminary/#interaction). In short, a website should be fully navigatable by keyboard. This means links (anchors) and buttons should be ‘focusable’ by keyboard. Pressing enter on a focused element should work the same as clicking the anchor or button. This way somebody without a mouse or other pointer device can still navigate the webpage.

The website I was working on wasn’t particularly keyboard accessible. And that was kind of weird since regular HTML is (by default) keyboard accessible. We were not using a lot of Javascript, which can mess up keyboard navigation. Nor were we using some weird, illogical element order. But yet some elements weren’t reachable with the keyboard. Nothing in our page markup indicated there was something wrong.

But it turns out your browser or even your OS might be interfering with keyboard accessibility.

Keyboard navigation on MacOS

My daily driver is a Macbook Pro M1. Apple kind of disables keyboard navigation on an OS level. Luckily it can be easily activated.

Open up the System Preferences go to “Keyboard” and open up the “Shortcuts” tab. Beneath this tab, at the bottom of the window, there should be an option labeled “Use keyboard navigation to move focus between controls”. Switch it on and restart your browser. There is a big chance keyboard navigation should work properly now!

…unless you use Safari

Keyboard navigation with Safari (on MacOS)

I don’t know why, but apparently Apple thought it was a good idea to disable keyboard altogether for Safari. Enabling isn’t hard and only requires switching on one option.

Open up Safari and go to its preferences. Open the “Advanced” tab and look for the option labeled “Press tab to highlight each item on a page”. Check it and you should be all done.

Now you can finally check if your page is fully accessible by keyboard! …come to think of it, I should check my blog as well.