Inklusives Webdesign – Digitale Barrierefreiheit
Barrierefreiheit geht uns alle etwas an. Und es ist wichtig, dass sie bei Infrastrukturen des öffentlichen Lebens stärker mitgedacht wird. Menschen mit Behinderungen, alte Menschen oder Familien mit Kindern wird durch das barrierefreie Bauen überhaupt ermöglicht, sich frei und unbeschwert wie alle anderen zu bewegen. Das betrifft den Fahrstuhl am Bahnhof, eine automatisch öffnende Tür mit Rollstuhl-Zugang oder das hörbare Signal an der Straßenkreuzung.
Doch nicht nur im physischen Raum sollte Barrierefreiheit eine zentrale Rolle spielen. Auch online sollten alle Menschen in der Lage sein, auf Inhalte, Bilder, Bestellformulare und Informationen jeglicher Art zuzugreifen. Viele Webseiten entsprechen jedoch nicht den Standards des barrierefreien Internets. Ob aufgrund veralteter Technik, unachtsam programmierten Code oder Unwissen auf Seiten der Webseitenbetreiber*innen: Zahlreiche Menschen können das Internet deswegen nicht vollumfänglich nutzen.
Inklusives Webdesign beschreibt im Ansatz das Mitdenken und Implementieren von technischen und gestalterischen Komponenten, die sich entlang bestehender Richtlinien und Empfehlungen für die Umsetzung eines barrierefreien Webauftritts orientieren. Länderspezifische, gesetzliche Rahmenbedingungen wie das Barrierefreiheitsstärkungsgesetz in Deutschland gründen dabei auf die Content Accessibility Guidelines (WCAG), die vom World Wide Web Consortiums (W3C) etabliert wurden. Dieses hat sich als internationaler Standard zur barrierefreien Gestaltung von Internetangeboten herausgebildet und beschreibt vier Prinzipien der digitalen Barrierefreiheit:
Was bedeutet barrierefreies Internet?
Barrierefreies Internet umschreibt so die gestalterische und technische Umsetzung von Web-Angeboten, die Nutzer*innen trotz möglicher Einschränkungen die Bedienung und den Zugang ermöglichen. Die Zielgruppe eines barrierefreien Webangebots ist daher breit gefächert und umfasst nicht nur Menschen mit körperlichen oder geistigen Behinderungen. Genauso kommt es Menschen im hohen Alter oder mit geringerer Medienkompetenz zu gute, wenn Inhalte lesbar und Schriftgrößen verstellbar sind und die Struktur der Seite intuitiv und einfach gehalten ist.
Es gibt zahlreiche Empfehlungen, und Vorgaben , welche das Internet barrierefreier machen. Je nach Art der Einschränkung, werden bestimmte Aspekte dabei relevanter. Denn ist klar, dass Gehörlose andere Anforderungen an die Bedienung einer Website stellen als Menschen mit einer Leseschwäche.
Hierzu hat GOV.UK visuell zusammengefasst, wie die barrierefreie Gestaltung für unterschiedliche Gruppen aussehen kann (auch auf deutsch).
Barrierefreie Programmierung
Unter dem Prinzip der Wahrnehmbarkeit fallen zum Beispiel solche Anpassungen, die Inhalte auf verschiedenen Arten bereitstellen.Visuell wahrgenommene Inhalte wie Texte oder Bilder müssen vorlesbar sein, und im Umkehrschluss Audio- oder Videodateien lesbare Untertitel enthalten. Denn verwenden Menschen mit Sehbeeinträchtigungen sogenannte Screen Reader, mit deren Hilfe Inhalte, klickbare Links und Bilder einer Website hörbar werden. Daher müssen Webinhalte auf technischer Ebene so programmiert werden, dass sie überhaupt vorlesbar sind.
Bezogen auf die Webentwicklung, muss die HTML-Struktur, also das inhaltliche und strukturelle Grundgerüst einer Website , eine logische Hierarchie (Überschrift 1, Überschrift 1.2, Überschrift 2, usw.) und semantische Schreibweise vorweisen, sodass die Navigation per Screen Reader funktioniert. Das finden auch Suchmaschinen gut, da sie hierdurch Webseiten besser auslesen können. Genauso müssen Bilder mit sogenannten Alt-Texten kurz und bündig umschrieben werden, damit Menschen ohne Sehkraft sie erfassen können. Das schließt auch Links und Formularfelder mit ein.
Richtiger Umgang mit Alt-Texten
Wenn Bilder über eine dekorative Funktion hinausgehen, benötigen sie einen Alt-Text. Das hilft nicht nur den eingeschränkten Benutzer*innen Ihrer Seite, sondern verbessert auch den SEO-Score.
Barrierefreie Gestaltung
Neben technischen Entscheidungen sind auch grundlegende Fragen der Gestaltung und der Sprache ausschlaggebend dafür, dass eine Website als barrierefrei gilt.
Farben sind fundamental für die Stimmung und das Gefühl, die beim Besuch einer Website in wenigen Sekunden entstehen. Sie bilden zusammen mit Schriftart, Logos und weiteren Formelementen die Identität der Organisation oder Einzelperson ab, welche sich online präsentiert. Und sie sind auch ein wesentlicher Faktor in der Barrierefreiheit.
Einerseits sollten Farben nie das einzige Merkmal sein, um Inhalte von einander zu trennen. Menschen mit Farbblindheit oder Farbschwäche können einzelne Farben nicht voneinander unterscheiden. Zudem sollten sich Hintergrund- und Vordergrundfarben kontrastreich von einander abheben. Insbesondere bei Schriften muss auf ein ausreichendes Kontrastverhältnis (Contrast Ratio) geachtet werden. Die W3C hat hierzu drei Erfolgsstufen definiert (A, AA, AAA), die mit sogenannten Contrast Checker abgefragt werden können. Je nach Funktion (Text oder Nicht-Text) und Schriftgröße, sind die Stufen AA und AAA die anvisierten Erfolgskriterien.
Hier gibt es eine Reihe von kostenfreien Tools, um die Kombination von Farben zu testen. Für diesen Beitrag habe ich das Tool coolors.co verwendet, es gibt aber noch viele weitere wie achecks.org, webaim.org oder whocanuse.com. Das letztere bezieht sogar unterschiedliche Farbschwächen-Krankheiten mit ein und sensibiliert dadurch für andere Perspektiven auf die eigene Webpräsenz.
Barrierefreie Sprache
Barrierefreie Gestaltung heißt neben einer kontrastreichen Farbauswahl auch, ein leicht verständliches, übersichtliches und intuitives Design zu entwerfen, dass von der Setzung der Inhalte und des Aufbaus der Navigation bis zur Formulierung von Texten reicht. Unter dem Prinzip der Verständlichkeit aufgeführt, gilt es hier eine einfache Sprache zu verwenden, welche auf komplizierte Formulierungen verzichtet und bei Fachausdrücken auf Hilfstexte als Erklärung zurückgreift.
Gerade öffentlichen Stellen sind dazu verplfichtet, ihre Inhalte auch in leichter Sprache zugänglich zu machen. Im Gegesatz zu einfacher Sprache, die keine formellen Regeln folgt, ist die leichte Sprache an ausgewiesene Regeln des Dudens gebunden. Das bedeutet unter anderem: Zeilenumbrüche nach jedem Satz und ein sprachliche Niveau, dass unter der Alltagssprache liegt (Weiterführende Informationen zur Unterscheidung). Dies soll Menschen mit Lernschwierigkeiten und schwächer ausgeprägten Sprachkenntnissen ermöglichen, die Inhalte einer Website besser zu verstehen.
Das richtige CMS: WordPress und Barrierefreiheit
Viele Webseiten basieren heute auf einem Content-Managment System (CMS) , um Inhalte und Design von einander zu trennen. Redakeurinnen und Redakteure können auch ohne IT-Background eigenständig Seiten, Texte und Bilder hinzuzufügen. Gerade deshalb sollte auch bei der Wahl eines CMS-Systems auf die Barrierefreiheit geachtet werden.
WordPress, Drupal, Typo3 oder Shopify: Es gibt unzählige CMS, von Open-Source bis gebührenflichtig, haben sie alle unterschiedliche Einsatzfelder und Vor- wie Nachteile. Für meine Projekte nutze ich ausschließlich WordPress und bin damit nicht alleine. WordPress ist das meistgenutzte CMS der Welt (43,2 % aller Webseiten weltweit basieren auf WordPress). Open-Source, kostenslos und flexible Einsatzmöglichkeiten – vom kleinen Blog bis zur großen Unternehmensseite mit Shopanbindung – WordPress es ein leistungsstarkes CMS.
Aber auch in Puncto Barrierefreiheit hat WordPress in den letzten Jahren viele Grundsteine gesetzt. Das gesamte Backend (Verwaltungsoberfläche der Website) ist für eingeschränkte Benutzer*innen bedienbar. Weiter bietet WordPress standardmäßig die Möglichkeit, Alt-Texte für Bilder zu vergeben, informiert über eine richtige Überschriftenstruktur und verfolgt das Ziel, das gesamte UI (User Interface) und hauseigene Themes vollständig WCAG 2.0 AA konform zu gestalten. Ein eigens dafür ins Leben gerufende WordPress-Barrierefreiheit Team kümmert sich um die beständige Weiterentwicklung und Vermittlung von Best Practices.
Für besondere Anforderungen bietet das WordPress Universum zahlreiche Erweiterungen in Form von Plugins. Zum Beispiel ermöglicht Hurrakify automatisch generierte Hilfstexte bei Fachausdrücken und WP Accessibility lässt Nutzer*innen im Frontend eigenständig Kontrast und Textgröße ändern.
Schlussbemerkungen
VIele Stellschrauben müssen also in Bewegung gesetzt werden , um eine bestehende Website barrierefreier zu gestalten. Leichter ist es, von Beginn ein inklusives Design und eine barrierefreie Struktur als essentiellen Teil des Webdesign mitzudenken. Barrierefreiheit muss als ein Kriterium auf technischer, struktureller, gestalterischer und sprachlicher Ebene gehandhabt werden und nicht bloß als ein nice to have. Den Grundbaustein kann man schon bei der Wahl des CMS legen.
Eine unter den Aspekten der Barrierefreiheit entwickelten Website macht das Weberlebnis dabei für alle besser – denn kontrastreiche Farbpaletten und lesbare Schriften sind auch dann wichtig, wenn die Sonne den Blick auf das Smartphone verdunkelt.