Barrierefreiheit/Webseiten zugänglich gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Grundvoraussetzungen für barrierefreies Webdesign sind bei geeignetem semantischem und validem HTML bereits gegeben. Damit Webseiten benutzerfreundlich und für alle zugänglich sind, sollten folgende Punkte besonderes Augenmerk verdienen:

Inhaltsverzeichnis

[Bearbeiten] Aufbau der Webseite

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"

[Bearbeiten] Struktur und Semantik

Richtige Semantik ist für unterstützende Software von zentraler Bedeutung. Diese ist in der Lage, z.B. auf der Basis von hierarchischen Überschriften oder Listen zusätzliche Navigationsmöglichkeiten bereitzustellen. Man muss also für barrierefreies HTML vor allem eine kluge Entscheidung über den Elementvorrat der gewählten HTML-Version treffen.

  • Im logischen Fluss sollte der Hauptinhalt vor den Beilagen stehen.
  • Skiplinks im Head sollten den Hauptinhalt schnell erreichbar machen und lange Navigationsmenüs überspringen.
  • Abkürzungen sollten mittels abbr aufgelöst werden.


[Bearbeiten] Menüs und Navigationen

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

[Bearbeiten] Tastatur-Shortcuts

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.

[Bearbeiten] CSS

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!
  • Mittels :hover formatiert man Elemente, die mit der Maus überfahren werden. In den meisten Fällen sollte eine mindestens gleich deutliche Hervorhebung auch für :focus angegeben werden, damit beim Durchtabben einer Seite die Position des Fokus deutlich erkennbar ist.
  • Die Tab-Reihenfolge sollte nachvollziehbar sein.
  • 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.
  • Zur verwendeten Hintergrundfarbe sollte jeweils immer auch eine kontrastreiche Textfarbe angezeigt werden. Wenn ein background-image definiert wird, sollte auch die background-color definiert werden, denn ein Bild könnte fehlen.
  • Nicht alle Browser unterstützen modernstes CSS. Es ist zu sicherzustellen, dass bei fehlender Interpretation des CSS das Verständnis der Seite nicht beeinträchtigt wird.

[Bearbeiten] Javascript

Javascript sollte optimalerweise eine Ergänzung zur progressiven Verbesserung (engl. progressive enhancement) darstellen. Ein Beispiel sei hier die clientseitige Vorvalidierung von Benutzereingaben. Die Ansprüche im Web steigen jedoch, und es entsteht ein Konflikt zwischen der Benutzerfreundlichkeit und der Barrierefreiheit, sobald der Barrierefreiheit in JS-Widgets nicht die gleiche 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.

[Bearbeiten] PDF-Dateien

PDF Files sind populär, um druckoptimiert Erzeugnisse auszuliefern. PDF-Files 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.

[Bearbeiten] Quellen

  1. webaim.org: Keyboard Accessibility
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML