Verwendung: Fokus als a: Hover-Ersatz für Tastaturnavigation

Question

WCAG 2.0 empfiehlt, auch :focus zu verwenden, wenn :hover für Linkelemente verwendet wird, um die Tastaturnavigation zu unterstützen. Dies funktioniert gut für Link-Elemente, aber es gibt ein paar Unterschiede zwischen den beiden.

• jedes Element den :hover Zustand haben kann, während nur sehr wenige
• fokussiert werden, wenn über ein Element schweben, schweben Sie auch alle übergeordneten Elemente auf. Dies ist nicht der Fall mit Fokus

Diese Frage ist ausschließlich über CSS. Gibt es eine Möglichkeit, das Verhalten von :hover (wie oben beschrieben) für die Tastaturnavigation zu simulieren? Oder gibt es starke Gründe, warum man das nicht möchte?

es klar, hier ist ein Beispiel:

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; 
} 

Wenn eine Maus ich über das Verbindungselement schweben wird es vor der Verwendung . Da sich der :hover-Status nach oben ausbreitet, ist #box vollständig undurchsichtig.

Bei Verwendung einer Tastatur werde ich das Link-Element vor der Verwendung fokussieren. Da der :focus Zustand nicht propagiert nach oben #box wird nicht vollständig undurchsichtig sein.

Answer 1

Dies kann mit focusin/focusout Ereignisse in JavaScript getan werden (sie sind genauso wie focus und blur außer sie Blase). Here ist eine Geige.

Es läuft darauf hinaus, diese Funktion nach unten:

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); 
     }); 
}; 

aktualisieren: Es gibt einen Entwurf spec, der die :focus-within Selektor enthält, die genau tun würde, was hier gefordert wird.

Answer 2

Um zu machen: Fokus-Effekt auf Elemente nicht verknüpfen und Formularelemente müssen Sie in Tabindex-Attribute verwenden. Wenn Sie es auf jedes Element setzen, können Sie ihm das Element: focus pesudo zuweisen.

In Ihrem Beispiel müssen Sie verstehen, dass die Deckkraft auch dann im übergeordneten div bleibt, wenn sich die Deckkraft ändert.

können Sie Arbeitsprobe here sehen. oder Probe verwenden tabindex

<div tabindex="1">Touch the Div</div>