8

WCAG 2.0 では:focus、リンク要素でwhen:hoverを使用してキーボード ナビゲーションをサポートすることも推奨しています。これは link 要素ではうまく機能しますが、この 2 つにはいくつかの違いがあります。

  • どの要素も:hover状態を持つことができますが、フォーカスできる要素はごくわずかです
  • 要素にカーソルを合わせると、そのすべての親要素にもカーソルを合わせます。これはフォーカスの場合ではありません

この質問は、厳密には css に関するものです。:hoverキーボード ナビゲーションのために (上記のように)の動作をシミュレートする方法はありますか? それとも、それを望まない強い理由がありますか?

より明確にするために、例を次に示します。

html:

<div id="box">
    foo bar
    <a href="#">click me</a>
</div>

CSS:

#box {
    opacity: 0.3;
}
#box:hover {
    opacity: 1;
}
#box a:focus {
    opacity: 1;
}

マウスを使用するときは、使用する前にリンク要素にカーソルを合わせます。:hover状態が上向きに伝播するため、#box完全に不透明になります。

キーボードを使用するときは、使用する前に link 要素にフォーカスします。:focus状態は上方に伝播しないため、完全に不透明にはなりません。#box

4

2 に答える 2

1

これは、JavaScript でfocusin / focusoutイベントを使用して行うことができます (それらは、バブルが発生することfocusをblur除けば、似ています)。ここにフィドルがあります。

要約すると、次の関数になります。

var deepFocus = function(element, cls) {
    cls = cls || 'deep-focus';

    element
        .on('focusin', function() {
            element.addClass(cls);
        })
        .on('focusout', function() {
            var value = !!element.find(':focus').length;
            element.toggleClass(cls, value);
        });
};

更新:focus-within:ここで必要なことを正確に実行するセレクターを含むドラフト仕様があります。

于 2015-05-22T07:33:33.243 に答える
0

要素に :focus 効果を持たせるには、リンク要素やフォーム要素ではなく、tabindex 属性で使用する必要があります。各要素に配置すると、:focus 擬似要素に割り当てることができます。

あなたの例では、リンクの不透明度が変更された場合でも、不透明度が親divにとどまることを理解する必要があります。

ここで実際のサンプルを見ることができます。またはtabindexを使用するサンプル

<div tabindex="1">Touch the Div</div>
于 2013-12-24T14:29:06.343 に答える