9.3.4 Machen Sie Paging Links auch strukturell eindeutig und ohne Kontext verständlich

Hintergrund

Die Pagination wird in vielen Websites in Form einer Aneinanderreihung von Seitenzahlen angeboten (z. B. 1 2 3 4 5 6 7). Für sich gesehen ist ein Link “3” nicht sinnvoll, im optischen Kontext zu den benachbarten Links allerdings schon.

Blinde NutzerInnen können den optischen Kontext nicht herstellen, sie lassen sich oft eine Liste aller Links auf der Seite anzeigen oder springen (tabben) von Link zu Link. Für sie wäre eine vorangestellte Beschriftung „Ergebnisseiten“ oder ein erweiterter Linktext “Seite 3” sinnvoller.

Die erweiterten Linktexte können optisch versteckt werden (ev. als TITLE-Attribut des Links oder außerhalb des Viewports positioniert), um für sehende NutzerInnen die Übersichtlichkeit nicht zu stören. Ein TITLE Element bei jedem Paging-Link ist jedoch in der Regel nicht notwendig. Bei Zoom-Ansicht stört der Tooltipp sogar. Bei guter semantischer Strukturierung ist für blinde NutzerInnen der Kontext gegeben, wenn es eine vorangestellte Beschriftung gibt.

Maßnahmen

  • Strukturieren Sie die Pagination logisch in Listen oder in einem Absatz durch Beistriche. Die Listendarstellung ist vorzuziehen, weil die Anzahl der Listenpunkte ausgelesen wird, also schnellere Orientierung möglich ist.
  • Bieten Sie für blinde BenutzerInnen Links an, die für sich selbst stehend oder zumindest im Kontext des gesamten Absatzes oder der Liste verständlich sind.
  • Verstecken Sie die ergänzende Texte, um BenutzerInnen ohne Seheinschränkung nicht zu beeinträchtigen, verwenden Sie TITLE Attribute überlegt.
  • Mögliche Umsetzungsbeispiele:
    • Umsetzungsbeispiel 1: mit versteckten Zusatztexten
      <a href=“…“><span class=”hidden”>zur </span>1<span class=”hidden”>. Seite von 7</span></a>
      Liest: “zur 1. Seite von 7”, zeigt: “1”
    • Umsetzungsbeispiel 2: mit Titel
      <a href=“…“ title=“Zur Seite 3″>3</a>

Wer profitiert davon?

  • Blinde NutzerInnen und Screenreader NutzerInnen, die den optischen Kontext zwischen den Paging Links nicht herstellen können.

Beispiel

Hausfreund Paging mit Titel

hausfreund.at: Die Paging Links bei Hausfreund sind zwar optisch nicht optimal gestaltet, bieten aber für Screenreader einen zusätzlichen Titel („zur Seite 2“) an, der den Link auch außerhalb des Kontexts verständlicher macht.Bei einer großen Anzahl von Produkten bei Hausfreund ist es mühsam, einen Markennamen zu finden, der weiter hinten im Alphabet gereiht ist. Man kann auch nicht wählen, wieviele Produkte man auf einer Seite angezeigt haben möchte.