The name is the programme

Joy and honour!

When the Sozialhelden want to implement a project with us, we are always particularly pleased. Because technical challenges and a good cause are always to be expected alongside nice cooperation.

For the »TV für Alle« website, we looked intensively at barrier-free websites. Accessibility was already required for other sites, for example AWO and Diversity Arts Culture, but TV für Alle is specifically aimed at people with disabilities who want to get a good overview of TV programmes with audio description or subtitles. (And of course to all people who are interested in these features or simply want to use a smart, clear, ad-free programme guide).

Consulting

For this requirement we trained with external advice from Marcus Herrmann. Two of our frontend developers received further input at the Accessibility Club Conference.

Barrier-free website

In user tests, we checked whether TV für Alle also works as desired by Sozialhelden, in partnership with the public and private television stations, and developed by us in design and programming. It was important to us to achieve low barriers in addition to a convincing design and a good user experience.

Visuality

The colours and contrasts are chosen so that people with visual impairments can capture the page as well as possible. In addition, the background can be changed by pressing buttons from white to black and/or the font enlarged.

UX characteristics

• clear filter functions/menu navigation
• filtering by subtitles and audio description
• optimised screen reader
• keyboard operability
• switch for font enlargement
• improve contrasts at the touch of a button

In principle, well-written markup (HTML) is the most important basis for an accessible website. The implementation as a single page application using Vue.js caused difficulties (attention, this is getting even more technical!). There is no reload, but the screen reader still has to be told what is changing. Unfortunately, there are hardly any standards for a good implementation. In TV for Alle, we often use hidden headlines and information texts that are selected via focus management. Additional button labels are necessary, for example, where an icon is sufficient for sighted people. Descriptions must be included that are only audible but not visible.

Difficulties

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

Here you can listen to the whole project again in the podcast. The Sozialhelden are our guests in episodes 1 and 2, in episode 3 there are, among other things, detailed analyses from our frontend developer Sabine on barrier-free programming and in episode 4 Stephan Heinke, who is blind, speaks from the user's point of view.

Now we wish the site many more satisfied users and hope that more programmes with audio description and subtitles will be added to the programme and that barrier-free websites will become easier and easier to develop and will soon become the standard. :)