Barrierefreiheit/Webseiten zugänglich gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
● HTML
● CSS

HTML ist schon zu einem großen Teil barrierearm. Block-Elemente nehmen den verfügbaren Raum ein und brechen bei schmalen Viewports in die nächste Zeile um. In den Browser-Stylesheets gibt es schwarze Schrift auf weißem Grund. Man sollte darauf achten, keine zusätzlichen Barrieren durch benutzerunfreundliche CSS-Festlegungen zu errichten.

Damit Webseiten benutzerfreundlich und für alle zugänglich sind, sollten folgende Punkte besonderes Augenmerk verdienen:

HTML[Bearbeiten]

Aufbau der Webseite[Bearbeiten]

Ein Prinzip bei der Umsetzung von Inklusion ist das Setzen auf Konventionen. Im vertrauten Aufbau einer Webseite finden Nutzer Sicherheit und Erfolg.

Beispiele für Konventionen im Webdesign, die sich durchgesetzt haben:

  • Menü oben horizontal
  • Suche oben rechts
  • verlinktes Logo zur Startseite oben links
  • Kontakt-Formular und weitere Kontaktmöglichkeiten hinter dem Menüpunkt "Kontakt"

Struktur und Semantik[Bearbeiten]

Richtige Semantik ist für unterstützende Software von zentraler Bedeutung. Diese gibt z.B. bei Listen die Anzahl der Elemente an oder gliedert eine Webseite auf der Basis von hierarchischen Überschriften. Man muss also für barrierefreies HTML die verfügbaren HTML-Elemente klug einsetzen.

  • Schreiben Sie valides HTML5 beginnend mit dem richtigen Grundgerüst.
  • Im Dokument sollte die Hauptsprache über das lang-Attribut deklariert und die davon abweichenden Textteile mit der entsprechenden Sprache ausgezeichnet werden, damit eine Sprachausgabe erleichtert wird.
  • Verwenden Sie genau ein main-Element, um den Hauptinhalt Ihrer Seite zu kennzeichnen. Im logischen Fluss sollte der Hauptinhalt vor den Beilagen aside stehen.

Menüs und Navigationen[Bearbeiten]

  • Navigationsmenüs sind Listen und sollten semantisch als Listen ausgezeichnet werden.
  • Alle Bedienelemente (z. B. Links und Formularelemente) sollten durch die TAB-Taste ( ) erreichbar sein.
  • Skip-Links im Head sollten den Hauptinhalt schnell erreichbar machen und lange Navigationsmenüs überspringen.
  • Hierarchisch korrekt gesetzte Überschriften stellen zusätzliche Navigationsmöglichkeiten dar.

Tastatur-Shortcuts[Bearbeiten]

Von Tastatatur-Shortcuts ist generell abzuraten, weil es keine Kombinationen gibt, die auf allen Systemen funktionieren und nicht mit Shortcuts von anderen Programmen (z. B. Screenreader) oder den diversen Betriebssystemen kollidieren. Sollte Sie sich entgegen dieser Empfehlung für die Verwendung von Tastatur-Shortcuts entscheiden, beachten Sie unbedingt die Konventionen und vor allem die unterschiedlichen Implementierungen und Konflikte! - Niemand wird nur auf Ihrer Website existierende Shortcuts lernen wollen.[1]
Tastatur-Shortcuts können entgegen der generellen Empfehlung zur Vermeidung in konkreten Projekten aber eine große Hilfe sein. So helfen Sie eingebenden Personen beispielsweise bei der massenhaften Erfassung von strukturierten Daten und sind dann - nicht nur für Menschen mit Behinderung - eine Arbeitserleichterung; hier kann es Sinn machen, auch schwer merkbare Tastatur-Shortcuts zu lernen, die auf dem eingesetzten System funktionieren.

CSS[Bearbeiten]

CSS ermöglicht eine individuelle Gestaltung Ihrer Webseite. Achten Sie dabei aber darauf, dass sie für alle Besucher benutzbar bleibt.

  • Verwenden Sie eine ausreichende Schriftgröße und hohe Kontraste
  • Geben Sie zur verwendeten Hintergrundfarbe jeweils immer auch eine kontrastreiche Textfarbe an. Wenn ein background-image definiert wird, sollte auch die background-color definiert werden, denn ein Bild könnte fehlen.

Responsivität[Bearbeiten]

Achten Sie darauf, dass Elemente nicht durch feste Breiten oder absolute Positionierungen bei mobilen Geräten aus dem Viewport heraus geschoben werden. Optimieren Sie Ihre Website nicht für eine bestimmte Bildschirmbreite! Gerade die Kombination von absoluter Positionierung mit zu großer erforderlicher Breite mindert die Erreichbarkeit des Inhalts.

Bei CSS sind die Besonderheiten von Screenreadern und eventuell unvorhergesehene Browservorgaben zu berücksichtigen:

  • display:none weist den UserAgent an, ein Element nicht darzustellen. Bedenken Sie, dass das Vorlesen von Text eine von vielen möglichen Darstellungsformen ist. Auch Screenreader befolgen die Anweisung die so verborgenen Inhalte nicht auszugeben. Wenn Sie Texte nur optisch verbergen möchten, können Sie diese Elemente aus dem sichtbaren Bildschirmbereich verschieben.
  • Image-Replacement-Techniken dienen in der Regel dazu, Texte als Bild darzustellen. Grundsätzlich sollten Sie Texte immer als Text ausgeben - zahlreiche frei verfügbare Schriften erlauben inzwischen höchst individuelle typographische Gestaltungsmöglichkeiten. Bedenken Sie, dass vor allem Fantasie-Schriften oft schlecht lesbar sind.
Empfehlung: Die Verwendung von Image-Replacement-Techniken ist komplex, eine Lösung, die für alle funktioniert nicht vorhanden. Wenn irgend möglich verzichten Sie darauf!

Fokus[Bearbeiten]

Wann immer Sie die Pseudoklasse :hover einsetzen, verwenden Sie auch die Pseudoklasse :focus um Tastaturbenutzern beim Durchtabben dasselbe Feedback zu geben.

Entfernen Sie nicht den gepunkteten Rahmen, den die Browser um fokussierte Links oder Buttons zeichnen.

Zeigen Sie für Sehende versteckte aber fokussierbare Elemente an, wenn sie den Fokus erhalten.


JavaScript[Bearbeiten]

JavaScript sollte optimalerweise eine Ergänzung zur progressiven Verbesserung (engl. progressive enhancement) darstellen. Ein Beispiel ist hier die clientseitige Vorvalidierung von Benutzereingaben. Die Ansprüche im Web steigen jedoch, und so entsteht ein Konflikt zwischen Benutzerfreundlichkeit und Barrierefreiheit, sobald der Barrierefreiheit in JavaScript-Widgets nicht dieselbe Aufmerksamkeit geschenkt wird.

Beachten Sie:
  • JavaScript sollte nach dem Prinzip des unaufdringlichen (engl. Unobstrusive) Javascript eingesetzt werden. Das bedeutet:
    • Scriptcode sollte in eigene Dateien ausgelagert werden.
    • Eventhandler sollten dynamisch an Elemente gehängt werden.
    • JS-Widgets wie z.B. Lightboxes sollten ebenso mit der Tastatur bedienbar sein.
  • Weil JavaScript Inhalte an einem Punkt X verändern kann, deren Veränderung an einem Punkt Y verursacht wurde, sollte beachtet werden:
    • Der Anwender bemerkt diese Veränderung nicht sofort oder überhaupt nicht. Er erwartet jedoch irgendeine ersichtliche Veränderung. Führen Sie den Anwender zum veränderten Inhalt.

PDF-Dateien[Bearbeiten]

PDF-Dateien sind populär, um druckoptimiert Erzeugnisse auszuliefern. Sie werden jedoch in einem Plugin oder in einer externen Applikation geöffnet und stellen somit für den Anwender einen überraschenden Ausstieg aus seiner gewohnten Arbeitsumgebung dar.

  • Markieren Sie solche Links besonders, die PDF-Files ausliefern.
  • Geben Sie bei PDF-Links auch die Dateigröße an, damit ein Benutzer entscheiden kann, ob er oder sie das Downloadvolumen vielleicht vermeiden möchte.
  • Auch bei PDF-Files gilt es, Richtlinien zur Barrierefreiheit zu beachten. Mehr dazu siehe: www.adobe.com: Creating Accessible Adobe PDF Files.


Quellen[Bearbeiten]

  1. webaim.org: Keyboard Accessibility