Auch wenn man normalerweise recht selten auf der Website der eigenen Stadt unterwegs ist, so sind es doch im Zweifelsfall die wichtigen (und nervigen) Aufgaben, die man als Bürger erfüllen muss. Wann hat nochmal das Bürgerbüro auf, damit ich mir noch schnell einen neuen Reisepass vorm Urlaub beantragen kann? Wann wird gleich der Restmüll abgeholt, diese oder nächste Woche? Und was brauche ich um mein Kind in der Grundschule anzumelden? Aber auch Touristen schauen auf den Stadtportalen Sachsens vorbei und suchen nach interessanten Museen oder nützlichen Tipps. Um so wichtiger ist es, dass die oft großen und informationsgeladenen Websites der eigenen Gemeinde barrierefrei umgesetzt sind. Doch wie steht es um die Barrierefreiheit der sächsischen Städte? Ich habe mir die Websites der fünf größten Städte in Sachsen angeschaut und beantworte heute: Wie barrierefrei sind Dresden, Leipzig, Chemnitz, Zwickau und Plauen?
Das Barrierefreie-Websites-Gesetz in Sachsen
Das Barrierefreie-Websites-Gesetz oder auch kurz BfWebG sagt Ihnen nichts? Vermutlich wird Ihnen aber seine große Schwester, die BITV (Barrierefreie-Informationstechnik-Verordnung) etwas sagen. Diese regelt bereits seit 2002 die Barrierefreiheit von Webauftritten des Bundes. Für viele unbekannt: für die Webauftritte auf Länder- und Kommunalebene gibt es in den Ländern eigene Gesetze. In Sachsen ist dies das Barrierefreie-Websites-Gesetz. Es verpflichtet die Städte und Kommunen, weitere öffentliche Stellen und zu mindestens 50% öffentlich geförderte Unternehmen, ihre Websites barrierefrei umzusetzen. Es gelten dabei die in der BITV definierten Anforderungen. Diese orientieren sich an den Standards der WCAG, wobei alle Richtlinien der Priorität 1 zu erfüllen sind. Für wichtige Navigationselemente gelten zusätzlich die strengeren Regeln der Priorität 2.
Was habe ich geprüft
Doch wie schaut es nun aus in den sächsischen Städten, halten sich alle an die Vorgaben? Dazu habe ich mir vier wichtige Aspekte der Barrierefreiheit einer Website rausgesucht und die Stadtportale daraufhin stichprobenartig geprüft. Denn einen vollständigen Test durchzuführen, würde bei allein einer Website dieser Größe mehrere Tage in Anspruch nehmen.
Geprüft habe ich deshalb:
- Wie gut sind die Farbkontraste gewählt?
- Kann auf der Seite effizient mit der Tastatur navigiert werden?
- Wurden sinnvolle Alternativtexte gepflegt?
- Ist das Kontaktformular barrierefrei?
Das Barrierefreie-Websites-Gesetz in Sachsen, beziehungsweise die BITV bundesweit, enthält noch viele weitere sehr wichtige Kriterien. Die vier genannten Prüfungen decken aber bereits einen großen Teil der Probleme ab, vor dernen viele Nutzer bei täglichen Aufgaben stehen. Also, los geht’s!
Dresden.de – starke Kontraste aber wirre Alternativtexte
Die Farbkontraste auf dresden.de sind Dresden-typisch mit Schwarz, Weiß und einem kräftigen Gelb sehr stark. Mitunter ist es mir persönlich sogar zu stark, mit einem Kontrastwert von mehr als 17:1 (Schwarz/Gelb) ist er aber in jedem Fall deutlich über den minimalen Anforderungen an Farbkontraste. Einzig im Bereich des Footers ist der Kontrast von Gelb zu Grau verbesserungsbedürftig.
Dresden zeigt aber auch deutlich, dass der Einsatz von reinem Schwarz und Weiß nicht immer die angenehmste Variante für den Betrachter ist. Man hätte hier auch, für das Auge kaum sichtbar, die Farben etwas abmildern können.
Die Navigation ist, wie zu erwarten in der Landeshauptstadt Sachsens, groß und überfüllt. Ich kann mir persönlich nicht vorstellen, dass jemand wirklich die Navigation nutzt um zu Inhalten zu kommen. Allerdings ist die Tastaturbedienbarkeit passabel gelöst und Untermenüs öffnen sich erst, wenn man dies mit einem Klick auf Enter oder die Leertaste auch bestätigt. So lässt sich schnell über die sechs Hauptmenüpunkte springen. Der zweite Klick auf denselben Link öffnet dann wirklich die Seite. Der Nutzer wird über diese Änderung der Funktionalität aber leider nicht informiert. Stattdessen verrät ein eher fragwürdig anmutendes ARIA-Label „desktop navigation link: Rathaus“ mehr technische Details als hilfreiche Bedienungsanweisungen.
Die Suche ist prominent und wird wohl das Hauptelement der Navigation für viele Nutzer sein. Schade, dass es keine Sprunglinks gibt um schnell zu dieser oder anderen Seitenbereichen springen zu können. Gerade auf der Startseite ist die Suche Teil des Inhaltsbereiches und wird so erst spät gefunden. Außerdem fehlt dem Suchfeld ein Label, wodurch eine barrierefreie Beschriftung nicht angeboten wird. Das ist schlecht für Screenreader.
Alternativtexte hat man auf dresden.de wohl eher, weil man sie halt haben muss. Das Titelbild im Bereich „Leben in Dresden“ zeigt zwei Radfahrer am Elbufer. Der Alternativtext lautet „Blick von oben auf den Neumarkt“. Die Bilder der News-Teaser erhalten als Alternativtext den Titel der News einfach nochmal. Das ist ungünstig, denn Screenreader lesen diesen Titel so einfach doppelt vor. Falls kein eigener Alternativtext gewollt oder notwendig ist, dann könnte dieser auch einfach leer bleiben. Wie man gute Alternativtexte schreibt habe ich bereits einmal verblogt.
Dank fehlender Sprunglinks ist der Weg bis zum Kontakt weit. Dieser wird erst sehr weit unten im Footer verlinkt und auch dann sucht man vergeblich nach einem Kontaktformular. Es gibt nämlich keins. Stattdessen hat man die Möglichkeit, E-Mails oder DE-Mails zu verschicken oder in der Stadtverwaltung anzurufen. Diese Möglichkeiten sind grundsätzlich nicht verkehrt, aber nicht immer ist gerade der passende E-Mail-Client zur Hand. Hier hat man es sich, meines Erachtens nach, zu einfach gemacht um sich die Arbeit an einem barrierefreien Kontaktformular zu sparen.
Leipzig.de – überladene Navigationen und kaum Kontaktmöglichkeiten
leipzig.de, die Website von Sachsens einwohnerreichster Stadt, stellt sich deutlich heller dar. Statt reinem Schwarz wird ein angenehmeres Dunkelgrau als Schriftfarbe eingesetzt und alle Links inklusive der Seitennavigation sind im gleichen Blau gestaltet. Eine gute Wahl, die Kontraste reichen trotzdem völlig aus. Da sich die Linkfarbe vom Fließtext allerdings nicht deutlich genug abhebt, werden Links innerhalb von Texten zusätzlich unterstrichen. Das ist wichtig, damit auch Menschen mit Farbsehschwächen Links im Text finden.
Die Navigation ist noch voller als die von Dresden. Hinzu kommt, dass es an vielen verschiedenen Stellen Navigationsmöglichkeiten gibt. Der Footer ist überladen mit Links, wir haben zwei Navigationen im Seitenkopf und zusätzlich eine Randspalte auf jeder Inhaltsseite. Die Website wird so unübersichtlich und Nutzern ist nicht klar, welchen Weg sie gehen sollen. Reduzieren Sie die Navigationswege um Klarheit zu schaffen.
Im Gegensatz zu Dresden setzt Leipzig auf Sprunglinks, die sich bei Nutzung der Tastatur als erstes auf der Website öffnen und die Möglichkeit bieten, schnell zu bestimmten Inhaltsbereichen zu springen. Das ist bei so großen Websites Pflicht, denn kein Nutzer möchte auf jeder Unterseite erneut über die Navigation hinwegtabben müssen. Die Tastaturbedienung der Hauptnavigation selbst ist dann ähnlich gelöst wie bei Dresden. Mit einem Unterschied: ein eigener Button, der nach dem Link folgt, öffnet das Untermenü. Ein gut eingesetztes Label informiert die Nutzer über diese Funktion und der Button erscheint auch nur, wenn man die Tastatur zur Navigation verwendet und er mit der Tab-Taste den Fokus erhält. Gut gelöst. Was mich persönlich allerdings am meisten stört ist die ungünstige Animation beim Öffnen und Schließen. Gerade beim Wechsel zwischen Menüpunkten ist das Flackern der Bewegung unangenehm. An diesem Beispiel kann man gut sehen, dass Microanimations Fluch und Segen zugleich sein können. Lesen Sie gern mehr darüber im Artikel über barrierefreie Animationen.
Bei der Pflege von Alternativtexten geben sich die Redakteure aus Leipzig wirklich Mühe. Auch Teaserbilder erhalten individuelle und sprechende Alternativtexte, die die Inhalte gut beschreiben. An manchen Stellen würde ich mir allerdings wünschen, dass diese vor Veröffentlichung noch einmal kurz gegengelesen werden, denn einfache Tippfehler können bei Screenreadern für eine völlig veränderte und damit möglicherweise unverständliche Aussprache sorgen.
Der Kontakt wird auf leipzig.de gleich im Seitenkopf verlinkt und ist so deutlich schneller zu finden. Was sich dahinter versteckt ist aber eine Seite, die so minimalistisch ist, dass es schon wieder an wichtigen Dingen fehlt. Das Kontaktformular scheint aktuell außer Betrieb zu sein, als Alternative werden nur zwei E-Mail-Adressen angeboten. Auch hier gilt: Nicht jeder kann oder möchte eine E-Mail schreiben. Bieten Sie Entscheidungsmöglichkeiten!
Chemnitz.de – wenn man barrierefrei sein muss, aber nicht will
Die kleinste der drei kreisfreien Städte Sachsens hat mit chemnitz.de ein nicht weniger komplexes Stadtportal auf die Beine gestellt. Bei der Auswahl der Farben hätte man dabei aber ruhig auf mehr Kontraste setzen können. Zwar werden die rechtlichen Mindestanforderungen erfüllt, die unterschiedlichen Blautöne im geöffneten Menü sind für Menschen mit Farbsehschwächen aber trotzdem nur schwer zu unterscheiden und Fließtexte sind mit einem Farbkontrast von 4.88:1 auf weißem Hintergrund schon hart an der Grenze. Hier scheint man Farben gewählt zu haben um die Anforderungen zu erfüllen und nicht, um echte Lesbarkeit zu schaffen. Text wie auf der Startseite direkt auf Bilder zu schreiben ohne einen flächigen Hintergrund zu schaffen kann auf sehr hellen Bereichen des Bildes aber zum echten Problem werden.
Auch in Sachen Navigation hat man wohl versucht, mit minimalem Aufwand durchzukommen. Ohne Sprunglinks fehlt eine Möglichkeit, schnell zum Inhalt zu springen. Und das heißt auf chemnitz.de, dass man alle und zwar wirklich alle Links der Hauptnavigation einmal mit der Tabulator-Taste durchnavigiert. Denn jedes Untermenü öffnet sich automatisch. Die Navigation ist tastaturbedienbar, ja. Nutzerfreundlich ist das aber nicht.
Alternativtexte pflegt man in Chemnitz offenbar nicht gern. Nur wenige Bilder haben überhaupt einen Alternativtext und bei denen, die ich finden konnte, hat man scheinbar versucht, schnell fertig zu sein. Ein Bild der Hände eines Brautpaares mit den Eheringen am Finger, die Hände liegend auf dem Brautstrauß, wird schlicht mit „Hochzeitsstrauß mit Ringen“ beschrieben. Das ist nicht nur falsch (denn schließlich hat der Strauß ja keine Ringe, sondern die Hände) sondern gibt auch nicht wieder, was man auf dem Bild sieht.
Beim Test des Kontaktformulars habe ich so langsam das Gefühl, ich hätte mir doch lieber ein anderes Kriterium aussuchen sollen. Denn, wen wundert es so langsam, auch Chemnitz verfügt über kein Kontaktformular. Man kann eine E-Mail schreiben oder die 115 anrufen. Hinzu kommt, dass bei Linktexten wie „Pressestelle“ oder „Fragen zum Internetauftritt“ nicht auf Anhieb klar wird, dass man damit eine E-Mail sendet. Ich erwarte einen Link zur Seite der Pressestelle oder ein FAQ. Linktexte sollten sprechend sein, das heißt dem Nutzer klar beschreiben, was ihn beim Klick erwartet.
Zwickau.de – endlich ein Formular, das aber mehr Menschen aussperrt als Spam-Bots
Ein Transparenzhinweis vorneweg: Für die betreuende Dresdner Agentur, die hinter zwickau.de steht, habe ich bis 2017 gearbeitet und war auch an der Vorgängerversion der Website beteiligt.
Raus aus Sachsens Großstädten, rein in die kleineren Kreisstädte. Mit zwickau.de hat Sachsens größte Kreisstadt ein solides Stadtportal. Zwickau setzt auf unterschiedliche Farbwelten in den einzelnen Themenbereichen. Dadurch, dass auch die Hintergründe wechseln, werden die Kontraste an manchen Stellen wirklich knapp. Aber: Sie liegen immerhin immer über den rechtlichen Mindestanforderungen. Gerade beim Einsatz von Orange ist das nicht einfach, denn ein ausreichend dunkles Orange wird schnell zu einem hässlichen Braun. Beim Einsatz so vieler verschiedener Farben wird es um so schwieriger, starke Kontraste zu gewährleisten.
Die Navigation bei zwickau.de ist dauerhaft geschlossen und hinter einem sogenannten Burger-Menü versteckt. Das kennt man aus der mobilen Welt, es findet aber auch immer mehr anklang auf großen Monitoren. Die Website wirkt so aufgeräumter, allerdings braucht es auch einen Klick mehr um zur Navigation zu kommen. Öffnen lässt sie sich mit der Navigation gut, die einzelnen Ebenen lassen sich über immer sichtbare Buttons nach Belieben Ein- und Ausklappen. Das einzige Manko für mich: Die Buttons wurden eben nicht als Button, sondern als Link mit der Rolle Button umgesetzt. In der Tastaturbedienung hat das den Nachteil, dass sie nur über die Enter-Taste, nicht aber über die Leertaste auslösen (was Buttons eigentlich tun sollten). Buttons und Links wirken identisch, haben aber unterschiedliche Bedeutungen. Lesen Sie im Blog gern mehr darüber, wie Buttons und Links korrekt eingesetzt werden.
Bei der Pflege der Alternativtexte scheint man in den letzten Jahren die Lust verloren zu haben, denn das kenne ich von der alten Website noch besser. Ähnlich wie in Dresden oder Chemnitz scheint man diese, für Nutzer von Screenreadern sehr wichtige Funktion, nur mit Unmut umsetzen zu wollen. Alternativtexte sind, wenn überhaupt, nur mit 1-2 Wörtern gepflegt. Ein Plakat mit einem Aufruf, am 1.9. Wahlhelfer zu werden, wird schlicht mit „Wahlhelfer“ beschrieben. An anderer Stelle steht der kryptische Dateiname als Alternativtext im Quelltext. Solche Alternativtexte bringen keinerlei Vorteil und Nutzer wären besser dran, wenn man sie dann ganz weg lässt. Schade, denn über Alternativtexte kann man auch den Suchmaschinen wichtige Informationen zum Bild mitgeben.
Im Seitenkopf und Seitenfuß verlinkt Zwickau seine Kontaktseite und bietet so eine schnelle und unkomplizierte Möglichkeit, sie zu kontaktieren. Und, Überraschung, dahinter verbirgt sich tatsächlich ein Kontaktformular. Allerdings auch nur ein Kontaktformular. Auch hier werden keine Alternativen angeboten. Ich bleibe dabei: Je mehr Alternativen, desto mehr Entscheidungsfreiraum lassen Sie Ihren Nutzern.
Aber gut, testen wir endlich mal ein Formular. In diesem Fall ein sehr großes Formular, denn es werden viele Daten abgefragt (unter anderem die komplette Postadresse). Wofür das gut ist erschließt sich mir nicht, zumal es eh keine Pflichtfelder sind. Man wird mir kaum per Brief antworten. Das Formular wird dadurch nur unübersichtlich, Nutzer könnten abgeschreckt werden. Schön ist, dass die Erklärung der Pflichtfelder-Markierung gleich zu Beginn des Formulars erfolgt. Das Formular ist tatsächlich auch insgesamt sauber umgesetzt. Alle Eingabefelder haben eine auch von Screenreadern lesbare Beschriftung, Fehlermeldungen werden mittels aria-describedby direkt mit dem Eingabefeld verknüpft. Ich habe nur einen Wunsch: Das Captcha am Ende kann entfernt werden. Es sperrt vermutlich mehr Menschen als Bots aus, denn wenn Computer irgendetwas so richtig gut können, dann ist es rechnen. Mehr über die Barrierefreiheit von Captchas und wirklich barrierefreie Alternativen lesen Sie im Blog.
Plauen.de – schönes Kontaktformular, dafür keinerlei Alternativtexte
Ob sich die Spitzenstadt Plauen auch eine Spitzen-Website gegönnt hat? Optisch erinnert plauen.de zunächst einmal stark an dresden.de. Und auch hier zeigt sich, dass Kontraste zu stark sein können. Es hilft, dass an vielen Stellen Hellgrau statt Weiß als Hintergrundfarbe eingesetzt wird. Das Gelb ist eine Nuance sonniger und weniger krell, die starken Kontraste finde ich auf Dauer trotzdem anstrengend.
Zentrales Element der Seitennavigation ist die Suche. Besser als bei Dresden ist diese aber auch über Sprungmarken erreichbar und sehr weit vorn in der Tabreihenfolge. Die Hauptnavigation wird wie in Zwickau gleich hinter einem Button versteckt. Die Suche ist gut zugänglich, die Navigation hat aber die gleichen Probleme wie die von Zwickau. Die Buttons zum Ausklappen der Unternavigation sind gut bedienbar, sie sind aber als Links umgesetzt und damit nicht über die Leertaste auslösbar. Schade, denn die Seite fühlt sich für mich bei einem ersten groben Test mit der Tastatur ansonsten wirklich gut an.
Alternativtexte spart sich die Website an vielen Stellen gleich ganz und bindet Grafiken als Hintergrundbild ein. Dabei sollte aber nicht vergessen werden, dass auch Hintergrundbilder einen Alternativtexte brauchen, man muss diesen nur anders einbinden. Die ersten Alternativtexte, die ich finden konnte, finden sich in einer Bildergalerie zur Fabrik der Fäden. Was gut ist: Der Alternativtext des Bildes dient gleichzeitig als Linktext und enthält zusätzlich zur Bildbeschreibung die Information darüber, dass ein Klick das Bild vergrößert. Was schlecht ist: Jedes Bild der Galerie hat denselben nichtssagenden Alternativtext. Das ist dann gleichbedeutend mit keinem Alternativtext, denn der Nutzer weiß am Ende auch nicht was auf dem Bild zu sehen ist (in diesem Fall nur, bei welchem Event es fotografiert wurde).
Kontaktinformationen erhält man in Plauen direkt im Footer. Telefonnummer und E-Mail-Adresse sind ohne weiteren Klick zugänglich, das Kontaktformular ist verlinkt. So sehen Alternativen aus, sehr gut. Das Kontaktformular selbst ist übersichtlich und fragt nur die wichtigsten Daten in möglichst wenig Eingabefeldern ab. Darüber hinaus ist das Formular bis auf eine Kleinigkeit in den verwendeten Labels sauber umgesetzt, Fehlermeldungen werden schön am Anfang des Formular mitgeteilt und das Captcha erfolgt im Hintergrund automatisch.
Fazit zur Barrierefreiheit der Stadtportale Sachsens
Es zeigt sich: Auch fünf Jahre nach Inkrafttreten des Barrierefreie-Website-Gesetzes in Sachsen und 22 Jahre nach Inkrafttreten der ersten Version der BITV sieht es zumindest in Sachsen noch dünn aus mit der Barrierefreiheit. Baustellen gibt es viele. Unter den fünf größten Städten Sachsens hat mir die Barrierefreiheit von plauen.de noch am Besten gefallen. Bis auf leipzig.de haben aber alle Portale viel Aufholbedarf bei der Pflege von Alternativtexten. Einen Test hätte bei mir keines der Portale bestanden. Gerade von Zwickau bin ich etwas enttäuscht, denn damals habe ich persönlich die barrierefreie Überarbeitung der alten Website betreut und wir haben die Redakteure geschult. Es zeigt sich aber, dass ein solcher Zustand erhalten werden muss und Redakteure mit Aufgaben wie der Pflege von Alternativtexten nicht nach bestandenem Test aufhören dürfen.