Inclusives Design: Das „current page“-Problem

Was ist das „current page„-Problem?

Beim „current page„-Problem geht es darum, wie man Nutzer idealerweise darüber informiert, auf welcher Seite man sich in einem Webangebot befindet und wie die geöffnete Seite im Hauptmenü dargestellt und ausgezeichnet werden soll.

Current page“ mittels CSS optisch hervorheben

Die erste Pflicht ist natürlich, den aktuellen Eintrag optisch hervorzuheben, damit die große Masse der sehenden Nutzer weiß, wo sie sich aktuell befindet. Aufklappmenüs zeigen nur die erste Navigationsebene an, daher sind alle Markierungen in Untermenüs unsichtbar.

Bleiben wir zunächst bei der ersten Navigationsebene: Hier möchte ich zunächst vor Tipps warnen, die ich unter anderem auf stackoverflow.com gefunden habe. Dort wird empfohlen mittels CSS oder JavaScript Elemente hervorzuheben, die auf eine bestimmte URL verweisen. Dabei soll eine URL ermittelt werden, die mit der URL der aktuell geöffneten Seite identisch ist.  Auf den ersten Blick, scheint das sinnvoll zu sein, hat aber schwerwiegende Nachteile. Vor allem ist es nicht zuverlässig:

  1. Die aktuelle URL der Seite kann von dem Link in der Navigation abweichen
    Content Management Systeme zeigen eine Seite u.U. in einem virtuellen Pfad an, der je nach Kontext, aus dem heraus eine Seite aufgerufen wurde, unterschiedlich sein kann. So kann ein Blogeintrag sowohl thematisch als auch zeitlich einsortiert sein und außerdem noch über seine Kategorie oder Verschlagwortung unter verschiedenen Adressen erreichbar sein – jeweils mit oder ohne die Subdomain www – immer öfter auch über http oder https. Ein Problem, das Google bereits seit Jahren erkannt hat und daher die Angabe von canonical URLs auswertet. Diese dienen dazu einer Suchmaschine mitzuteilen, wie die Hauptadresse eines Artikels lautet.
  2. Der Link auf die aktuelle Seite bleibt erhalten
    Das kann Nutzer verwirren

    • Im schlimmsten Fall gehen Ihre Besucher davon aus, dass der Link defekt ist, weil ein Klick darauf offensichtlich nichts bewirkt. Die naheliegende Annahme, dass Ihre Seite „defekt“ ist, kann sich negativ auf Ihre Reputation auswirken.
    • Screenreader-Nutzer, die sich bis an diese Stelle vorgearbeitet haben, bekommen den Fokus zurück auf den Seitenanfang gesetzt, wenn sie diesem Link folgen

Geöffnete Seite für jeden erkennbar hervorheben

Link zur aktuellen Seite entfernen

Den Link zur aktuellen Seite zu entfernen, ist eine weit verbreitete Konvention. Das lässt sich auf zwei Arten erreichen:

  1. Verzicht auf das href-Attribut innerhalb des öffnenden a-Tags.
  2. Ein anderes Element wie das aussagelose span oder ein strong um die Bedeutung dieses Menüeintrages hervorzuheben.

Der simple Verzicht auf href bietet keine zusätzliche Information und span bzw. strong sind nicht einmal mit der Tastatur erreichbar. Deshalb werden sie vor einem Screenreader-Nutzer versteckt, der per Tab von Link zu Link springt.

Die Fokussierbarkeit des strong-Elementes lässt sich allerdings leicht erreichen. Es genügt, dem Element tabindex=“0“ mitzugeben.

Mit dem ARIA-Attribut aria-decribedby oder einem span lassen sich weitere Informationen für Blinde und/oder Sehende mitgeben. Vermutlich ist das nicht nötig, wenn man die Konvention einhält, auf aktuell geöffnete Seiten nicht zu verlinken. Erfahrene Blinde erkennen anhand des fehlenden Links ebenso zuverlässig wie ein Sehender, dass der angetobte Menüeintrag offenbar die geöffnete Seite repräsentiert.

Zu viele redundante Informationen können ermüden und vom wesentlichen ablenken.

Das strong-Element können Sie unabhängig vom restlichen Menü per CSS gestalten. Es wäre auch möglich, das a-Element ersatzlos zu streichen und das Eltern-li-Element mit  tabindex=“0“ fokussierbar zu machen.

Nach wie vor ist das meine präferierte Vorgehensweise.

Dennoch möchte ich auch der Kritik und Verbesserungsvorschlägen hierzu Raum geben.

Diskussionen zum „current page„-Problem

Zusammenfassung einer Diskussion im Forum von selfhtml.

Kritik an der Entfernung des href-Attributes

Marc Ermshaus ruft in Erinnerung, dass der Link auf die aktuelle Seite keineswegs „nichts“ tut. Er löst ein erneutes Laden der Seite aus, was dazu führt, dass man eventuell zwischenzeitlich durchgeführte Änderungen einer Seite wahrnehmen kann. Auf Seiten, die häufig aktualisiert werden, sicher ein Feature, das von manchen Nutzern gerne verwendet wird.

Außerdem führt Marc aus, dass durchaus viel besuchte Seiten auf die Entfernung des Links verzichten und stellt somit in Frage, ob es tatsächlich eine entsprechende Konvention gibt.

Tatsache ist, dass leider viele Entwickler best practices, Konventionen, die WCAG usw schlicht nicht beachten, ob aus Gleichgültigkeit, Unwissenheit oder Zeitdruck sei mal dahingestellt. So oder so behindert dieses Verhalten die Ausbreitung von Konventionen.

Kritik am Verzicht auf das Link-Element a

Gunnar Bittersmann verweist auf den HTML5-Standard, der die Verwendung des a-Elementes ohne href-Attribut für Inhalte vorsieht, die verlinkt werden könnten, die also als Platzhalter für eine Verlinkung dienen:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.

Vorschlag nach einer Diskussion auf heydonworks.com

Link zur aktuellen Seite durch einen anderen Link ersetzen

Heydon Pickering empfiehlt, den Link hinter dem Eintrag zur aktuellen Seite durch einen Skip-Link zum Hauptinhalt im main-Element zu ersetzen.

HTML

<nav>
 <ul>
   <li><a href="/">Startseite</a></li>
   <li><a href="/other">Andere Seite</a></li>
   <li><a href="#main">Beispielseite</a></li> /* current page */
   <li><a href="/other">Andere Seite</a></li>
   […]
   <li><a href="/other">Andere Seite</a></li>
 </ul>
</nav>

Der augenscheinliche Vorteil: der unnütze Link zur aktuellen Seite wird durch einen sinnvollen Link ersetzt und Screenreader-Nutzern wird vorgelesen: „Beispielseite, seiteninterner Link“.

Wenn Sie sich für dieses Vorgehen entscheiden, setzen Sie diese Vorgehensweise konsequent ein und verwenden Sie sie auch für das Logo, das normalerweise mit der Startseite verknüpft ist – auch hier wäre demnach der Link zur Startseite durch einen Link zum Hauptinhalt der Seite zu ersetzen, wenn die Startseite bereits geöffnet ist.

Diese Lösung ist so simpel wie elegant und bietet einen echten Mehrwert zu der gängigen Praxis (insbesondere für Nutzer von Smartphones, denen langes Scrollen erspart wird).

Der Nachteil: diese Vorgehensweise bricht mit einer Konvention. Darauf sollten Sie sehende Besucher ebenso deutlich hinweisen wie Screenreader-Nutzer (große Bildschirme können für :focus und :hover Mitteilungen ausgeben, kleine Bildschirme, die aufgrund der Touchscreens beides nicht anbieten, sollten den Hinweis ständig ausgeben.

HTML

<nav>
  <ul>
    <li>
      <a href="#main">Beispielseite
        <span>Zum Hauptinhalt dieser Seite</span>
      </a>
    </li>
    [...]
  </ul>
</nav>

CSS

@media screen and (min-width: 80em) {
  nav span {
    display: none;
  }
  nav a:focus,
  nav a:hover {
    position: relative;
  }

  nav a:focus span,
  nav a:hover span {
    display: block;
    position: absolute;
    left: 0;
    top: 100%; /* Zeigt den Hinweis direkt unterhalb des
                  fokussierten/gehoverten Links an */
  }
}

Wenn der Link zur geöffneten Seite in einem Untermenü versteckt ist

Wie zu Beginn angesprochen, zeigt eine Ausklappnavigation zunächst nur die erste Menüebene an – auf Smartphones oft nicht einmal die, weil sich das gesamte Menü hinter einem Hamburger-Icon befindet.

Dadurch werden auch der Zusammenhang, in dem sich die Seite befindet (benachbarte Seiten), und übergeordnete Strukturen unsichtbar.

Zumindest die übergeordneten Seiten lassen sich mit einer Brotkrümel-Navigation sichtbar machen.

Verwandte Seiten lassen sich über das Einblenden von Kategorien erreichbar machen. Auf haunschild.de finden Sie diese nach dem Titel und Veröffentlichungsdatum eines Artikels über dem eigentlichen Text.

So lassen sich die Informationen, die klassische Navigationen bereitgestellt haben, auch in modernen Seiten ausgeben, sogar auf kleinen Smartphone-Displays.

Eine Besonderheit von haunschild.de ist übrigens das Fehlen einer navigierbaren Hierarchie, weshalb es hier keine Breadcrumbs geben kann – Artikel sind über ihre Zuordnung zu Kategorien, über ihr Veröffentlichungsdatum und andere Eigenschaften erreichbar. Die ebenfalls vorhandene Navigation ist ein Zugeständnis an Nutzergewohnheiten, das Einhalten einer Konvention. Später vielleicht einmal mehr zum Content-Konzept von haunschild.de und wie hier Inhalte zugänglich gemacht werden.

Fazit zum current-page-Problem

tabindex=0 ist wohl nötig, die Entscheidung für strong, a oder nur ein fokussierbares li spielt für die Zugänglichkeit eine geringe Rolle. Es hängt davon ab, was man als Benutzererwartung annimmt.

Weiter ist zu überlegen, ob die Konvention, Links auf die aktuelle Seite zu entfernen, weit verbreitet genug ist, um davon ausgehen zu können, dass jedem klar ist, warum der Link entfernt wurde.

Geht man davon aus, dass viele den fehlenden Link als Fehler ansehen, muss eine Erklärung für dieses Verhalten mitgegeben werden; sei es allen zugänglich und im Design sichtbar, sei es nur für Screenreader-Nutzer mittels verborgenem Hinweis oder aria-describedby.

Ich habe das bisher nicht für nötig gehalten, allerdings hat mich Marc Ermshaus mit seinem Hinweis ins Grübeln gebracht. Er wies auf diverse große, viel besuchte Webseiten hin, die Links auf geöffnete Seiten nicht entfernen. Dieses Entwicklerverhalten bremst nicht nur die Etablierung von Konventionen, sondern lässt bekannte Konventionen u.U. sogar verschwinden. Die mangelnde Einhaltung von Konventionen scheint mir ein generelles Problem zu sein, was die Erstellung inklusive Webseiten weiter erschweren dürfte.

Abschließend bleibt also die Empfehlung, den Menüeintrag tastaturzugänglich zu machen. Darüber hinaus lassen sich Maßnahmen ergreifen, es ist aber ungewiss, wer wie stark davon profitiert – oder sich sogar gestört fühlen könnte durch einen Informations-Überfluss.

Wenn jemand hierzu Zahlen kennt oder Nutzermeinungen, würde ich mich über Kommentare freuen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.