Safari忽略tabindex


74

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

当我按tab时,tabindex在Safari以外的所有浏览器中都可以正常工作,尽管Safari浏览器可以正确地将Tabindex从第一个文本框移至第二个文本框,但tabindex设置正确。关于如何预防此问题的任何想法?


如果删除第二个文本区域并切换按钮tabindexes(因此源中的顺序为1000、1002、1001),Safari是否遵循tabindex顺序?无论出于何种原因,Safari似乎都优先考虑textareas /文本输入……
Joel L

2
不,即使这样也不行。似乎在Safari中忽略了href的tabindex。我正在尝试使用按钮的解决方法,看看是否可以使用。
DLS

tabindex不是这样工作的。tabindex的唯一相关数字是-1、0和1。其余数字是反模式,可能会破坏用户的可访问性。
ChaBuku Bakke

Answers:


181

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


19
这个答案将近7年了,但仍然是正确的解决方法。我很惊讶苹果默认情况下没有启用此选项。
亚历克斯(Alex)

9
这是令人难以置信。Safari为什么要这样做?
mAadhaTTah

18
确认这在2018
。Amazing

5
@graphicdivine我知道了,您必须使用Options + Tab。如何-使用蓝牙键盘,为什么-因为这项工作需要它stackoverflow.com/questions/2292016/…–
化学家

8
2020年1月继续做
Murali

15

使Safari和Mac可访问:

在Mac上进行测试:系统偏好设置->键盘->快捷方式(标签)->完全键盘访问权限->所有控件

要使Tabbing在Safari上起作用:首选项->高级->按Tab突出显示页面上的每个项目(选中此选项)



5

我在Safari 5.1.5中尝试了以下方法。我不知道它如何与旧版本一起使用:

禁用“突出显示页面上的每个项目”(请参见graphicdivine的答案)时,可以通过按Option(alt)+选项卡使用该功能。

如果不这样做(并且该选项被禁用),则Safari默认情况下会在所有表单字段(例如输入,文本区域,选择...)之间进行制表。对于此字段,它还将接受/考虑一个tabindex。它将首先使用tabindex(按给定索引的顺序)对所有表单元素进行制表,然后按HTML中定义的顺序对其余表单元素进行制表。

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


5

如果您要编写自己的网页,我会修复一些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();
});

这不是完美的解决方案,但比告诉所有用户在System Prefs中大声更改Safari设置要好得多,哈哈。


0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.