Safari 忽略 tabindex

Question

我在一个文本框旁边有 2 个按钮，在这 2 个按钮后面还有另一个文本框。第一个文本框的 tabindex 为 1000，第一个按钮为 1001，第二个按钮为 1002。第二个文本框的 tabindex 为 1003。

当我按 Tab 时，tabindex 在除 Safari 之外的所有浏览器中都可以正常工作，尽管 tabindex 已正确设置，但它会立即从第一个文本框移动到第二个文本框。关于如何防止这个问题有什么想法吗？

Answer 1

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

Answer 2

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

Answer 3

使 Safari 和 Mac 易于访问：

在 Mac 上测试： 系统偏好设置 -> 键盘 -> 快捷方式（选项卡） -> 全键盘访问 -> 所有控件

要在 Safari 上使用 Tab 键操作： 首选项 -> 高级 -> 按 Tab 键突出显示页面上的每个项目（选中此项）

Answer 4

如果您正在编写自己的网页，我会用一些 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();
});

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

Answer 5

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

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

如果您不这样做（并且该选项被禁用），Safari 将默认按 Tab 键浏览所有表单字段（如输入、文本区域、选择...）。对于此字段，它还将接受/考虑 tabindex。它将首先使用 tabindex（按照给定索引的顺序）浏览所有表单元素，然后按照 HTML 中定义的顺序浏览其余表单元素。

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

Answer 6

对于那些像我一样也在浏览器堆栈中启用此功能的人：只需单击屏幕左上角按钮中的“Safari”一词，然后您可以选择“首选项”>“高级”>“按下选项卡”（如https://stackoverflow中所述） .com/a/1914496/11339541）

Answer 7

遇到同样的问题，必须以编程方式实现选项卡导航。幸运的是找到了这个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();
    }
  });
});

Answer 8

2024 年更新 - Safari 版本 17.4.1

Safari 现在尊重

tabindex

HTML 属性。 Safari 对于没有

tabindex

的元素的默认行为没有改变，但您现在可以使用

<button>

 使 

<button tabindex="0">

元素可选项卡化