Webseiten, Apps und Betriebssysteme für jeden zugänglich machen

26 November 2018

Ich weiss, es mag sich komisch anhören, weil es eigentlich klar ist, dass jeder eine Webseite bedienen kann. Aber wie ist es für jemanden, der Beispielsweise eine körperliche Einschränkung oder eine Sehschwäche hat?

Dazu gab es einen Workshop zum Thema Accessibility. Am Ende des Workshops wusste jeder, was Accessibility ist und DU nach diesem Blog Beitrag hoffentlich auch.

 

Der Workshop begann mit einer allgemeinen Einleitung zum Thema Accessibility.

Was ist Accessibility? Wozu braucht man Accessibility? Auf was muss ich achten und welche Teilbereiche gibt es?

Zuerst stellt sich die Frage: was bedeutet Accessibility? Accessibility oder auch Barrierefreiheit bedeutet in der Informatik, dass Webseiten, Programme, Betriebssysteme und Apps so gestaltet sind, dass sie für ALLE Nutzer, einschließlich Menschen mit Behinderungen, bedienbar sind. Dazu gehört das Webdesign, dass so gestaltet sein soll, dass auch Menschen mit einer Sehschwäche eine Webseite wahrnehmen und bedienen können.

 

Dazu gibt es Internationale Rechtlinien zum Thema Accessibility.

In der WCAG 2.0 (Web Content Accessibility Guidlines) werden Grundsächlich vier Prinzipien beschrieben, die eingehalten werden müssen.

 

Prinzip 1: Wahrnehmbar — Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.

Prinzip 2: Bedienbar — Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.

Prinzip 3: Verständlich — Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.

Prinzip 4: Robust — Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können

 

Es gibt verschiedene Tools, die zum Beispiel einem Blinden helfen kann, eine Webseite einfacher zu bedienen.

Einer dieser Tools ist der Screenreader. Wie der Name verrät, liest der Screenreader alles vor was man mit der Maus anklickt. So hat der User trotz Sehschwäche die Möglichkeit genau zu wissen was wo angezeigt wird. Standartmässig sind auf allen Betriebssystemen wie Windows, Linux, IOS etc. ein Screenreader vorinstalliert.

 

Damit der Screenreader funktioniert muss auf der Webseite Barrierefrei programmiert werden. Das Ganze fängt bereites beim Skripten von HTML und CSS an.

Beispielsweise ist es wichtig, dass man Bilder immer mit einen alt-Text hinterlegt.

 

Hier ein Beispiel:

<img src="importantLogo.jpeg" alt="Company logo">

 

Der alt-Text hat einige Vorteile. Wenn man zum Beispiel eine Webseite aufruft und aus irgendeinem Grund ein Bild nicht geladen werden kann, wird an der Stelle, wo das Bild sein soll der alt-Text angezeigt. Durch den alt-Text wird dem User klar was auf dem Bild angezeigt werden soll, auch wenn das Bild nicht geladen wurde.

Für User die einen Screenreader brauchen, ist der alt-Text sehr wichtig, da der Screenreader den alt-Text vorliest.

 

HTML5 bietet viele neue semantische Elemente an, die helfen sollen eine Webseite besser zu strukturieren. Section, Aside, Details und Figure sind nur ein paar der neuen semantischen Elemente.

 

 

Nebst der HTML Struktur ist es wichtig, dass man mit CSS das richtige Design erarbeitet.

Es ist wichtig, dass man gute Farbkontraste für Menschen mit einer Sehschwäche erstellt.

 

Die Web Content Accessibility Guidelines (WCAG) empfehlen mindestens einen Kontrast von 4,5 zu 1 für einen normalen Text. Das Verhältnis wird berechnet, indem die relativen Luminanz Werte von zwei Farben verglichen werden. Dies reicht von 1: 1 für die gleiche Farbe oder keinen Kontrast bis zu 21: 1 für Weiß gegen Schwarz, den stärksten Kontrast. Es gibt viele Online-Tools zur Kontrastprüfung, die dieses Verhältnis für Sie berechnen.

 

Accessibility ist ein sehr grosses Thema und man könnte noch viel mehr dazu schreiben.

Trotzdem hoffe ich, dass ihr nun etwas dazu gelernt und einen kleinen Einblick zum Thema Accessibility erhalten habt.

 

 

Michel Elias

Informatiker

3. Lehrjahr

Frontend Developer