Barrierefreie Webseiten: Worauf Sie achten können

Gesetzliche Hintergründe für die Einhaltung von Anforderungen der Barrierefreiheit haben wir im ersten Teil der Artikelserie kurz vorgestellt. Bitte bedenken Sie, dass die Einhaltung dieser Anforderungen die Benutzbarkeit (Usability) Ihrer Webseite für alle Besuchende merklich erhöht. Manche Personen können nur mit zusätzlichen Hilfsmitteln, wie der Tastatur oder zusätzlicher Vorlesesoftware (sogenannte Screenreader), in Ihrer Seite navigieren oder den Inhalt erfassen. Erleichtern Sie die Verwendung derartiger Werkzeuge, indem Sie nachstehende Regeln beachten:

1. Nutzen Sie TUCAL und die vorgegebenen Funktionen bzw. Module (Visitenkarten, Social-Media-Einbettung, Bildergalerien, …): Wir kümmern uns um die Barrierefreiheit des Webseitenrahmens und aller Elemente, die mithilfe der vorgegebenen Funktionen und Module erzeugt werden. Vorteil: Bei einer Aktualisierung oder Anpassung an neue Anforderungen, werden diese Änderungen global wirksam und Sie müssen sich nicht um das Angleichen Ihres Codes kümmern.
2. Achten Sie auf eine sinnvolle Strukturierung der Webseite: Verlassen Sie die aktuelle Menüstruktur nicht über einen Menüpunkt, sondern nutzen Sie in diesem Fall einen Link im Seiteninhalt oder einen Verweis unter dem bestehenden Menü.
3. Verwenden Sie valides HTML5 (wenn Sie selbst Code schreiben und nicht den grafischen TUCAL-Editor im Web-File-Manager benutzen): Für den hinter einer Webseite stehenden HTML-Code gibt es Standards. Ihre Einhaltung trägt nicht nur dazu bei, dass Inhalte in den unterschiedlichen Browsern wunschgemäß dargestellt werden, sondern auch, dass Screenreader korrekt arbeiten können. Die verschiedenen HTML-Elemente (Tags) erfüllen bestimmte Aufgaben und sind nicht beliebig schachtelbar. Achten Sie darauf, dass Sie die Elemente Ihrer Bedeutung entsprechend verwenden und öffnende Tags korrekt geschlossen werden. Fehler im Code sind nicht immer im Browser ersichtlich, da diese den ein oder anderen Schnitzer verzeihen. Darüber kann wiederum der Screenreader stolpern, was zu Verwirrung bei der nutzenden Person führt. Die Tag-Struktur des HTML-Codes bietet das Gerüst für die Navigation mit unterstützenden Technologien und ermöglicht, von Überschrift zu Überschrift oder von Absatz zu Absatz zu navigieren. Schließen Sie den Absatz beispielsweise, bevor Sie eine Liste (<ul></ul>, <ol></ol>, <dl></dl>) beginnen. Ob Ihr Code korrekt ist, können Sie prüfen.
   → Nutzen Sie hierfür beispielsweise den W3C Markup Validation Service, das Plugin „HTML-Validator“ im Firefox (geht auch bei zugriffsbeschränkten Seiten) sowie den Button „Barrierefreiheit prüfen“ im TUCAL-Editor.
4. Nutzen Sie Absätze: Schließen Sie diese in <p></p> ein – <div></div> hat keine eigenen Eigenschaften und ist bedeutungslos für Screenreader. Richten Sie Ihren Text am Rand aus, vermeiden Sie Blocksatz, da er für Menschen mit Sehschwäche die Lesbarkeit beeinträchtigt.
5. Gliedern Sie Ihre Webseite sinnvoll: Setzen Sie Überschriften ein und nutzen Sie hierfür das entsprechende HTML-Element (<h1/>, <h2/>, <h3/>, …) statt eine reine Auszeichnung durch Farbe oder Schriftstärke. Beachten Sie die Einhaltung der Überschriftenhierarchie. Auf eine h1-Überschrift sollte also keine h3-Überschrift folgen. Ist Ihnen die Schrift der zu verwendenden Stufe zu groß, können Sie durch die Verwendung der entsprechenden Klasse (oder eigener CSS-Festlegungen) den Stil der Überschrift anpassen: <h2 class="h4">Überschrift 2</h2> hat dann beispielweise die erforderliche Hierarchiestufe, wird aber im Schriftbild wesentlich kleiner dargestellt.
6. Vermeiden Sie Leerzeilen/leere Absätze und Umbrüche (<br>): Leere Absätze und Zeilen werden vom Screenreader vorgelesen. Wollen Sie den Abstand zwischen zwei Absätzen vergrößern, nutzen Sie hierfür die Anpassung über CSS.
7. Nutzen Sie Tabellen nur für die Anordnung von Daten: Tabellen dienen nicht der optischen Inhaltsgestaltung, sondern der Präsentation von Daten. Wollen Sie ein mehrspaltiges Layout erzeugen, verwenden Sie bitte – auch im Hinblick auf die Mobiltauglichkeit – das Grid-System.
8. Zweck und Ziel eines Links sollen aus dem Link-Text oder Kontext ersichtlich sein: Beim Erfassen des Links sollte klar sein, wohin er führt und was sich dahinter verbirgt, bei Downloads ist die Angabe des Formats sinnvoll. Vermeiden Sie möglichst die Angabe der URL im Link-Text (der Text zwischen <a href=""> und </a>), da der Link-Text so vorgelesen wird, wie er da steht. Versuchen Sie auch, auf das gern verwendete „Informationen finden Sie <a href="…">hier</a>.” zu verzichten und beschreiben Sie stattdessen genauer den Zweck und das Ziel des Links.
9. Nutzen Sie Listen für Aufzählungen, keine Anstriche und Zeilenumbrüche: Je nach Zweck (Aufzählung, Schrittfolge, Definitionen) bietet HTML Elemente für Listen (<ul/>, <ol/>, <dl/>) an. Bitte verwenden Sie diese, damit Screenreader-Nutzerinnen und -Nutzern in diesem Fall vorgelesen wird, dass eine Liste mit n Elementen folgt.
10. Schreiben Sie sinnvolle (nicht zu lange) Alternativtexte für Bilder: Inhalte, die der Screenreader nicht erfassen kann, benötigen eine zusätzliche textuelle Beschreibung. Bei Bildern ist dies der sogenannte Alternativtext (<img alt="" …>). Denke Sie bei der Formulierung der Texte vor allem an  die Bedeutung einer Grafik und nicht vordergründig an die Gestaltung. Schreiben Sie also „Logo der TU Chemnitz“ statt „Frontansicht des TU-Gebäudes“ bei der Verwendung der Logo-Grafik. Beachten Sie, dass Grafiken, die nur dekorativen Zwecken dienen (beispielsweise schmückende Headerbilder), einen leeren Alternativtext erhalten (alt=""). Details finden Sie in unserem Leitfaden.
11. Achten Sie auf ausreichend Kontrast zwischen Hinter- und Vordergrund: Mindestens 4,5:1 sind für die Konformitätsstufe AA (der WCAG) erforderlich. Prüfbar ist dies beispielsweise mit dem Firefox-Plugin „WCAG Color Contrast Checker“.
12. Formulieren Sie Anweisungen, Fehlermeldungen und Erklärungen klar und eindeutig: Statt „Bitte korrigieren Sie.” geben Sie also an, welche Werte auf welche Weise zu ergänzen sind.
13. Audio- und Video-Inhalte benötigen entsprechende Alternativen: Bieten Sie eine Textalternative für Audio bzw. eine akustische oder textliche Alternative für Videos an.
14. Denken Sie an die Darstellung Ihrer Webseite an Mobilgeräten: Hier sollte eine einspaltige Ansicht ohne horizontales Scrollen möglich sein. Das Gridsystem und spezielle Klassen (bspw. class="img-responsive" für Bilder) unterstützen Sie dabei.

Die Liste zu beachtender Hinweise für die Erstellung barrierefreier Webseiten ist nicht vollständig. Wir haben an dieser Stelle insbesondere Punkte aufgeführt, für die uns am häufigsten Schwächen auf den Webseiten der TU Chemnitz begegnet sind. Über den Rahmen der Webseitenstruktur werden viele Vorgaben bereits berücksichtigt. Den Webautoren und -autorinnen bleibt dennoch bei der Inhaltserstellung einige Verantwortung für eine barrierefreie Gestaltung. Verschiedene Werkzeuge unterstützen Sie bei der Überprüfung der Webseite und bieten automatische Tests an. Sie sind eine Hilfe, aber kein Allheilmittel und werden Inhalt des nächsten Artikels zum Thema Barrierefreiheit sein.

Sie haben Hinweise oder Fragen zum Thema? Schreiben Sie uns an: webmaster@tu-chemnitz.de