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.

Im Fazit am Ende dieser Seite gebe ich zusammenfassende Empfehlungen. Bitte lesen Sie dennoch den gesamten Text, da er die Vor- und Nachteile der verschiedenen Methoden erläutert. Es gibt leider keine Methode, die immer optimal ist.

„Current page“ hervorheben

Die erste Pflicht ist natürlich, den aktuellen Navigations-Eintrag hervorzuheben. So weiß der Besucher, wo er sich gerade befindet. Bedenken Sie, dass nicht jeder eine Webseite anschaut. Man kann sich Webseiten vorlesen lassen. Daher muss der aktuelle Eintrag auch in der Sprachausgabe markiert werden.

Grundsätzlich gibt es zwei Ansätze, mit dem Menüeintrag zur aktuellen Seite umzugehen:

1. Der Link wird entfernt
2. Der Link bleibt bestehen

Wieso kann es sinnvoll sein, den Link zu entfernen?

Es kann ein Problem sein, wenn der Link auf die aktuelle Seite erhalten bleibt:

• 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

Vielen Entwicklern stößt der Link sauer auf. Sie vertreten die Meinung, eine bereits geöffnete Seite nochmals zu verlinken macht keinen Sinn. Der Nutzer wird dazu gezwungen, eine Entscheidung zu treffen (klicken oder nicht), was nutzerunfreundlich ist. Deswegen reden beispielsweise erfahrene Web-Vetranen wie Thomas „toscho“ Scholz oder Fritz Weißhart vom Deppenlink.

Wieso kann es sinnvoll sein, den Link beizubehalten?

• Viele Mausnutzer schätzen die Möglichkeit, durch einen Klick auf den Link zur aktuellen Seite, diese Seite neu laden zu können. Das macht insbesondere auf Seiten Sinn, in die häufig neue Inhalte eingestellt werden. Das können Nachrichtenportale, soziale Netzwerke aber auch Foren oder Blogbeiträge sein, in denen eine lebendige Diskussion läuft.
• Gerade die großen Nachrichtenportale gehören zu den bekanntesten und meistbesuchte Webseiten. Hier macht die Beibehaltung des Links Sinn. Durch den häufigen Besuch solcher Seiten lernen Nutzer, dass auch die aktuelle Seite verlinkt ist. Auf die aktuelle Seite nicht zu verlinken, widerspricht also der Surferfahrung vieler Nutzer.

In den Diskussionen zu diesem Thema finden sich dementsprechend auch zahlreiche Verteidiger des Links.

Marc Ermshaus nutzt die Möglichkeit, mit dem Link eine Seite neu zu laden. Auch gibt er Beispiele für viel besuchte Seiten, die den Link beibehalten und dadurch dem Nutzer den Eindruck vermitteln, dass dieses Verhalten „das richtige“ ist.

Kerstin Probiesch bekräftigt die Ansicht von Marc und fügt hinzu, dass es eher Konvention sei, den Link auf die aktuelle Seite nicht zu entfernen. Das vereinfacht auch die Handhabung. Für die Sprachausgabe reicht ein kurzer Text wie „Sie befinden sich hier“, dann wissen auch Hörende, wo sie sich aufhalten. Kerstin hebt außerdem die Robustheit dieser Methode hervor.

Technische Umsetzung

Entfernung des Links

Die Entfernung des Links lässt sich auf drei 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.
3. Das a-Element komplett und ersatzlos entfernen

Entfernung des href-Attributes

Ein Verfechter dieser Methode ist der geschätzte Kollege Gunnar Bittersmann. Er 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.

Sprachausgabe und Tastatureingabe berücksichtigen!

Stellen Sie die Tastatur-Erreichbarkeit des Menüeintrages mittels tabindex=“0“ sicher und fügen Sie einen Text hinzu, der vorgelesen werden kann. Im Beispiel eine einfache Methode, die in jedem Browser funktioniert. Weitere stelle ich in einem eigenen Artikel zur Sprachausgabe vor.

HTML

   <li><a tabindex="0"><span class="visuallyhidden">Sie sind hier: </span>Beispielseite</a></li>

Das Link-Element mittels strong ersetzen

Die folgende Methode habe ich bisher bevorzugt. Dabei wird der Menüeintrag mit dem Namen der aktuell geöffneten Seite als wichtig hervorgehoben. Ein Vorgehen das auch Suchmaschinen gefallen dürfte.

HTML

<li><strong tabindex="0"><span class="visuallyhidden">Sie sind hier: </span>Beispielseite</strong></li>

Selbstverständlich wird auch Text direkt im Listenpunkt vorgelesen. Auch hierbei muss auf die Zugänglichkeit per Tastatur geachtet werden. Diese schlankeste Methode würde ich einsetzen, wenn ich auf die Markierung als „wichtiger Text“ verzichten wollte. Der Sinn eines leeren Links ohne Verweis wie von der Spezifikation vorgesehen, erschließt sich mir nicht. Ich fürchte dahinter steckt nur die Übernahme einer häufigen Praxis, deren Beliebtheit nicht in schlauen Überlegungen zu finden ist. Vielmehr ist diese Methode besonders bequem für Entwickler. Bequemlichkeit ist jedoch kein guter Ratgeber auf der Suche nach der besten Lösung (auch wenn barrierefreie Lösungen oft erstaunlich simpel sind).

Also: wenn schon keine besondere Gewichtung auf die aktuelle Seite gelegt werden soll, benötigt man auch kein spezielles Element zur Auszeichnung des Menüeintrages.

HTML

<li tabindex="0"><span class="visuallyhidden">Sie sind hier: </span>Beispielseite</li>

Wenn der Link bleiben soll

Wenn der Link bleiben soll, ist eine deutliche Hervorhebung besonders wichtig, damit der Link einerseits nicht versehentlich geklickt wird und andererseits bei Bedarf schnell gefunden werden kann.

Oft reicht es Vordergrundfarbe und Hintergrundfarbe zu tauschen und die Schrift fett zu setzen. Beliebig viele Änderungen sind natürlich machbar. Hier entscheidet vor allem der Geschmack und der Design-Kontext. Hauptsache die Hervorhebung erfüllt die üblichen Voraussetzungen wie Mehrfachkennzeichnung, ausreichend Kontrast usw…

Die Unterstützung von Blinden erfordert wie so oft nochmals deutlich weniger Aufwand. Die oben genutzte Markierung mittels Text genügt.

Mit aria-current steht ein HTML-Attribut zur Verfügung, das es erlaubt, ein Element aus einer Reihe von Elementen als das aktuelle zu kennzeichnen. Das lässt sich auf einen Tag in einem Kalender ebenso anwenden, wie auf einen Listeneintrag. Ich würde aber das Attribut direkt in den Link schreiben und nicht in das li – schließlich springt ein Blinder im Menü in der Regel nicht von Listeneintrag zu Listeneintrag, sondern von Link zu Link, so dass ein Menü den Blinden als eine Reihe von Links erscheint, in der der aktuelle zu kennzeichnen ist. Das HTML ist entsprechend simpel.

HTML

<a href="foo.html" aria-current="page">foo</a>

Die Spezifikation gibt vor, dass jeder Wert ungleich true von Screenreadern ausgegeben werden wird. Das Beispiel würde also wie folgt vorgelesen: „foo aktuelle Seite Link“

Mehr zu aria-current von Leonie Watson hier (englisch)

Als Bonbon bekommt man dadurch eine Möglichkeit, den Link zu gestalten, ohne eine Klasse „current“ o.ä. zu benötigen. Der folgende Code tut es auch:

CSS

nav [aria-current] {
  [...]
}

Wenn gewünscht, ließe sich der Wert des Aria-Attributes sogar noch anderweitig verwenden, z.B. als Tooltipp für Mausnutzer.

nav [aria-current]:hover::before {
  content:" Sie befinden sich hier";
  [...]
}

Bei Tests auf Barrierefreiheit wird das CSS nicht ausgeschaltet, aber es ist natürlich von Vorteil, wenn die Seite auch ohne CSS funktioniert. Für Screenrader tut sie es aufgrund des ARIA-current-Attributes, Sehenden würde das hier nicht helfen. Auch das ist ein Grund für die zusätzliche Verwendung von strong.

Die Gefahr, dass Screenreader-Nutzern der Wert des aria-current nun doppelt ausgegeben wird, ist gering, aber vorhanden. Es gibt einge Nutzer, die sehr schlecht sehen und eine Kombination von Vergrößerungssoftware mit Maus und Screenreadern verwenden. Diese Nutzer könnten den Text „aktuelle Seite“ durch das Überfahren mit der Maus ein zweites Mal einblenden. Selbst diese Nutzer dürften von der Ausgabe trotzdem profitieren, denn schließlich wird Ihnen vorgelesen, was sie selber auslösen. Das ist meiner Ansicht nach erwartbar.

Wer rum-maust, muss mit Tooltips rechnen ;-)
Marco Zehe

Idee: einen Link zum Hauptinhalt der Seite setzen

Ein ganz besonderer Vorschlag entstand während einer Diskussion auf heydonworks.com

Heydon Pickering empfiehlt, den Link 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“ (natürlich ließe sich hier ebenfalls weiterer Text explizit hinzufügen).

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 allen Gewohnheiten. 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

Aktuelle Seite mit Link zur aktuellen Seite

Der „Deppenlink“ ist kein Deppenlink. Er kann auf vielen Seiten Sinn machen, insbesondere auf Nachrichtenportalen, auf denen sich Inhalte häufig ändern.

HTML

 <ul>
   <li><a href="page-01.htm">Link zur ersten Seite</a></li>
   <li aria-current="page"><a href="page-02.htm#main">Link zur zweiten Seite</a></li>
   <li><a href="page-03.htm">Link zur dritten Seite</a></li>
</ul>

Aktuelle Seite ohne Link

Ihre eigene Webseite (und Ihren redaktionellen Fleiß) kennen Sie selber am besten. Wenn sich auf Ihrer Seite die Inhalte nur alle paar Stunden oder seltener ändern, bringt es dem Nutzer nichts, ständig die Seite durch einen Klick auf den aktuellen Link neu zu laden und kann unerfahrene Nutzer verwirren. Die meisten Blogs fahren daher besser damit, den Link zu entfernen.

Wenn Sie den Link entfernen, ist tabindex=0 nötig, damit auch Screenreader-Nutzer darüber informiert werden. Ob man sich dann für strong, a ohne href oder nur ein fokussierbares li entscheidet, spielt für die Zugänglichkeit eine geringe Rolle.

Nutzen Sie für Webseiten, die nicht mehrmals pro Tag oder gar Stunde aktualisiert werden daher besser die folgende Struktur

HTML

 <ul>
   <li><a href="page-01.htm">Link zur ersten Seite</a></li>
   <li aria-current="page"><a tabindex="0">Link zur zweiten Seite</a></li>
   <li><a href="page-03.htm">Link zur dritten Seite</a></li>
</ul>

Statt des Link-Elementes a können Sie auch strong verwenden und damit anzeigen, dass es sich um einen besonderen Listeneintrag handelt – eigentlich ist das aber durch das aria-Attribut schon ausreichend gekennzeichnet.

Das Attribut aria-current="page" brauchen Sie in beiden Fällen.

Über weitere Ideen und Kommentare freue ich mich!

Weblinks

WCAG Technique G128: Indicating current location within navigation bars