Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

[Gunnar Bittersmann]

@@HTML_go

Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. 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 am jeweiligen Link, für die betreffende Seite bspw.:

<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 ausgewählt:

.topnav a[aria-current="page"] {
   background-color: #04AA6D;
   color: white;
}

Das <div> sollte ein <nav>-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 auswählen.

Kein Muss, aber ein Nice-to-have: Das Menü als Liste (<ul>, <li>) auszeichen.

Ebenfalls: Die aktuelle Seite nicht verlinken; stattdessen einen seiteninternen Link auf den Hauptbereich:

<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">
  ⋮

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