Skiplinks auf Webseiten

Skiplinks auf Webseiten

Skiplinks sind mit die am meisten diskutierten Punkte im Internet, wenn das Thema Barrierefreiheit angesprochen wird. Nachdem ich dann mehrere Artikel hierzu gelesen habe und mir auf vielen Webseiten den Einsatz von Skiplinks angeschaut habe, fand ich folgende Umsetzungen:

  1. Skiplinks unsichtbar mittels CSS
  2. Skiplinks sichtbar
  3. Skiplinks mittels Element ID
  4. Skiplinks über Anker

Visuell unsichtbare Skiplinks

Das ist eine interessante Geschichte, da diese Skiplinks nur sichtbar sind, wenn man im Browser CSS deaktiviert. Für Screenreader Benutzer sind diese Skiplinks immer verfügbar. Unsichtbare oder versteckte Skiplinks kann man sehr gut über einen Textbrowser testen.

CSS Code:

.inhalt {
  position: absolute;
  top: -3000px;
  left: -3000px;
}

(X)HTML Code:

...
  <a href="#inhalt">Direkt zum Inhalt</a>
  ...
  <div id="inhalt"></div>
}

Ein großer Nachteil dieser Variante sind alle mobile Benutzer die mit einem PDA oder Mobile Telefon unterwegs sind und den MS Internet Explorer benutzen. Es wird nicht funktionieren, einmal weil der Skiplink unsichtbar ist und zweitens der mobile MS Internet Explorer keine IDs anspringen kann. Testen kann man das mit Dillo (Linux HTML 4 Browser) und OffByOne (Windows HTML 3.2 Browser) wenn man kein mobiles Gerät zur Verfügung hat oder man lädt sich von Microsoft den WindowsCE Emulator herunter.

Sichtbare Skiplinks

Viele der von mir untersuchten Webseiten vermeiden diesen Weg, warum auch immer. Gründe hierfür habe ich keine gefunden. Aber zurück zu der Geschichte mit den mobilen Geräten und dem springen auf eine ID.

(X)HTML Code:

...
  <a href="#inhalt">Direkt zum Inhalt</a>
  ...
  <div id="inhalt"><a name="inhalt"></a></div>
}

Mit dieser Variante können die meisten Browser damit arbeiten und es funktioniert ebenfalls auf dem PDA oder Mobile Telefon. Das ist auch die Lösung die ich beim Erstellen von Websites favorisiere und vor allem ist das eine benutzerfreundliche Lösung für mobile Geräte um einfach und schnell durch Webseiten zu navigieren.

Selbsterklärende Namen für Skiplinks

Auch hier sind im Internet viele Varianten zu finden. Da ich selber eine englische Webseite betreue, werde ich hier die von mir gefundenen Skiplink Bezeichnungen sowohl für Deutsch als auch Englisch auflisten.

  1. Zum Inhalt
  2. Direkt zum Inhalt
  3. Springe zum Inhalt

und am Seitenende

  1. nach oben
  2. zum Seitenanfang
  3. direkt zum Seitenanfang

Das Ganze jetzt auch für eine englischsprachige Webseite. Dort gibt es ähnliche Varianten.

  1. Skip to content
  2. Skip to sidebar
  3. Skip to sidebar navigation

und am Seitenende

  1. back to the top
  2. Top of page
  3. to top

Interessant ist der englischsprachige Artikel “Back to Top” links considered harmful von Jukka "Yucca" Korpela. Er beschreibt verschiedene Aspekte zu dieser Thematik.

Nach oben

 

Nach oben