Navigations-Tutorial im SELF-Wiki

[Auge]

Hallo

So sieht meine index.html nun aus:

<nav>
   <ul>
     <li><a aria-current="page">Startseite</a></li>
     <li><a href="./vorstellung.html">Über uns</a></li>
     <li><a href="./kinder.html">Arbeit mit Kindern</a></li>
     <li><a href="./jugend.html">Arbeit mit Jugendlichen</a></li>
     <li><a href="./kontaktaufnahme.html">Kontakt</a></li>
     <li><a href="./impressum.html">Impressum</a></li>
   </ul>
</nav>

Besser, aber weiterhin verbesserungsfähig. Schaue dir bitte Rolfs Codevorschlag an. Er lässt dem <nav> einen Container <main> folgen, der den eigentlichen Inhalt der Seite umfasst. Dieser hat zudem eine ID, die man in der Navigation dem Link zur gegenwärtig gelandenen Seite als Linkziel zuweisen kann. Damit hat dieser Link ein Linkziel und verschwindet bei der Tastaturbedienung somit nicht aus der Linkliste der Navigation ^[1].

Für den Navigationsblock hat Gunnar auch gleich ein vollständiges Codebeispiel geliefert (ganz unten in seinem Posting). Das entspricht im Wesentlichen dem entsprechenden Abschnitt in Rolfs Beispielcode, außer, dass das Attribut aria-current="page" korrekterweise dem Link selbst verpasst wurde, anstatt, wie bei Rolf, dem Container des Links (dem li).

Hier noch einmal Gunnars letztgültiger Codevorschlag.

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

Im CSS selektierst du den Link zur aktuell geladenen Seite dann mit Gunnars CSS-Code.

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

Ich würde vermuten, dass als Selektor auch nav a[aria-current="page"] reichen dürfte, denn mehr als ein nav-Block ist recht unüblich (auch wenn das dennoch möglich ist).

[edit]:

Ich bin richtig erkältet und schlafe unter Tags viel.

Gute Besserung.

Tschö, Auge

---

1. Aus einem von Gunnars Beiträgen: „Wenn es kein interaktives Element ist, taucht die aktuelle Seite nicht in der Tab-Reihenfolge auf. Das könnte Nutzer verwirren, dass sich das Hauptmenü von Seite zu Seite ändert. …“ ↩︎