Safari ignoring tabindex

Question

I have 2 buttons next to a textbox and another textbox after the 2 buttons. The tabindex for the first textbox is 1000, the first button is 1001 and the second button is 1002. The second textbox has a tabindex of 1003.

When I press tab, the tabindex works fine in all browsers except for Safari, where it immediately moves from the first textbox to the second textbox although the tabindex has been set properly. Any ideas on how to prevent this issue?

Answer 1

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

Answer 2

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

Answer 3

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)

Answer 4

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.

Answer 5

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.

Answer 6

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)

Answer 7

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();
    }
  });
});