Safari ignoring tabindex

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

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)

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

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.

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.