Der Name ist Programm

Freude und Ehre!

Wenn die Sozialhelden ein Projekt mit uns umsetzen wollen, freuen wir uns immer besonders. Denn technische Herausforderungen und ein guter Zweck sind neben der netten Zusammenarbeit stets zu erwarten.

Für die Website TV für Alle setzten wir uns intensiv mit barrierefreien bzw. barrierearmen Websites auseinander. Barrierefreiheit war zwar auch schon bei anderen Seiten, zum Beispiel AWO und Diversity Arts Culture, gefordert, aber TV für Alle richtet sich gezielt an Menschen mit Behinderungen, die einen guten Überblick über Fernsehsendungen mit Audiodeskription oder Untertiteln erhalten wollen. (Und natürlich an alle Menschen, die sich für diese Funktionen interessieren oder einfach eine schicke, übersichtliche, werbefreie Programmauskunft nutzen möchten).

Beratung

Für diese Anforderung bildeten wir uns mit einer externen Beratung durch Marcus Herrmann fort. Weiteren Input holten sich zwei unserer Frontend-Entwickler:innen bei der Accessibility Club Conference.

Barrierefreie Website

Ob TV für Alle auch so funktioniert, wie von den Sozialhelden, in Partnerschaft mit den öffentlichen und privaten Fernsehsendern, gewünscht und von uns in Design und Programmierung entwickelt, prüften wir in User-Tests. Uns war wichtig, die Barrierearmut zusätzlich zum überzeugenden Design und zur guten User Experience zu erzielen.

Visualität

Die Farben und Kontraste sind so gewählt, dass Menschen mit Sehbehinderungen die Seite so gut wie möglich erfassen können. Zusätzlich kann der Hintergrund auf Knopfdruck von weiß auf schwarz umgestellt und/oder die Schrift vergrößert werden.

UX-Mermale

• Übersichtliche Filterfunktionen/Menüführung
• Filtern nach Untertiteln und Audiodeskription
• optimierter Screenreader
• Tastaturbedienbarkeit
• Schalter zur Schriftvergrößerung
• Kontraste auf Knopfdruck verbessern

Grundsätzlich ist ein gut geschriebenes Markup (HTML) die wichtigste Grundlage für eine barrierefreie Website. Schwierigkeiten bereitete die Umsetzung als (Achtung, jetzt wird es noch technischer!) Single Page Applikation mittels Vue.js. Es erfolgt kein Reload, trotzdem muss dem Screenreader mitgeteilt werden, was sich ändert. Hier existieren leider kaum Standards für eine gute Umsetzung. Bei TV für Alle setzen wir oft versteckte Überschriften und Hinweistexte ein, die über ein Fokusmanagement angewählt werden. Zusätzliche Buttonbeschriftungen sind z. B. dort nötig, wo für Sehende ein Icon reicht. Beschreibungen müssen eingebaut werden, die nur hörbar, aber nicht sichtbar sind.

Schwierigkeiten

Bei den Sendungsbildern mussten wir uns gegen alt-tags entscheiden (bzw. haben diese leer gelassen, alt=“”, wodurch sie vom Screen Reader ignoriert werden). Da über die API keine sinnvollen Beschreibungen enthalten sind, hätten wir auf etwas wie »Eine Szene aus: {Titel der Sendung}« zurückgreifen müssen. Darin haben wir keinen Mehrwert für die Nutzenden gesehen. Lässt man die alt-tags drin, wird der Dateiname vorgelesen, was zu einer frustrierenden User-Experience führen würde. Beim Programmieren barrierefreier Websites ist es also besonders wichtig zu überlegen, ob Infos einen Mehrwert haben.

Podcast

Hier kann man sich das ganze Projekt nochmal im Podcast anhören. Die Sozialhelden sind in Folge 1 und 2 bei uns zu Gast, in Folge 3 gibt es unter anderem detallierte Analysen von unserer Frontend-Entwicklerin Sabine zur barrierearmen Programmierung und in Folge 4 spricht Stephan Heinke, der blind ist, aus User-Sicht.

Nun wünschen wir der Seite viele weitere zufriedene Nutzer:innen und hoffen, dass noch mehr Sendungen mit Audiodeskription und Untertiteln ins Programm kommen, und dass barrierearme Websites immer leichter zu entwickeln sind und bald zum Standard werden. :)