Widget Paginierung

HTML-Aufbau

• <nav aria-label="..."> : Wrapper dieses Widgets. nav-Elemente werden von Screenreadern als Navigationselemente besonders hervorgehoben.
  • Attribut aria-label: Aussagekräftiger und im Seitenkontext eindeutiger Titel. Wird von Screenreadern zur Beschreibung dieses Navigationselementes verwendet.
  • <ul class="gs_pagebrowser ..."> : Wrapper für Paginierungselemente.
    • <li class="list-group-item"> : ein Paginierungselement. Es gibt folgende Typen von Paginierungselementen:
      • Vorherige Seite (nur anzuzeigen, wenn aktuelle Seite nicht die erste Seite ist): <a aria-label="Vorherige Seite (29)" title="Vorherige Seite (29)" rel="prev" href="..."> <i class="bi bi-caret-left-fill"></i> </a>
        • Attribut aria-label="Vorherige Seite (29)" : kommuniziert Screenreader-Benutzern, dass dieser Link zur vorherigen Paginierungsseite führt, inklusive absoluter Seitenzahl.
        • Attribut title="Vorherige Seite (29)" : erklärt Benutzern beim Hovern, dass dieser Link zur vorherigen Paginierungsseite führt, inklusive absoluter Seitenzahl. Dieser Titel erfüllt erklärende Funktion zusätzlich zum Piktogramm.
        • Attribut rel="prev" : semantische Auszeichnung, dass dieser Link auf die vorherige Seite zeigt. Kann Vorteile bei der Verarbeitung durch Webcrawler und Screenreader bringen (prev bei MDN).
        • <i class="bi bi-caret-left-fill"></i> : konventionelles "Zurückblättern"-Piktogramm Caret nach links.
      • Erste Seite (immer anzuzeigen, um direkte Navigation zum Anfang/Ausgangspunkt der Paginierung zu ermöglichen): <a aria-label="Seite 1" title="Seite 1" href="/development/pagination">1</a>
        • Attribute aria-label="Seite 1" und title="Seite 1" : Das Ausschreiben des Labels und Titels mit expliztem "Seite 1" unterstützt Screenreader-Benutzer beim Verständnis der Funktion dieses Links, bspw. bei Auflistungen aller Links der Webseite. Ein bloßes 1 in einer langen Liste von Links würde nicht kommunizieren, dass es sich um einen Link zu Paginierungsseite handelt.
      • Auslassungselement <li class="list-group-item"> <span>…</span> </li> : bei vielen Paginierungsseiten können Auslassungselemente zwischen der ersten und dem aktuellen Seitenbereich sowie zwischen dem aktuellen Seitenbereich und der letzten Seite angezeigt werden. Diese Auslassungslemente können die Seitenbenutzung erheblich verbessern, da so das Paginierungs-Widget eine erwartbare maximale Größe hat. Außerdem verhindert dies eine Tabbing-Durststrecke für Tastaturbenutzer (Barrierefreiheit).
      • Seiten unmittelbar vor der aktuellen Seite.
      • Aktuelle Seite (immer anzuzeigen. Eine (Selbst-)Verlinkung der aktuellen Seite bietet Benutzern u.a. die Vorteile, diese Seite durch Folgen dieses Links neuzuladen sowie ihre URL auch über diese Verlinkung zu kopieren): <a aria-current="page" aria-label="Seite 30" class="gs_active" title="Seite 30" href="...">30</a>
        • Attribut aria-current="page" : ermöglicht Screenreadern, an Benutzer zu kommunizieren, dass dieser Link auf die aktuelle Seite zeigt. Außerdem wird durch dieses Attribut der Link farblich hervorgehoben.
      • Seiten unmittelbar nach der aktuellen Seite.
      • Letzte Seite (immer anzuzeigen, um direkte Navigation zum Ende der Paginierung zu ermöglichen): <a aria-label="Seite 326 (letzte Seite)" title="Seite 326 (letzte Seite)" href="...">326</a>
        • Attribute aria-label="Seite 326 (letzte Seite)" title="Seite 326 (letzte Seite)" : Das Ausschreiben des Labels und Titels mit expliztem "Seite 326 (letzte Seite)" unterstützt Screenreader-Benutzer beim Verständnis der Funktion dieses Links, bspw. bei Auflistungen aller Links der Webseite. Ein bloßes 326 in einer langen Liste von Links würde nicht kommunizieren, dass es sich um einen Link zu einer Paginierungsseite handelt. Außerdem kommuniziert die Betitelung "(letzte Seite)" den Umfang der Paginierung.
      • Nächste Seite (nur anzuzeigen, wenn aktuelle Seite nicht die letzte Seite ist): <a aria-label="Nächste Seite (5)" title="Nächste Seite (5)" rel="next" href="..."> <i class="bi bi-caret-right-fill"></i> </a>
        • Attribut aria-label="Nächste Seite (5)" : kommuniziert Screenreader-Benutzern, dass dieser Link zur nächsten Paginierungsseite führt, inklusive absoluter Seitenzahl.
        • Attribut title="Nächste Seite (5)" : erklärt Benutzern beim Hovern, dass dieser Link zur nächsten Paginierungsseite führt, inklusive absoluter Seitenzahl. Dieser Titel erfüllt erklärende Funktion zusätzlich zum Piktogramm.
        • Attribut rel="next" : semantische Auszeichnung, dass dieser Link auf die nächste Seite zeigt. Kann Vorteile bei der Verarbeitung durch Webcrawler und Screenreader bringen (next bei MDN).
        • <i class="bi bi-caret-right-fill"></i> : konventionelles "Weiterblättern"-Piktogramm Caret nach rechts.