Tastatur Zugriff auf versteckte Inhalte nur mit CSS und HTML

Wie kann ich dieses Snippet zugänglich machen?Tastatur Zugriff auf versteckte Inhalte nur mit CSS und HTML

<div tabindex="0"> 
    Show More 
    <ul> 
     <li><a href="#">Hidden Content</a></li> 
     <li><a href="#">Hidden Content</a></li> 
     <li><a href="#">Hidden Content</a></li> 
    </ul> 
</div>

CSS:

div > ul 
    {display:none;} 
div:hover > ul, div:focus > ul 
    {display:block;}

Ich frage mich, ob es möglich ist, <ul> sichtbar auch mit Tastatur-Navigation zu machen, während seine Inhalte konzentrieren

http://jsfiddle.net/pJs2U/

Quelle

2013-04-23 Anonymous

Nein, 'tabindex' Mindestwert ist' 0': Sie sprechen von '-1', was bedeutet" nicht fokussierbar ". Außerdem navigiere ich nicht weg. Ich bin immer noch im fokussierten Baum. Ich dachte '' focus' 'funktionierte wie ': hover', wo Sie': ein Element' schweben ', wie Sie '' sind: Schweben Sie auch seinen Elternbaum.': focus' ist auf Ziel und auf Ziel nur aktiviert –

Wes alle Ihre '' s brauchen 'tabindex = 0' nicht nur den Container –

nein, standardmäßig sind alle Links tabindex = 0 –

-Update 2015 (Danke @JayMee): Die aktuelle (2015.05.29) Editor’s Draft enthält nicht diese Syntax/Funktion mehr. (Der neueste Arbeitsentwurf still does, aber it’s from 2013-05-02.)

Für die Zukunft:

Im Working Draft of Selectors Level 4 gibt es einen Weg zu specify the subject eines Wähler (bzw. in the Editor’s Draft.).

Ich denke, die folgende sollte funktionieren, wenn Browser implementieren (und wenn die Syntax nicht geändert werden):

!div a:focus 
    {display:block;}

Es wählt ein div Element (man beachte die ! im Selektor), die eine fokussierte a hat Element als Kind.

For JQuery, there is a polyfill (aber es nutzt die alte Syntax, wo die ! als Suffix verwendet wurde, nicht Präfix).

Quelle

2013-04-23 23:05:26 unor

danke, interessant :) –

Dies wurde leider jetzt entfernt. http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/ –

@JayMee: Danke für das Update! Ich habe der Antwort eine Notiz hinzugefügt. – unor

eine CSS-Eigenschaft auf das Ändern <ul> Wenn ein untergeordnetes Element den Fokus hat, ist es nicht möglich, nur HTML und CSS zu verwenden.

Was Sie beschreiben, würde einen übergeordneten Selektor erfordern, aber CSS3 unterstützt keine übergeordneten Selektoren for performance reasons.

Hinweis: Sie könnten eine JavaScript-Lösung in Betracht ziehen. Die überwiegende Mehrheit der Bildschirmleser Benutzer have javascript enabled. In jQuery könnte es wie folgt aussehen:

$('a').on('focus blur', function(e) { 
    $(this).parents('ul').toggle(); 
});

Quelle

2013-04-23 17:58:09 ckundo

CSS [unterstützt es] (http://www.w3.org/TR/selectors4/#subject) (Working Draft), aber Benutzer-Agenten wahrscheinlich nicht. – unor

Danke @unor, ich habe die Antwort aktualisiert, um Level-3-Selektoren widerzuspiegeln. – ckundo

Die Javascript-Lösung ist die beste. Sie können sich nicht auf den Fokus eines übergeordneten Elements verlassen, um ein Kind anzuzeigen. Dies fällt auseinander, sobald Sie den Fokus bewegen.

Das Hinzufügen und Entfernen einer Klasse aus dem übergeordneten Element gibt Ihnen viel mehr Kontrolle. Dirk Ginader sprach davon als die fünfte Zugänglichkeitsschicht http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility

Quelle

2013-04-24 16:04:02

Tastatur Zugriff auf versteckte Inhalte nur mit CSS und HTML

Antwort

Verwandte Themen