tabindexまたはキーボードのナビゲーションのためのフォーカス

私は現時点でアクセシビリティとWCAGで多くの作業を行っていますが、私はすべてのユーザー、特にキーボードナビゲーションを使用しているユーザーにとってうまくいくように努力しています。。tabindexまたはキーボードのナビゲーションのためのフォーカス

これは簡単なことですが、ページ上部のアンカーへのリンクをスローし、人々はナビゲーションやその他の大部分重要でないコンテンツをスキップすることができます。

キーボードを使用してアンカーリンクをクリックしてから 'tab'キーをもう一度押すと、次のページではなく 'コンテンツにスキップ'リンクの直後に要素が表示されるという問題があります主コンテンツ領域の要素。つまり、リンク先のアンカーにはフォーカスがありません。

これは一般的な問題です。なぜなら、これが正しく機能する「コンテンツにスキップ」リンクを持つサイトをまだ見つけていないからです。 Vision Australiaサイトであってもこの問題があります。

私は、誰かがこの作業をすべき技術/ハック/ライブラリを知っていることを期待していました。

EDIT：この問題はChromeとSafariでは発生するが、MacではFirefoxでは発生しないことが確認できます。

出典

2012-10-24 Christian

これは、実際にはChrome/WebKitの問題ですWindows上のIEとFireFoxでは実際にうまく動作します。問題は実際にブラウザのバグを回避する方法です.HTML自体は実際には仕様ごとに問題ありません。 – BrendanMcK

ほとんどのブラウザは、同じページのリンクのターゲットまで視覚的にスクロールしますが、実際にはそのリンクにキーボードフォーカスを置かないでください。あなたは、ターゲットにフォーカスを得た（以下の例のように、またはjQueryの、）JavaScriptを使用することができます。

$("a[href^='#']").not("a[href]='#'").click(function() { 
    $("#"+$(this).attr("href").slice(1)+"").focus(); 
});

しかし、そのようなChromeとSafariなどのWebKitブラウザで働いてからも、このソリューションを防ぐのWebKitのバグがあります。私は約一年前にこの上でブログ記事を書いた、といくつかの他の人がそれに基づいて構築されている：

出典

2012-10-25 03:17:11

IEとFirefoxは必ずしもターゲット要素をフォーカスしているわけではありませんが（hrefのないプレーンAは最初にフォーカスを得ることは想定されていません）、Tabキーの* next *ターゲットの後にある次のtabbable項目にフォーカスを移動します。これはIEの初期のバージョンからの長年にわたる動作です。 Chrome/WebKitはスクロールするだけで、ターゲットの位置ではなく元のリンクからタブ移動が続く点で注目に値します。 – BrendanMcK

素晴らしい投稿、Terril。私は、名前付きアンカーではなくIDにリンクするという概念が好きです。ブラウザの欠点にもかかわらず、メイン画面の読者が正しくなっていれば、それはそれがより良いものになると思います（しかし、まだ完全ではありません）。 – Christian

tabindexまたはキーボードのナビゲーションのためのフォーカス

答えて

関連する問題