safari忽略tabindex

默认情况下,在Safari中禁用选项卡访问(!)。若要启用它,请选中“首选项”>“高级”>“按Tab键突出显示页面上的每个项目”。

使Safari和Mac变得容易访问:

在Mac上测试: 系统首选项->键盘->快捷方式(选项卡)->完全键盘访问->所有控件

对于在Safari上工作的Tabbing: 首选项->高级->按Tab键突出显示页面上的每个项目(选中此项)

我在Safari5.1.5中尝试了以下操作。我不知道它在旧版本中是如何工作的:

禁用“突出显示页面上的每个项目”(请参见GraphicDivine的回答)时,可以通过按Option(Alt)+Tab键使用该功能。

如果没有(并且该选项被禁用),Safari将默认地在所有表单字段(如输入、文本区域、选择…)中使用Tab键。对于此字段,它还将接受/考虑tabindex。它首先使用tabindex(按给定索引的顺序)对所有表单元素进行制表,然后按html中定义的顺序对其余表单元素进行制表。

因此,如果为两个输入元素定义tabindex=“1”(或1001)和“3”(或1003),Safari将首先关注此字段,然后关注其他字段。

如果你在写自己的网页,我会用jquery/javascript来修改。这是我用在我身上的。

缺点是阻止了页面上的默认制表键行为,这在某些情况下对可访问性可能是一个更大的问题。但我怀疑。

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

这不是一个完美的解决方案,但它比告诉所有用户去更改系统首选项中的Safari设置要好得多,哈哈。

ios的解决方案是按住option键+tab键。

遇到同样的问题,必须以编程方式实现选项卡导航。幸运的是找到了这个jquery tabbable插件 https://github.com/marklagendijk/jQuery.tabbable 好好利用它

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