@@HTML_go > Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. [https://www.kontakt-vs.de/kinderarbeit.html](https://www.kontakt-vs.de/kinderarbeit.html) „Kinderarbeit“ ist aber auch ein ~~dähmlich~~ unglücklich gewählter Begriff für „Arbeit mit Kindern“. Ich denke, das solltet ihr ändern. Dabei nicht die Weiterleitungen vergessen, damit bestehende Lesezeichen von Nutzern weiterhin funktionieren. > in der gleichen (türkisgrünen) Farbe hinterlegt **bleibt**, bis der Navigationsbereich gewechselt wird. Dazu muss die aktuell gewählte Seite irgendwie gekennzeichnet sein. Am besten so, dass es auch Nutzern zugute kommt, die sie Seite nicht visuell wahrnehmen: nicht mit einer Klasse „active“, sondern mit [`aria-current="page"`-Attribut](https://tink.uk/using-the-aria-current-attribute/) am jeweiligen Link, für die betreffende Seite bspw.: ```html <nav class="topnav"> <a href="./vorstellung.html">Über uns</a> <a href="./index.html">Startseite</a> <a href="./kinderarbeit.html" aria-current="page">Arbeit mit Kindern</a> <a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a> <a href="./kontaktaufnahme.html">Kontakt</a> <a href="./impressum.html">Impressum</a> </nav> ``` Im Stylesheet dann per [Attributselektor](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/einfacher_Selektor#Attributselektor) ausgewählt: ```css .topnav a[aria-current="page"] { background-color: #04AA6D; color: white; } ``` Das `<div>`{:.language-html.bad} sollte ein `<nav>`{:.language-html.good}-Element sein, damit Screenreader-Nutzer es also solches angesagt bekommen und leicht dorthin navigieren können. Auf die Klasse könntest du verzichten und das Ding in CSS [per Elementtyp](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/einfacher_Selektor#Typ-Selektor) auswählen. Kein Muss, aber ein Nice-to-have: Das Menü als Liste (`<ul>`{:.language-html}, `<li>`{:.language-html}) auszeichen. Ebenfalls: Die aktuelle Seite nicht verlinken; stattdessen einen seiteninternen Link auf den Hauptbereich: ```html <nav class="topnav"> <a href="./vorstellung.html">Über uns</a> <a href="./index.html">Startseite</a> <a href="#main" aria-current="page">Arbeit mit Kindern</a> <a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a> <a href="./kontaktaufnahme.html">Kontakt</a> <a href="./impressum.html">Impressum</a> </nav> <main id="main"> ⋮ ``` 🖖 Живіть довго і процвітайте {:@uk} -- *Ad astra per aspera*{:@la}

@@HTML_go > Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. [https://www.kontakt-vs.de/kinderarbeit.html](https://www.kontakt-vs.de/kinderarbeit.html) „Kinderarbeit“ ist aber auch ein ~~dähmlich~~ unglücklich gewählter Begriff für „Arbeit mit Kindern“. Ich denke, das solltet ihr ändern. Dabei nicht die Weiterleitungen vergessen, damit bestehende Lesezeichen von Nutzern weiterhin funktionieren. > in der gleichen (türkisgrünen) Farbe hinterlegt **bleibt**, bis der Navigationsbereich gewechselt wird. Dazu muss die aktuell gewählte Seite irgendwie gekennzeichnet sein. Am besten so, dass es auch Nutzern zugute kommt, die sie Seite nicht visuell wahrnehmen: nicht mit einer Klasse „active“, sondern mit [`aria-current="page"`-Attribut](https://tink.uk/using-the-aria-current-attribute/) am jeweiligen Link, für die betreffende Seite bspw.: ```html <nav class="topnav"> <a href="./vorstellung.html">Über uns</a> <a href="./index.html">Startseite</a> <a href="./kinderarbeit.html" aria-current="page">Arbeit mit Kindern</a> <a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a> <a href="./kontaktaufnahme.html">Kontakt</a> <a href="./impressum.html">Impressum</a> </nav> ``` Im Stylesheet dann per [Attributselektor](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/einfacher_Selektor#Attributselektor) ausgewählt: ```css .topnav a[aria-current="page"] { background-color: #04AA6D; color: white; } ``` Das `<div>`{:.language-html.bad} sollte ein `<nav>`{:.language-html.good}-Element sein, damit Screenreader-Nutzer es also solches angesagt bekommen und leicht dorthin navigieren können. Auf die Klasse könntest du verzichten und das Ding in CSS [per Elementtyp](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/einfacher_Selektor#Typ-Selektor) auswählen. Kein Muss, aber ein Nice-to-have: Das Menü als Liste (`<ul>`{:.language-html}, `<li>`{:.language-html} auszeichen. Ebenfalls: Die aktuelle Seite nicht verlinken; stattdessen einen seiteninternen Link auf den Hauptbereich: ```html <nav class="topnav"> <a href="./vorstellung.html">Über uns</a> <a href="./index.html">Startseite</a> <a href="#main" aria-current="page">Arbeit mit Kindern</a> <a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a> <a href="./kontaktaufnahme.html">Kontakt</a> <a href="./impressum.html">Impressum</a> </nav> <main id="main"> ⋮ ``` 🖖 Живіть довго і процвітайте {:@uk} -- *Ad astra per aspera*{:@la}