web-dev-qa-db-ja.com

Safariはtabindexを無視します

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

タブを押すと、tabindexは適切に設定されていても、最初のテキストボックスから2番目のテキストボックスにすぐに移動するSafariを除くすべてのブラウザーで正常に機能します。この問題を防ぐ方法に関するアイデアはありますか？

safariaccessibility
53
Dhana

デフォルトでは、safari（！）でタブアクセスは無効になっています。これを有効にするには、「環境設定>詳細設定>タブを押してページの各項目をハイライト表示する」をチェックします。

133
graphicdivine

SafariとMacをアクセス可能にする：

Macでのテスト：システム設定->キーボード->ショートカット（タブ）->フルキーボードアクセス->すべてのコントロール

SafariでTabbingが機能するようにするには：[設定]-> [詳細]-> [Tab]を押して、ページの各項目を強調表示します（これをチェックしてください）

9
user3862605

あなたがあなた自身のウェブページを書いているなら、少し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設定を変更するように指示するよりもはるかに優れています（笑）。

5
John Hadwin

Safari 5.1.5で以下を試しました。私はそれが古いバージョンでどのように機能するのかわかりません：

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

そうしない場合（およびオプションが無効になっている場合）、Safariはデフォルトですべてのフォームフィールド（入力、テキストエリア、選択など）をタブで移動します。このフィールドでは、tabindexも受け入れ/考慮します。まず、（指定されたインデックスの順序で）tabindexを持つすべてのフォーム要素をタブで移動し、次にHTMLでの定義の順序で残りのフォーム要素をタブで移動します。

したがって、2つのinput-elementsにtabindex = "1"（または1001）および "3"（または1003）を定義すると、Safariは最初にこのフィールドにフォーカスし、次に他のフィールドにフォーカスします。

5
Zaphoid

IOSのソリューションでは、オプションキー+ Tabキーを押します。

3
lesyk

同じ問題が発生し、タブナビゲーションをプログラムで実装する必要がありました。幸運にも、このjqueryタブ可能プラグイン 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();
    }
  });
});
0
Dan Ochiana