Safari索引

我有两个按钮旁边的一个文本框和另一个文本框后的两个按钮。第一个文本框的tabindex为1000，第一个按钮为1001，第二个按钮为1002。第二个文本框的tabindex为1003

---

当我按tab键时，tabindex在除Safari之外的所有浏览器中都能正常工作，在Safari中，它会立即从第一个文本框移动到第二个文本框，尽管tabindex设置正确。有没有关于如何防止此问题的想法？

默认情况下，safari（！）中禁用了选项卡访问。要启用它，请选中“首选项>高级>按tab键以突出显示页面上的每个项目”。

我使用Safari 5.1.5尝试了以下操作。我不知道它如何与旧版本兼容：

当“突出显示页面上的每个项目”（参见GraphicsDive的答案）被禁用时，您可以通过按Option（alt）+tab使用该功能

如果您不这样做（并且该选项已禁用），Safari将默认通过所有表单字段（如输入、文本区域、选择…）创建选项卡。对于此字段，它还将接受/视为tabindex。它将首先使用tabindex（按照给定索引的顺序）对所有表单元素进行tab，然后按照HTML中定义的顺序对其余表单元素进行tab

---

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

使Safari和Mac可访问：

在Mac上测试： 系统首选项->键盘->快捷键（选项卡）->完全键盘访问->所有控件

要在Safari上使用选项卡，请执行以下操作：

---

首选项->高级->按tab键高亮显示页面上的每个项目（选中此项）

如果您正在编写自己的网页，我将修复使用jquery/javascript编写内容的问题。这是我用在我身上的

缺点是您会阻止页面上的默认tab键行为，在某些情况下，这可能是更大的可访问性问题。但我对此表示怀疑

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

---

这不是一个完美的解决方案，但它比告诉所有用户在System Prefs，lol中更改他们的Safari设置要好得多。

遇到了同样的问题，必须通过编程实现选项卡导航。幸运的是，找到了这个jquery选项卡插件并将其很好地使用，下面是

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

---

iOS的解决方案将是按住Option键+Tab键。

对于像我这样也在browserstack中查看如何启用此功能的人：只需单击屏幕左上角按钮中的“Safari”一词，然后您可以选择Preferences>Advanced>Press Tab（如中所述）

如果删除第二个文本区域并切换按钮tabindexes（因此源中的顺序是100010021001），Safari是否遵循tabindex顺序？看起来Safari为文本区域/文本输入提供了更高的优先级，无论出于何种原因……不，即使这样也不起作用。似乎在Safari中，href上的tabindex被忽略了。我正在尝试使用按钮来解决这一问题，以查看其是否起作用。tabindex不是这样工作的。tabind的唯一相关数字是ex是-1、0和1。其余的都是反模式，可能会破坏用户的可访问性。这个答案已经有将近7年的历史了，但它仍然是正确的修复方法。我很惊讶苹果在默认情况下没有启用此选项。这令人难以置信。Safari为什么要这样做？在2018年确认这仍然是正确的。Amazing@graphicdivine我知道了，你没有o使用选项+选项卡。如何-使用蓝牙键盘，为什么-因为工作需要它继续