Antwort an „Gunnar Bittersmann“ verfassen

@@Bimmelbeule

Das CSS und die Testseite funktionieren einwandfrei.

Nein, das tun sie nicht. Denn:

@media (min-width: 50em) {
  nav {
    order: -1;
}

Das rückt die Navigation visuell an den Anfang. Bei Bedienung mit Tastatur kommt man aber an die Links nicht ran; die kommen erst unerwartet ganz am Ende.

Die visuelle Reihenfolge sollte der Reihenfolge im DOM entsprechen; andernfalls dürften sehende Tastaturnutzer und sehende Screenreader-Nutzer ziemlich verwirrt sein.

Hatten wir doch gerade erst.

Wenn du die Navigation auf verschiedenen Viewports wirklich an verschiedenen Stellen haben willst, dann musst du sie auch an verschiedenen Stellen im DOM haben. Das heißt: doppelt im DOM, wobei jeweils nur eine angezeigt wird und die andere auf display: none gesetzt ist – und damit auch nicht mehr im accessibility tree ist.

TL;DR: Hände weg von order!

🖖 Живіть довго і процвітайте

--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen