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.
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.