Barrierefreiheit (Web Accessibility)
Barrierefreie Webseiten bedingen einen klar strukturierten internen Aufbau des (X)HTML-Quellcodes und der angefügten CSS-Stylesheets. Zusätzlich müssen einzelne Maßnahmen gesetzt werden, um z.B. sehbehinderten Menschen den Zugang zu Ihren Internetangeboten zu ermöglichen. Nachfolgend finden Sie einige wichtige Regeln für barrierefreies Webdesign, detaillierte Guidelines sind bei der W3C-WAI nachzulesen. Tools zur Evaluierung finden Sie hier.
Allgemeine Regeln
- Inhalte klar strukturieren, Überschriften immer mit <hX>-Tags auszeichen, Absätze mit <p>-Tags
- Hervorhebungen nie durch Farben oder <span>-Tags, sondern durch Attribute (fett, Kapitälchen, Symbol, Zusatzerklärung, etc.)
Links/Navigation
- "Sprechende" Linkbezeichnungen
- Navigation mit TAB-Taste muss möglich sein, d.h. tabindex-Tag einsetzen
- Bei angerissenen Texten nicht mit "lesen Sie mehr..." verlinken sondern mit "..mehr zum Beitrag über Thema X", alternativ dazu mit title-Attribut Link genauer erklären
- Öffnen im neuen Fenster innerhalb des title-Tags ankündigen
- Tastaturkürzel vergeben durch accesskey-Attribut, Shortcuts dokumentieren mit Hinweis auf Browser(in)kompatibilitäten
- JavaScript-Menüs sind problematisch (ausklappbare Menüs)
- Bei Menüs Texte statt grafischer Buttons implementieren (Skalierbarkeit!)
- Gruppieren von Navigationselementen, Strukturierung mit <ul>/<li>-Elementen
- keine Farben zur Hervorhebung, sondern Symbole, Textformatierung, Randstärke
- Unsichtbare Sprungmarken problematisch, display:none reicht nicht aus, <dfn>-Element verwenden um Hinweis zu geben, wo man gerade ist
Grafische Elemente
- Alternativtexte verwenden (alt-Tags) mit möglichst kurzer Bildbeschreibung, für Detailbeschreibung Langtext (longdesc-Attribut) verwenden ("Schmuckgrafiken" mit alt="" versehen)
- keine transparenten Grafiken (für Layout gern benutzt)
- keine imagemaps verwenden
Tabellen
- Tabellenlayouts sind verpönt, hier mit <div>-Tags arbeiten
- Sinnvolle Tabellenbeschriftungen, korrekte Bezeichnung von Datentabellen (<th abbr="text" ...)
- Zusammenfassung nötig (<table summary="Hier finden Sie...)
Frames
- wenn Frames absolut notwendig sind, dann mit sinnvollen Bezeichnungen versehen ("Navigation Hauptmenü", etc.), noframes Tag nutzen
Text
- Animierte Texte mit Alternativtext versehen
- Deutliche Unterscheidbarkeit von Text- und Hintergrundfarben
- Schriftgrößen nicht in Punkt-Einheiten definieren (relative Angaben!)
Formulare
- Bedienbarkeit nur mit Tastatur muss möglich sein
- Beschriftung der Felder (label) in unmittelbarer Nähe des Eingabefeldes
Sprache
- einfache kurze Sätze, deutliche Begriffe bevorzugt, kurz und prägnant
- bei Vorkommen von fremdsprachigen Wörtern im Text mit <span lang="en" xml:lang="en"... auszeichnen
Acronyme/Abkürzungen
- das erste Mal ausschreiben <abbr title="..Detailbeschr....">FQDN...
- optisch hervorheben mit z.B. abbr[title] { border: none; color: ...
- Glossar erstellen und darauf verlinken
31.07.2009 15:28
