Bei meiner Reise durch das barrierefreie Netz stoße ich immer wieder auf Kurioses, Interessantes und weniger Spannendes. Daher gibt es jetzt eine unregelmäßige Rubrik Fundstücke, in der ich eher knapp und kursorisch ein barrierefreies Reisetagebuch führe.
Modifizierter Klassiker: Unzugängliche Sprungmarken
Die Stadt Herford hat barrierefrei gerelauncht: Barrierefrei, übersichtlicher, offen für Kritik. Der Anspruch auf Barrierefreiheit wird eingeschränkt, es sei nur weitgehend barrierefrei. Und es würden vor allem Sehbehinderte und Blinde davon profitieren. Das mag sein, ein Tastaturnutzer hat aber wenig Freude mit den realisierten Sprungmarken.
Screenshot Webseite Stadt Herford
Der Klassiker, dass Sprungmarken schlicht mit display:none versteckt werden, wurde hier zwar umgangen, die Liste der Sprungmarken wird ganz richtig aus dem sichtbaren Bereich geschoben. Jedoch gibt es bei Fokussierung der Links keinen Weg zurück, die Sprungmarken bleiben außerhalb des sichtbaren Bereichs. Insofern würde ich das einen modifizierten Klassiker nennen. 🙂 Auch ansonsten wird bei Links nicht auf den Fokus geachtet, außer im Adressen-Seitenbereich, dort wird explizit in CSS der :focus definiert, aber auch nur durch eine farbliche Unterscheidung.
Das Taberlebnis ist daher auch eher merkwürdig – ich nenne es Ghost-Tabbing. Ganze 6 Sprungmarken warten unsichtbarerweise auf den Tabeinsatz – etwas zu üppig ohnehin geraten. Sprungmarken zum Seiteninhalt, zu Hauptnavigation und Volltextsuche sind ja noch verständlich – schön auch die Formulierung Sprungpunkt. Die Seitenoptionen sind auch eher noch einzuordnen. Aber der Unterschied zwischen Subnavigation und Quicknavigation ist eher schwer erkennbar. Unter Quicknavigation versammeln sich dann klassische Inhalte einer Metanavigation wie Impressum und Suche, aber auch Hilfestellungen wie Barrierfrei Hilfe, was auch eher verzweifelt fordernd klingt, und normale Inhaltsbereiche wie Stadtplan und Veranstaltungen. Und die Subnavigation scheint die Hauptnavigation nur zu doppeln, gut – hat man gleich zweimal die Möglichkeit, in die Webseite einzusteigen. Aber ich halte das eher für zu verwirrend. Man könnte dann einfach eine Sprungmarke einsparen.
Interessanterweise werden vor dem Kopf- und dem Inhaltsbereich noch zwei weitere Sprungmarken zur Verfügung gestellt, die auf das Schnellmenü zurückführen, das die Sprungmarken enthält. Leider sind auch diese Sprungmarken wie erwähnt nicht tastaturbedienbar, weil der Fokus sie nicht in den sichtbaren Bereich zurückholt. Die einzige Sprungmarke, die funktioniert, ist auch sichtbar und führt nach dem Inhalt wieder nach oben.
Es gibt doch noch eine Variante des Klassikers zu entdecken auf der Startseite. Dort wird eine interessante Version angeboten, um einzelne Teaser schnell zu überspringen, quasi von Überschrift zu Überschrift, was etwa bei Screenreader-Nutzern ohnehin intern ausgeführt wird, da muss man nicht als Entwickler noch ein zusätzliches Konstrukt bauen. Nach jeder Überschrift h4 wird ein DIV-Element mit display:none versteckt, das eine Sprungmarke auf einen Anker nach dem Teasertext enthält. Abgesehen von der Problematik, dass man diese absolute Form des Versteckens für Screenreader-Nutzer nicht nutzen soll, ist das ein codetechnischer Overhead – es wird der Link auch oben und unten noch mit einen BR-Element abgesetzt -, den man nicht braucht, schon gar nicht für Nutzer, die mit Überschriftenhierarchien arbeiten. Das ist gut gemeint, aber schießt weit am barrierefreien Ziel vorbei.
Für zusätzliche Verwirrung sorgt noch, dass nach dem Ghost-Tabbing der Fokus auf das Logo rechts unten auf der Seite springt, das – warum auch immer, mit absoluter Positionierung nach unten gesetzt ist. Dadurch springt man ganz nach unten und danach wieder ganz nach oben zum zweiten Logo. Diese Zick-Zack-Technik sollte wirklich vermieden werden. Der Tastaturnutzer ist ohnehin schon verwirrt genug. 🙂