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 10

Answer 1

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

Answer 2

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

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

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 5

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 6

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