Welche Pseudoklasse benutze für meinen Link

[Gunnar Bittersmann]

@@Rolf B

<nav class="link_wechsel">
  <ul>
    <li><a href="Beispiel-1.html">Previous page</a></li>
    <li><a href="Beispiel-1.html">1</a></li>
    <li><a aria-current="page" href="Beispiel-2.html">2</a></li>
  </ul>
</nav>

Sehr fein.

Zwei Ergänzungen:

• Wenn es mehr als ein nav-Element auf der Seite gibt, bietet sich eine Überschrift an, um diese voneinander unterschiedbar zu machen und Screenreader-Nutzern die Orientierung zu erleichtern. Diese kann visuell versteckt werden.

• Die aktuelle Seite sollte nicht verlinkt sein. Entweder den Menüpunkt gar nicht verlinken (kein href-Attribut, dann aber tabindex="0", damit er trotzdem angesagt wird) oder zum Hauptinhalt verlinken:

    <nav class="link_wechsel">
      <h2 class="visually-hidden">Page navigation</h2>
      <ul>
        <li><a href="Beispiel-1.html">Previous page</a></li>
        <li><a href="Beispiel-1.html">1</a></li>
        <li><a aria-current="page" tabindex="0">2</a></li>
      </ul>
    </nav>
    <main id="main">
      ⋮
    </main>

oder

    <nav class="link_wechsel">
      <h2 class="visually-hidden">Page navigation</h2>
      <ul>
        <li><a href="Beispiel-1.html">Previous page</a></li>
        <li><a href="Beispiel-1.html">1</a></li>
        <li><a aria-current="page" href="#main">2</a></li>
      </ul>
    </nav>
    <main id="main">
      ⋮
    </main>

LLAP 🖖