Barrierefreie Webseiten
Barrierefreiheit meint einen umfassenden Zugang und uneingeschränkte Nutzungschancen aller gestalteten Lebensbereiche. Dazu gehört ebenfalls eine uneingeschränkte Teilhabe an Web-Angeboten von Menschen mit einer Beeinträchtigung, gegebenenfalls unter Zuhilfenahme assistiver Technologien. Erfahren Sie, worauf bei Web-Angeboten besonders geachtet werden sollte, damit sie von Menschen mit Beeinträchtigung gut genutzt werden können! Dieser Beitrag richtet sich vor allen an die Verantwortlichen für die redaktionellen Inhalte von Schul-Homepages.
Richtlinien für die Gestaltung von Web-Angeboten
Der Grundgedanke barrierefreier Webseiten ist, Informationen je nach den Bedürfnissen der Nutzenden auf vielfältige Art und Weise (Audio, Video, Text, Einfache Sprache, Gebärdensprache) zur Verfügung zu stellen. Zudem muss auch die technische Seite wie eine einfache Navigation oder ausreichende Kontraste berücksichtigt werden, so dass Websites mithilfe eines Screenreaders („Bildschirmvorleser“) erfasst werden können. Barrierefrei heißt also, dass Webseiten intuitiv bedienbar sind und ihre Inhalte von allen Endgeräten - Desktop-PCs, Laptops, Smartphones und Tablets – nutzungsfreundlich dargestellt werden.
Die barrierefreie Gestaltung von Internetauftritten orientiert sich dabei an den Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, genau: WCAG), einem internationalen Standard, der in der Europäischen Union für öffentliche Stellen verbindlich ist. Die vier Prinzipien Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit der WCAG beinhalten eine Vielzahl an Richtlinien und Erfolgskriterien, die sich alle technisch überprüfen lassen.
Die vier Prinzipien der WCAG
Textalternativen wie Sprachausgabe, Symbole, einfachere Sprache
Medienalternativen wie Audio, Video, Untertitel, Gebärdensprachfilme
anpassbares Layout ohne Informationsverlust
Farben und Kontraste bei Grafiken, Texten und Bedienelementen
Tastatureingabe (auch mobil) möglich, keine Tastaturfallen
Sichtbarer Fokus und korrekte (Fokus-)Reihenfolge beim Navigieren
Aussagekräftige Beschriftungen z. B. für Linktexte und Bedienelemente
anpassbare Zeiteinteilung (kein Timeout z.B. beim Eingeben von Passwörtern, etc.)
Übersichtliche Gestaltung
Konsistente und einfache Navigation
Inhalte lesbar und verständlich, vereinfachte oder Leichte Sprache
Hilfestellung und Fehlererkennung bei Eingaben wie z. B. bei Formularen
Maximierung der Kompatibilität mit Software und assistiven Techniken
Korrekte Syntax im Webseiten-Code: es wurde z.B. darauf geachtet, dass keine doppelten IDs vergeben wurden oder falsche Verschachtelungen innerhalb des Codes verwendet wurden
Korrekte Semantik im Webseiten-Code wie z.B. die Beschriftung von Bedienelementen mit Name, Rolle und Wert oder die Verwendung von Aria-Attributen, die die Auslesbarkeit durch Screenreader ermöglicht
Obwohl Schulen von einer grundsätzlichen Verpflichtung zur barrierefreien Gestaltung ihrer Homepage ausgenommen sind, wird ihnen empfohlen, ihre Internetauftritte gemäß den beschriebenen Richtlinien zu gestalten. Öffentliche Stellen sind hingegen verpflichtet, die Europäische Harmoniserte Norm EN 301 549 einzuhalten, die sich eng an den schon erwähnten Web Content Accessibility Guidelines (WCAG) orientiert.
Die wichtigsten Kriterien für gutes Web-Design
Zusätzliche Informationen zu Bildern und Grafiken als Alternativtext
Alternativtexte (auch Alt-Texte genannt) dienen, insbesondere für Menschen mit Einschränkungen im Bereich des Sehens sowie mit kognitiven Beeinträchtigungen, der Beschreibung von digitalen Bildern und Grafiken und können beispielsweise mithilfe eines Screenreaders erfasst und vorgelesen werden. Im Gegensatz zu Bildunterschriften, die gewöhnlich der sichtbaren Benennung und Nummerierung von Abbildungen fungieren, handelt es sich bei Alternativtexten um zusätzliche Informationen, die Bedeutung und Kontext von Bildern und Grafiken beschreiben und einen gleichwertigen Ersatz darstellen sollen. Alternativtexte sollten nur Informationen beinhalten, welche einen Mehrwert darstellen. Keinesfalls sollten Sie den Dateinamen wiederholen oder für reine Schmuck-Bilder verwendet werden. Hier setzt man einen sogenannten leeren ALT-Tag (alt=““).
Textinhalte optimal darstellen - Schriftart, Abstände und Kontrast
-
Schriftarten
Grundsätzlich gilt es auf eine serifenlose und skalierbare Schrift zu achten. Hervorhebungen von Textstellen sollten durch Fettdruck geschehen, Kursivdruck und Unterstreichungen sollten vermieden werden.
Geeignete Schriftarten sind z. B.: Atkinson Hyperlegible, Lexend oder Open Dyslexic
-
Kontrast
Die Schrift sollte sich deutlich vom Hintergrund abheben, so dass keine Informationen aufgrund einer Sehbehinderung (Sehschwäche oder Rot-Grün-Blindheit) oder durch Gegenlicht verloren gehen.
Den optimalen Kontrast und somit die beste Leserlichkeit weist schwarze Schrift auf weißem Hintergrund auf.
Heller Text auf dunklem Hintergrund wird als Negativtext bezeichnet und erfreut sich aktuell steigender Beliebtheit als sogenannter Dark-Mode.
Bei der Darstellung von farbigen Hintergründen liegt die Untergrenze beim Kontrastverhältnis zum Text bei
4,5:1 für Schriftgrößen unter 18 Punkt bzw. fetter Schritt unter 14 Punkt
3:1 für Schriftarten ab 18 Punkt bzw. ab 14 Punkt bei fetter Schrift
Zum Überprüfen des Kontrastverhältnisses können Sie das Online-Tool WebAIM direkt über den Browser aufrufen oder das Programm „Colour Contrast Analyser” installieren.
-
Textabstände
Generell ist es notwendig den Zeilenabstand mit zunehmender Zeilenlänge ebenfalls zu vergrößern, was dem Auge bzw. Gehirn insbesondere beim Auffinden der nächsten Zeile hilft.
Zum schnelleren Erfassen und zum Verständnis des Textes sollte der Inhalt in Absätze strukturiert und durch Überschriften zur inhaltlichen Beschreibung von Textabschnitten gegliedert werden.
Navigation
Um die Bedienbarkeit einer Webseite zu erleichtern, ist sowohl eine Unterstützung beim Navigieren als auch zum Auffinden und Bestimmen von Inhalten hilfreich. Insbesondere muss eine Navigation ohne Maus, lediglich mittels Tastatur und Tab-Taste gewährleistet sein.
Grundsätzlich sollten Webseiten über einen Titel verfügen, der Inhalt und Zweck beschreibt sowie Überschriften und entsprechende Beschriftungen aufweisen. Diese Merkmale unterstützen die Navigation mit einem Screenreader.
-
Hilfestellung beim Ansteuern von Elementen
Bedienelemente wie Buttons, Icons, Menüpunkte, Formular- und Textfelder, Links (mit aussagekräftiger Zielbeschreibung) sollten, besonders auch für die mobile Nutzung, mühelos und mittels Tastaturbedienung mit sichtbarem Fokus und ohne Maus erreichbar sein.
Dafür sind eine entsprechende Größe (Empfehlung der WCAG: mindestens 44 x 44 CSS-Pixel) sowie eine technische Bezeichnung (title-Attribut setzen) zu wählen.
-
Hilfestellung bei der Eingabe
Im Zusammenhang mit User-Eingaben, wie z. B. beim Ausfüllen von Formularfeldern, sollten entsprechende Hilfestellungen in Form von Beschriftungen oder Anleitungen vorliegen und auch eine Validierung von Eingaben (z. B. Fehlererkennung, wenn das „@“-Zeichen bei der E-Mail-Eingabe vergessen wird) vorgenommen werden. Vielfältige Unterstützungen dienen der Fehlervermeidung bzw. rechtzeitigen Korrektur.
-
Strukturelle Navigation
Neben der einfachen Navigation auf Webseiten mit Tastatur und Tab-Taste sollen zur strukturellen Navigation auch nur bestimmte Bereiche einer Seite per Tastatur angesteuert werden können.
Zur Kennzeichnung solcher Seitenbereiche (z. B. Suche, Menü) existieren für HTML semantische Elemente, sogenannten ‚landmark roles‘ nach ARIA. Mithilfe dieser strukturellen Navigation kann über die Strukturmerkmale einer Webseite navigiert werden und Bereiche können übersprungen werden. Beispielsweise ist es Screenreadern damit möglich, direkt zur nächsten (oder vorherigen) Überschrift, zum nächsten Formularelement etc. zu springen. Beispiele:
<div role=navigation“ aria-label=“Main menu“>
role=“search“ (Suche)
role=“main“ (inhaltliche Hauptbereich)
Content-Management-Systeme
Content-Management-Systeme (CMS) werden vor allem zum Betreiben von Webseiten eingesetzt und dienen der gemeinschaftlichen Erstellung, Bearbeitung, Organisation und Darstellung von Inhalten (wie Texte, Bilder, Audio, Video). Sie eignen sich grundsätzlich zur Gestaltung barrierefreier Webauftritte nach den vorgestellten WCAG-Richtlinien.
Entscheidend ist, dass eine geeignete und Barrierefreiheit unterstützende Layout-Vorlage (Theme bzw. Template) ausgewählt wird mit der sich eine sogenannte „responsive“ Webseite gestalten lässt. Eine responsive Webseite hat die Eigenschaft, dass sie für jedes Endgerät (von Smartphone über Tablet bis Desktop-Computer) optimal erscheint. Layout-Vorlagen sorgen außerdem für ein konsistentes Design der Homepage bzgl. Schriftart(en), Farbe, Größe etc.