Grafische Gestaltung
Die grafische Gestaltung hat einen grossen Einfluss auf die Barrierefreiheit einer Webseite. Wenn Textgrössen oder Farben ungünstig gewählt werden, kann der Inhalt von Personen mit Behinderungen nur mühsam oder gar nicht wahrgenommen werden.
Trennung von Inhalt und Design
Eine der wichtigsten Grundregeln ist die Trennung von Inhalt und Design. Dazu ermöglicht HTML die Verwendung von Stylesheets (CSS). So können alle grafischen Aspekte, wie Typographie, Layout und Farbgestaltung vom eigentlichen Inhalt getrennt werden. Dies bringt aus Sicht der Barrierefreiheit folgende Vorteile:
- Flexible Anpassung auf individuelle Bedürfnisse
- Flexible Schriftgrössen und Layout
- Einfach austauschbare Darstellung
Gute Farbkontraste
Damit Texte gut gelesen werden können, sollte der Kontrast zwischen Vorder- und Hintergrund genügend gross sein. WCAG schlägt dafür folgende Kontrastverhältnisse vor:
- Mindestens 4.5:1 für Schriften kleiner als 18pt (Level AA)
- Mindestens 3:1 für Schriften grösser als 18pt (Level AA)
Falls Sie ein Hintergrundbild verwenden, sollte der Kontrast der Schrift auch mit ausgeschaltetem Hintergrundbild noch genügend gross sein.
Relative Textgrössen
Vermeiden Sie absolute Textgrössen in Pixel (px). Verwenden Sie stattdessen eine relative Vermassung in em. Ein em entspricht der Breite des Buchstabens M bei normaler Schriftgrösse.
h1 { font-size: 2em; }
Nicht nur Textgrössen, sondern auch Breiten und Höhen von Elementen sollten durch em vermessen werden, damit sie sich bei einer Änderung der Textgrösse in der Grösse automatisch anpassen.