Der Name ist Programm

TV für Alle ist ein barrierearmes

digitales Fernsehmagazin

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 Webseiten 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 wollen). 


Für diese Anforderung bildeten wir uns mit einer externen Beratung durch Marcus Herrmann fort.

 

Weiteren Input holten sich zwei unserer Frontendentwickler*innnen bei der Accessibility Club Conference.

Barrierefreie

Webseite

Mit User Tests zur Besseren Usability

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.

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.



 

HERAUSFORDERUNGEN

Grundsätzlich ist ein gut geschriebenes Markup (HTML) die wichtigeste 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 Fokumsmanagement 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.


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.

UX-Merkmale

  • Übersichtliche Filterfunktionen/Menüführung
  • Filtern nach Untertiteln und Audiodeskription
  • Screenreader optimiert
  • Tastaturbedienbarkeit
  • Schalter, um die Schrift zu vergrößern
  • Kontraste auf Knopfdruck verbessern

Anhören

Add Embed Code

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. 

Podcast

hintergrund_tv_mock_up

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 :)

404_seite_bild

Auch interessant

CLOSE
close