Flexbox und Tab-Reihenfolge

Eine schöne Sache an den neuen CSS3-Layoutmodul Flexbox (und ebenso auch bei GridLayout) ist, dass die Anzeigereihenfolge im Layout vollkommen unabhängig ist von der Reihenfolge der Elemente im Quellcode. Das ist besonders wichtig beim Responsive Webdesign – auf diese Art kann man jeweils nach verfügbarem Platz die Elemente immer optimal anordnen. Allerdings ist das problematisch für Tastaturnutzer.

Aber von Anfang: Bei Flexbox steuert man die Reihenfolge über die Eigenschaft order. Das folgende Beispiel zeigt ein mit Flexbox realisiertes Beispiel: Ohne order stehen die Elemente in der Reihenfolge da, wie sie im Quellcode angeordnet sind. Mit order (Beispiel darunter) kann die Anordnung jedoch verändert werden:

Über order geänderte Reihenfolge bei Flexbox

Das ist natürlich ganz großartig …

Einen Nachteil hat das Ganze jedoch: Für Tastaturnutzer bleibt die ursprüngliche Quellcode-Reihenfolge erhalten – und es ist äußerst irritierend, wenn die Reihenfolge, wie man die Links anspringt, nicht der dargestellten Reihenfolge entspricht. Wenn man das Beispiel im Chrome anzeigen lässt, so wird im zweiten Fall die Links in der  Reihenfolge A – B – C – D – E – F angesprungen (von Link zu Link kann man sich über die Tab-Taste bewegen).

Im Firefox hingegen wird die Tabreihenfolge automatisch angepasst, das heißt hier erreicht man die Links beim zweiten Beispiel in der Reihenfolge wie in der Darstellung, d.h. C – D – F – A – E – B.

Das ist wohl ursprünglich ein Bug im Firefox, wird aber wohl das  zukünftige empfohlene Verhalten sein (https://lists.w3.org/Archives/Public/www-style/2014Dec/0235.html) … und leuchtet auch ein.

Das Beispiel zum Ausprobieren: flexbox_order_tab.html

 

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>