Safari 忽略 tabindex

By default tab-access is disabled in safari(!). To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".

I tried the following with Safari 5.1.5. I don't know how it works with older versions:

When "highlighting each item on a page" (see answer by graphicdivine) is disabled, you can use that function by pressing Option(alt) + tab.

If you don't (and the option is disabled), Safari will by default tab through all form-fields (like input, textarea, select...). For this fields, it will also accept/regard a tabindex. It will first tab through all form elements with a tabindex (in the order of the given indices) and then through the rest of the form elements in the order of their definition in HTML.

So if you define a tabindex="1" (or 1001) and "3" (or 1003) for two input-elements Safari will first focus this fields and then the others.

Making Safari and a Mac accessible:

Testing on a Mac: System Preferences -> Keyboard -> ShortCuts (tab) -> Full Keyboard Access -> All Controls

For Tabbing to work on Safari: Preferences -> Advanced -> Press tab to highlight each item on a page (check this)

If you're writing your own webpage, I'd fix write something with a bit of jquery/javascript. This is what I've used on mine.

The drawback is that you prevent the default tab-key behavior on the page, which may be a bigger problem for accessibility in some situations. But I doubt it.

var Tab = {};
Tab.i = 1,
Tab.items = 0;


function fixTabulation () {
/* This can be used to auto-assign tab-indexes, or
#  commented out if it manual tab-indexes have
#  already been assigned.
*/
$('input, select, textarea').each(function(){
$(this).attr('tabindex', Tab.i);
Tab.i++;
Tab.items++;
});


Tab.i = 0;


/* We need to listen for any forward or backward Tab
#  key event tell the page where to focus next.
*/
$(document).on({
'keydown' : function(e) {
if (navigator.appVersion.match("Safari")) {
if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
e.preventDefault();
Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
e.preventDefault();
Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
}
}
});


/* We need to update Tab.i if someone clicks into
#  a different part of the form.  This allows us
#  to keep tabbing from the newly clicked input
*/
$('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
Tab.i = $(this).attr('tabindex');
console.log(Tab.i);
});
}


$(document).ready(function() {
fixTabulation();
});

This is no perfect solution, but it's quite better than telling all your users to go change their Safari settings in System Prefs, lol.

Encountered the same issue and had to implement tab navigation programatically. Luckily found this jquery tabbable plugin https://github.com/marklagendijk/jQuery.tabbable and put it to good use, here's

require('../../node_modules/jquery.tabbable/jquery.tabbable');
$(document).ready(() => {
$(document).keydown((event) => {
if (event.keyCode === 9) {
window.$.tabNext();
event.preventDefault();
}
});
});

Solution for iOS will be holding Option Key + Tab key.

For those like me also looking how to enable this in browserstack: simply click the word "Safari" in the top left button of the screen, then you can select Preferences > Advanced > Press tab (as mentioned in https://stackoverflow.com/a/1914496/11339541)