Blaue Mützen gegen Barrieren

Ein Gipsarm oder Farbenblindheit erschweren den Besuch einer Website. Der Blue Beanie Day erinnert deshalb an die Einhaltung von Webstandards und digitale Barrierefreiheit. Abstriche beim Design sind deshalb nicht nötig.

Zu sehen ist eine blaue Wollmütze. Sie liegt auf einer silber-weißen Tastatur auf einem Holztisch.
Der Blue Beanie Day erinnert daran, dass Webstandards das Leben erleichtern (Foto: Norbert Henning)

Wenn Sie diesen Text lesen wollen, klicken Sie bitte hier. Es passiert nichts? Stimmt, denn Sie lesen den Text ja bereits! Links, die mit „hier“, „hier klicken“ oder „klicken Sie bitte hier“ scheinbar verständlich sagen, dass sich dort ein Link befindet, gibt es im Internet zuhauf. Barrierefrei sind diese nicht und sie halten sich ebenso wenig an Webstandards. Daran, wie wichtig Webstandards sind, erinnert alljährlich am 30. November der Blue Beanie Day (Tag der blauen Mützen).

Früher gab es keine Webstandards

Normen begegnen uns täglich: sei es das Blatt Papier Autoteile oder Schrauben. Zahlreiche Standards nehmen wir deshalb gar nicht als solche wahr, sie erleichtern uns in der Regel jedoch das Leben, weil allen Beteiligten klar ist, wie ein DIN-A4-Papier beschaffen sein muss. So ist es auch mit Webstandards. „Früher bestand die Problematik darin, dass Webbrowser keine Standards verwendet haben“, erklärt Benjamin Klemencic, Webentwickler am Regionalen Rechenzentrum Erlangen (RRZE). „Somit mussten Websites für jeden Browser einzeln programmiert werden.“ Das kostete viel Zeit und viel Geld.

Um Zeit und Geld zu sparen und die Informationen allen Menschen zugänglich zu machen, wurden Webstandards entwickelt. Im Gegensatz zu anderen Normen sind diese Regeln nicht in Stein gemeißelt, sondern werden immer wieder weiterentwickelt. Doch wer sich daran hält, hat weniger Probleme bei der Darstellung seiner Informationen und weniger Beschwerden über seine Angebote durch die Nutzerinnen und Nutzer. „Das sind Richtlinien, die bei der Webentwicklung helfen, dass Menschen, die es im Leben sowieso schwer haben, Informationen nicht vorenthalten werden“, sagt Barbara Bothe, Webentwicklerin in der Abteilung Ausbildung & Information am RRZE. Und trotz allem ist Barrierefreiheit kein Hexenwerk, sondern von allen Beteiligten einfach umzusetzen. Denn: „Moderne Websites sind das einzige Medium, das komplett barrierefrei sein kann“, sagt Rolf von der Forst, ebenfalls Webentwickler im RRZE-Webteam. Und dabei muss man beim Design noch nicht einmal auf viel verzichten, wie Bothe erklärt.

Jeder kann betroffen sein

Mit Kleinigkeiten kommt man im World Wide Web schon sehr weit. Man gewinne schon viel, wenn Farbkontraste stark eingestellt seien, Überschriften als solche markiert oder Listen als Aufzählung angelegt werden. Denn Barrierefreiheit ist nicht nur für Blinde und Sehbehinderte wichtig. Ebenso können Hörgeschädigte, Menschen mit Aufmerksamkeitsschwierigkeiten, Farbenblinde, Menschen mit Farbenschwäche, mit Gipsarm oder mit kleinem Smartphone betroffen sein. „Schon bei der Farbwahl ist es wichtig, auch an Menschen mit einer Rot-Grün- oder Gelb-Blau-Schwäche zu denken“, sagt Lukas Niebler, RRZE-Webentwickler. „Visualisierungen mit gelber Schrift auf blauem Grund sehen diese Menschen vielleicht nur grau in grau.“ Trotzdem gebe es noch Tausende weitere Gestaltungsmöglichkeiten. Auch die Responsivität, sprich die Anpassbarkeit der Website auf unterschiedliche Bildgrößen, kann für Nutzende eine Barriere sein. Was für den einen eine Barriere ist, ist für den anderen vielleicht keine. Allerdings kann jeder Mensch im Laufe seines Lebens vor solchen Hindernissen stehen. Darum ist das Ziel, so viele Steine wie möglich für so viele Nutzende wie möglich vorher aus dem Weg zu räumen.

Ein Screenreader (Vorleseanwendung) kann nicht nur die Inhalte einer Webseite vorlesen, sondern auch einzelne Elemente gesammelt, zum Beispiel alle Überschriften im Text oder alle Links einer Website. Das führe im Zweifel dazu, dass Blinde und Sehbehinderte mehrfach hintereinander „hier klicken“ vorgelesen bekämen. Was sich hinter dem Link versteckt, wissen sie aber noch lange nicht. Eine entsprechende Benennung ist deshalb unerlässlich und man kann sogar selbst davon profitieren. Eine barrierefreie Website hilft zum Beispiel ebenso beim Suchmaschinenranking. Denn Crawler, die das Internet nach Inhalten durchsuchen, sind „sehbehindert“. Wer also besser gelistet werden möchte, kann das zusätzlich durch barrierefreie Gestaltung verbessern. „Wer barrierefrei entwickelt, macht sich auch Gedanken darüber, wie seine Zielgruppe die Website nutzt“, sagt Wolfgang Wiese, Leiter der Abteilung Ausbildung & Information am RRZE. „Dadurch programmiert man übersichtlicher.“

Wer aber denkt, dass Barrierefreiheit nur das Frontend, also die für alle Nutzende sichtbare Website, betrifft, der täuscht sich. „Genauso wichtig ist es, das Backend barrierefrei zu gestalten. Darauf hat man zwar oftmals wenig Einfluss, aber es ist wichtig beide Seiten zu beachten“, erklärt Wiese.

Der Tag der blauen Mützen

Der Blue Beanie Day weist auf die Bedeutung von Webstandards hin und wird jedes Jahr am 30. November von Webentwicklern aus aller Welt begangen. Die blaue Mütze als Symbol des Aktionstages verweist auf das Buch „Designing with Web Standards“ von Jeffrey Zeldmann. Auf dem Cover des 2003 erschienenen Buches war ein Mann mit blauer Mütze abgebildet.

Die wichtigsten Tipps von den RRZE-Webentwicklern auf einen Blick

Nutzende:

  • Wenn etwas nicht barrierefrei ist: Feedback geben, denn nur dann ändert sich etwas!

Webentwickler

  • Strukturen der einzelnen Seiten sauber anlegen
  • Farben mit ausreichendem Kontrast verwenden
  • Inhaltselemente barrierefrei entwickeln

Redaktionen:

  • Webstandards sollten eingehalten werden
  • Zielgruppe beachten, und die Struktur auf diese Zielgruppe abstimmen
  • Semantik beachten
  • Kostenlose Barrierefreiheitstools geben einen schnellen Überblick darüber, wie barrierefrei der Auftritt ist:
    • Lighthouse für Chrome: Deckt neben Barrierefreiheit auch Performance und Suchmaschinenoptimierung ab
    • Wave: Browser-Plugin für Chrome, Firefox und Edge
  • Inhaltlich:
    • Auf das Wesentliche beschränken
    • Texte von Fachfremdem gegenlesen lassen
    • Auf Überschriftenhierarchie achten
    • „Sprechende Links“: nicht „hier klicken“ sondern genaue Bezeichnung (Beispiel s. unten der perfekte ALT-Text)
    • Bilder mit Alternativ-Texten hinterlegen, Tipps für den perfekten ALT-Text gibt es auch im Artikel: Der perfekte ALT-Text.
    • Videos mit Untertiteln versehen
    • Alle Änderungen kontrollieren

Text: Corinna Russow