Wann ist ei­ne Web­site bar­rie­re­frei?

Diese Einschränkungen machen die Bedienung einer Website kompliziert:

• Sehbeinträchtigungen: Sehschwäche, Blindheit, Farbsehschwäche, aber auch temporäre Beeinträchtigungen wie eine Operation, Entzündung oder Ähnliches.
• Hörbeinträchtigungen: Schwerhörigkeit, Taubheit, vorübergehende Einschränkung des Hörsinns.
• Motorische Hürden: gebrochene oder fehlende Körperteile oder andere körperliche Einschränkungen.
  

Menschen mit solchen Einschränkungen sind darauf angewiesen, dass die Webinhalte nach gewissen Standards erstellt werden, welche das Erkennen und Bedienen der Elemente erleichtern oder überhaupt erst möglich machen.

Grundlegend für die barrierefreieBedienung einer Website ist eine korrekte Semantik. Das heisst, dass die Inhalte als das ausgezeichnet werden, was sie sind:

• Titel werden als Überschrift formatiert (H1, H2, H3 etc.) und nicht manuell grösser, fett oder andersfarbig gestaltet.
• Aufzählungen, Auflistungen, Absätze, Zitate und so weiter werden als solche definiert und nicht mit Leerschlägen, Umbrüchen oder Ähnlichem erzielt.
• Dialogboxen, Fehlermeldungen etc. werden korrekt ausgezeichnet. Ist das nicht der Fall, werden sie von einem Screen-Reader nicht erkannt und in der Folge nicht vorgelesen. Die bedienende Person hat keine Möglichkeit zu erfahren, weshalb zum Beispiel ein Speichervorgang unterbrochen wurde.
• Dasselbe gilt für Hinweise auf nicht ausgefüllte Felder in Formularen etc. Wenn diese nur farbig markiert, aber nicht kontextbezogen für die Sprachausgabe definiert wurden, liest ein Screen-Reader sie nicht vor. 

• Trennung von Layout und Inhalt. Das Design wird mittels der Layout-Programmierung erstellt und nicht mit Leerzeichen, Umformatierungen, manuellem Platzieren von Bildern oder ähnlichem.
• Kontrastreiche Farben zur leichteren visuellen Erfassung.
• Keine unnötig verschachtelte Navigation.
• Sprechende Linktexte: «zum Smoothie-Rezept» statt «mehr lesen».
• Bilder, Videos, Sound-Embeds etc. sind mit Alt-Attributen versehen. Der Alt-Text wird vorgelesen, wenn das Bild/Video nicht dargestellt werden kann oder soll.
• Responsivität: Die Inhalte sind auf allen Endgeräten gut lesbar und lassen sich auf die Bedürfnisse der User einstellen (Format, Hochkontrastmodus, Zoomtext usw.).
• Die Eingabe ist mittels Tastatur und nicht nur per Maus möglich. Das bedeutet gleichzeitig, dass die Seite auch mit einem Screen-Reader nutzbar ist. Dieser benützt dieselbe Outline und kann so durch die Seite navigieren.

Neben der Bedienung sollte auch die Arbeit an der Website selbst ohne Hürden möglich sein.  

• Der Editor sollte mit der Tastatur bedienbar sein und nicht nur per Maus.
• Das System soll angeben, welcher Text selektiert ist.
• Fehlermeldungen, Dialogmasken und Formulare müssen als solche erkannt und ausgegeben werden.
• Wie im Frontend ist auch hier der Kontextbezug wichtig. Die Meldung «Sitzung abgelaufen» ist wenig hilfreich, wenn nicht mitgeteilt wird, welche Sitzung abgelaufen ist.
• Das CMS soll neben manuellem Drag+Drop auch alternative Eingabemöglichkeiten zum Platzieren von Inhaltselementen bereitstellen.

Die Webprojekte, die wir mit unserem hauseigenen CMS Fuman erstellen, sind grundsätzlich barrierefrei. Beispielsweise sind alle HTML-Elemente  semantisch angeordnet und lassen sich mittels Tastatur ansteuern. Bilder und andere nicht textbasierte Inhalte werden zwingend mit Alternativ-Text (ALT-Attribut) versehen. Die Textschrift ist skalierbar, so dass sie vergrössert werden kann. Starke Kontraste sowie Kontrolle über die Farbe von Schrift und Hintergrund gehören ebenfalls zu den Standardanwendungen.

Auch im Backend ist der Fuman barrierefrei bedienbar. Zusammen mit der Stiftung «Zugang für alle» haben wir das CMS für die barrierefreie Nutzung optimiert und barrierefreie Eingabemöglichkeiten umgesetzt. Menschen mit Sehbehinderungen können Fuman uneingeschränkt verwenden.

Bei der Umsetzung des Frontends orientieren wir uns an folgenden Richtlinien:

• WCAG: steht für «Web Content Accessibility Guidelines». Dies sind die weltweit geltenden Richtlinien des World Wide Web Consortiums für die Entwicklung von Produkten. Sie definieren die grundlegende Zugänglichkeit zu den Inhalten, also die Semantik, die Kontraste und so weiter.
• WAI-ARIA: steht für Web Accessibility Initiative – Accessible Rich Internet Applications. Darin werden die Standards für die Auszeichnung von Formularen etc. definiert.
• Zertifizierung: Auf Wunsch lassen wir Ihr Website-Projekt von der Stiftung «Zugang für alle» zertifizieren.

Mit der Erweiterung «Lighthouse» können Sie Ihren Internetauftritt ganz einfach selber auf Barrierefreiheit testen. Installieren Sie dazu die Erweiterung in Ihrem Browser, gehen Sie auf die Website, welche Sie prüfen wollen, und klicken Sie auf «Report erstellen». Der Wert unter «Accessibility» gibt an, wie gut Ihre Website im Hinblick auf Barrierefreiheit optimiert ist. 

Möchten Sie wissen, wie eine barrierefreie Website aussehen könnte? Dann werfen Sie doch einmal einen Blick auf Inclusion Handicap. Die Seite ist ein Beispiel für eine komplett barrierefreie Website, die wir konzipieren und umsetzen durften.  

Kontaktieren Sie uns, wenn Barrierefreiheit auch für Sie ein Thema ist, sei es für Mitarbeitende oder Ihre Zielgruppe. Gerne analysieren wir Ihre Website und beraten Sie zum Verbesserungspotenzial; sei es für Ihren bestehenden oder einen neuen Internetauftritt.