Hallo HTML_go, ~~~css,bad html { line-heigt: 1.5 } ~~~ heigt statt height war bestimmt nur ein Typo im Forum, oder? Zum Skiplink: guck mal in unseren Blog: [Skipper Ahoj!](https://blog.selfhtml.org/2018/07/15/skipper-ahoj/) _Rolf_ -- sumpsi - posui - obstruxi

Hallo HTML_go, ~~~css,bad html { line-heigt: 1.5 } ~~~ heigt statt height war bestimmt nur ein Typo im Forum, oder? Zum Skiplink: Dinge, die vor Nichtassistenzverwendern versteckt sein sollen, versieht man gerne mit einer "visually-hidden" Klasse. Die sieht so aus und deckt diverse Browser-Quirks ab, die das Versteck gelegentlich verraten: ~~~css .visually-hidden { position: absolute !important; clip-path: rect(1px, 1px, 1px, 1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; } ~~~ Problem ist nur, dass Du den Link sichtbar machen willst, sobald der Fokus draufsteht (für die Tastaturbenutzer). Du musst also etliche CSS Eigenschaften wieder abschalten, um Sichtbarkeit zu bekommen: ~~~css #skip-link:focus { clip-path: unset; height: auto; width: fit-content; } ~~~ müsste eigentlich reichen. In deinem Fall vielleicht auch noch `background-color:white`, damit sich der Link vor dem Hero-Bild abhebt. Weitere Deko sei Dir überlassen 😉 Für den Fall, dass nicht der Skiplink direkt die visually-hidden Klasse bekommt, sondern er in einem visuell versteckten Elternelement steckt, müsste man in der Sichtbarkeitsregel dieses Elternelement ansprechen und :focus-within verwenden. Also etwas in dieser Art: ~~~html <div id="skip-link" class="visually hidden"> <a href="#main">Zum Hauptinhalt</a> </div> ~~~ ~~~css #skip-link:focus-within { ... } ~~~ Gründe für ein solches Konstrukt kann es viele geben. Zum Beispiel mehrere Skiplinks. Wikipedia macht was ähnliches, nur ohne Container. [Guckst Du](https://de.wikipedia.org/wiki/Selfhtml#firstHeading) - folge dem Link und drücke Tab _Rolf_ -- sumpsi - posui - obstruxi