Sieben Tipps für eine barrierefreie Theater-Webseite

Ich träume von einer Webseite, wo ich als blinde Nutzerin alles genauso schnell finde wie mein sehender Partner. Viele Seiten sind nicht barrierefrei. Das liegt in den meisten Fällen nicht an Programmierfehlern, sondern schlicht am Aufbau der Webseite. Es sind viele Kleinigkeiten, die letztendlich dazu führen, dass es für blinde Nutzerinnen und Nutzer von Screenreadern (eine Sprachausgabe zur Navigation von Computern) nahezu unmöglich ist, auf einer Seite genau die Information zu finden, nach der man gesucht hat. In diesem Beitrag möchte ich ein paar Tipps geben, wie Webseiten-Betreiberinnen und Betreiber ihre Inhalte so gestalten können, dass sie auch von blinden Menschen gefunden werden können. Ich gebe euch keine vollständige Liste. Vielmehr nenne ich Lösungsvorschläge für Probleme, die mir auf Theater-Webseiten häufig begegnen. Los geht’s!

1. Sich auf die relevanten Inhalte einer Seite beschränken

Als blinde Nutzerin navigiere ich eine Webseite mithilfe eines Screenreaders, einer Sprachausgabe, die mir die Inhalte einer Webseite vorliest und es mir ermöglicht, einzelne Elemente einer Webseite mit der Tastatur anzuspringen – z.B. „H“ für die nächste Überschrift oder „B“ für den nächsten Button.

Viele meiner Tipps drehen sich um das Thema Übersichtlichkeit. So auch dieser Punkt: minimalistisches Design. Ich musste schon Theaterseiten navigieren, die zwölf und mehr Überschriften auf einer Seite zusammengefasst hatten. Wenn sich all diese Überschriften um dasselbe Thema drehen, finde ich das auch nicht schlimm. Wenn sich jedoch nur zwei oder drei Überschriften mit demselben Thema befassen und der Rest der Seite neue Ausschreibungen, Veranstaltungen, Ankündigungen, Newsletter- und Kontaktformulare enthalten, bin ich schnell überfordert. Ich wünsche mir, dass mehr Wert auf den Inhalt als auf dessen Aussehen gelegt wird. Das heißt, wenige relevante Informationen auf einer Seite und wenige, aber dafür nachvollziehbare Menüpunkte in der Navigationsbar. Das macht es nicht nur für mich barrierefreier, sondern im Bestfall auch für sehende Nutzerinnen und Nutzer bedienbarer. Zudem sind thematisch logisch voneinander abgegrenzte Inhalte leichter über Suchmaschinen auffindbar.

2. Übersichtliche Anordnung

Neben dem minimalistischen Design, gehört eine eindeutige Zuordnung der Seiteninhalte zu den jeweiligen Überschriften zu einer guten Übersichtlichkeit dazu. So sollten beispielsweise Informationen zu einem Stück immer direkt unter der jeweiligen Überschrift stehen. Leider gibt es Seiten, wo vor und hinter bzw. links und rechts neben der Überschrift Angaben zum Stück aufgelistet sind. Mein Screenreader kann die Informationen einer Webseite leider nur nacheinander ausgeben. Deshalb finde ich in diesen Fällen nicht alle Angaben zum Stück oder kann mir nicht sicher sein, welcher Text zu diesem und welcher schon zum nächsten Stück gehört. Damit ich schnell die Vorstellung finde, die ich besuchen möchte, brauche ich alle Angaben unter einer eindeutigen Überschrift.

3. Alternativtexte für Bilder erstellen

Etwas, das so einfach ist und doch so oft vergessen wird, ist der Alternativtext (Alt-Text)für Bilder und Grafiken. Nutzerinnen und Nutzer von Screenreadern lassen sich die Inhalte einer Webseite vorlesen oder lesen sie selbst in Form von Punktschrift. Der Alt-Text hilft außerdem den Suchmaschinen, ein Bild thematisch einzuordnen und wird auch dann wiedergegeben, wenn das Bild gerade nicht angezeigt werden kann. In dem Fall wäre es also besser, wenn statt „img 2435“ oder „graphic 458bw“ eine verständliche Beschreibung zu lesen wäre. Der „Deutsche Blinden- und Sehbehindertenverband“ hat ein paar wenige Richtlinien zusammengefasst, die das Schreiben eines Alt-Textes erleichtern. Insgesamt kommt es darauf an, zuerst zu beschreiben, was für das Verständnis dringend notwendig ist und dann einige Details hinzuzufügen. Die Richtlinien für einen Alternativtext von Bildern könnt ihr auf der Seite des DBSV nachlesen.

Ein Alt-Text könnte also folgendermaßen aussehen: „Eine Frau schreibt an einem Laptop. Sie sitzt auf einer Parkbank, hinter ihr Bäume und eine offene Grasfläche.“ Kurz muss es sein, denn es geht nicht um die Analyse eines Kunstwerks. Das Bild soll lediglich in den Kontext der Seite eingebettet werden.

4. Eindeutige Benennung von Links, Überschriften und Buttons

Jedes Element auf einer Webseite will mir als Nutzerin etwas sagen oder mich zu einer Handlung anregen. Das funktioniert aber nur, wenn ich die „Message“ auch verstehe. Links, die nur als „Link“ oder „hier klicken“ beschriftet sind, sagen mir nicht, wohin sie führen. Ihre Bedeutung bleibt unsichtbar und die Links von mir ungenutzt. Gleiches gilt für Überschriften, Schalter bzw. Buttons und Grafiken. Eine eindeutige Beschriftung sorgt dafür, dass ich mich auf der Seite besser orientieren kann, das finde, wonach ich suche und letztlich so handele, wie es die Webseiten-Betreiber vorsehen. Eindeutiger als „Ticket kaufen“ ist es z.B. einen Link „Ticket für Woyzeck Interrupted kaufen“ zu nennen. Das gilt vor allem, wenn es mehrere Ticket-Links auf einer Seite gibt.

5. Buttons als Buttons programmieren

Grafiken, die Buttons sein sollten, Überschriften, die Text sein sollten oder Buttons, die Überschriften sein sollten. Als blinde Nutzerin stolpere ich oft über Elemente, die vorgeben etwas anderes zu sein, als sie sind. Oft ist es eine Design-Entscheidung beispielsweise einen Text als Überschrift zu markieren oder einen Button als Bild zu gestalten. Wie diese Elemente visuell wirken, kann ich nicht beurteilen. Für mich ist es verwirrend, mit „H“ zur nächsten Überschrift zu springen und plötzlich einen langen Text vor mir zu haben oder nach einem Sende-Button zum Abschicken einer Nachricht zu suchen und nur ein Bild namens „image 19843“ zu finden. Da ich als blinde Nutzerin einzelne Elemente mit meinem Screenreader anspringen kann, ist es wichtig, dass ein Button als Button programmiert ist.

6. Orientierungshilfen durch Brotkrumennavigation geben

Auf besonders verschachtelten Webseiten vermisse ich etwas, das mir anzeigt, wo ich bin und wo ich vorher war. Sonst kann es sein, dass ich schnell den Überblick verliere. Eine Brotkrumennavigation löst dieses Problem. Oft bin ich sehr vorsichtig, wenn es darum geht, eine Seite zu verlassen, wenn mitten im Text ein neuer Link auftaucht, der mich interessieren könnte. Wenn ich ihn dann doch aktiviere und auf eine neue Seite mit anderen Verlinkungen komme, weiß ich bald schon nicht mehr, wie ich ursprünglich dorthin gelangt bin. Eine Brotkrumennavigation hilft mir ebenso wie Hänsel und Gretel dabei, meinen Weg zurückzufinden, was für mich eine große Orientierungshilfe auf verschachtelten Seiten sein kann.

7. Leichte Sprache, Untertitel und Farbgebung

Natürlich bin ich mir darüber im Klaren, dass es noch andere Arten von Barrieren gibt, abhängig von der Einschränkung der Nutzerinnen und Nutzer. Für ein sehbehindertes Publikum kann eine kontrastreiche Farbgebung eine Hilfe sein. Für gehörlose Menschen sind Untertitel für Videos und Transkriptionen von Podcasts eine Hilfe. Besonders im Bereich Theater könnten wir alle außerdem von einer leichteren Sprache profitieren, da Beschreibungen von Theaterstücken (vor allem in der freien Szene) unnötig kompliziert formuliert werden.

Ich erhebe mit diesem Beitrag keinerlei Anspruch auf Vollständigkeit. Im Gegenteil bin ich mir sicher, dass es noch viel mehr zu beachten und anzumerken gibt. Diese Tipps sollen lediglich eine Orientierung bieten. Ich hoffe, ich kann dadurch den einen oder die andere Webseitenbetreibenden zur Verbesserung ihrer Barrierefreiheit anregen. Wenn ihr zwei oder drei von diesen Tipps umsetzt, seid ihr schon dabei, eure Pforten zu öffnen. Wer darüber nachdenkt, ihre oder seine Seite komplett barrierefrei zu gestalten, sollte jedoch ein professionelles Webseiten-Assessment in Auftrag geben.

Unser Newsletter rettet euch vor kultureller Langeweile

Mehrmals monatlich halten wir euch über die aktuellen Vorstellungen mit Audiodeskription auf dem Laufenden. Hier geht’s zum Newsletter.