@@Bimmelbeule > Das CSS und die Testseite funktionieren einwandfrei. Nein, das tun sie nicht. Denn: > ~~~CSS, bad > @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](https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798778#m1798778). 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*{:@en} ist. TL;DR: Hände weg von `order`! 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@Bimmelbeule > Das CSS und die Testseite funktionieren einwandfrei. Nein, das tun sie nicht. Denn: > ~~~CSS, bad > @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](https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798778#m1798778). 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*{:@en} ist. 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix