Safariはtabindexを無視します

Question

私は2つのボタンの後にテキストボックスと別のテキストボックスの横に2つのボタンがあります。最初のテキストボックスのtabindexは1000、最初のボタンは1001、2番目のボタンは1002です。2番目のテキストボックスのtabindexは1003です。

Tabキーを押すと、TabindexはSafariを除くすべてのブラウザで正常に動作します。 tabindexが適切に設定されていても、最初のテキストボックスから2番目のテキストボックスにすぐに移動します。どのようにこの問題を防ぐためのアイデアですか？

Answer 1

デフォルトでは、Safari（！）ではタブアクセスが無効になっています。それを有効にするには、[環境設定]> [詳細設定]> [タブを押してページ上の各項目を強調表示する]をチェックします。

Answer 2

私はSafari 5.1.5で以下を試しました。

「ページの各項目を強調表示する」（graphicdivineの回答を参照）が無効になっている場合、Option（alt）+ tabを押すとその機能を使用できます。

Safariはデフォルトではすべてのフォームフィールド（入力、テキストエリア、選択...など）をタブで表示します（オプションは無効です）。このフィールドの場合は、tabindexも受け入れます。最初に、tabindex（与えられたインデックスの順に）を使ってすべてのフォーム要素をタブし、残りのフォーム要素をHTMLで定義された順にタブします。

したがって、2つの入力要素にtabindex = "1"（または1001）と "3"（または1003）を定義した場合、Safariはまずこれらのフィールドをフォーカスします。

Answer 3

作るのSafariとMacのアクセス：Macで

テスト：上で動作するタブ移動のために>すべてのコントロール

- システム環境設定 - >キーボード - >ショートカット（タブ） - >フルキーボードアクセスSafari： Preferences - > Advanced - > Tabを押してページ上の各項目をハイライト表示します（これをチェックしてください）

Answer 4

あなた自身のウェブページを作成しているなら、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の設定を変更行くためにすべてのユーザーを伝えるよりもかなり優れています。

Answer 5

同じ問題が発生し、プログラムによってタブナビゲーションを実装する必要がありました。 2番目のテキストエリアを削除し、ボタンtabindexesを切り替える場合は幸運なことに、この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(); 
    } 
    }); 
});