Enabling Keyboard navigation in Safari

I use Safari as my primary development browser and I was working on a site recently which had a multi-step form which need to have the whole interface usable via the keyboard (ok, realistically all sites should be able to work this way but for this site it was a particular focus). Having been a long time Mac user I was familiar with the fact that you need to go into System Preferences -> Keyboard -> Shortcuts to enable the option for "All Controls" for Keyboard Access:


So, I had this setting enabled and I could happily navigate all of the form elements within the form I was working on but when it came to the navigation links to move onto the next step of the form they were getting completely ignored.

The first step to check was to make sure I had a specific tab order defined using the 'tabindex' attribute, but even with tabindex on the navigation links they just didn't receive focus at all. So, after a bit more research online I discovered that there is actually an additional preference within Safari's Preferences under the Advanced tab "Press Tab to highlight each item on a webpage":


Once I had enable this then I could happily tab through all elements on the form. So if you're having problems trying to get keyboard / tabbing through all elements on a webpage in Safari then enable these options and you should be good to go.


Digital Ocean

Meta

Tags: safari,web development,web design,accessibility

Originally published on 2015-10-22 11:41:35 by Rick Curran

Last edited on 2015-10-22 11:41:35 by Rick Curran

Permalink: http://suburbia.org.uk/blog/2015/10/22/114135.html

Visitor Comments:

There are currently no Visitor Comments for this post.

Leave a comment...

Comment Preview:




Digital Ocean