Responsive Design, SEO (Search Engine Optimization), UX/UI-Design (Benutzererfahrung/-führung) sind gängige Begriffe im Webdesign - was jedoch bei der Website-Entwicklung oft vergessen geht ist die Accessibility. Der Begriff Accessibility (dt. Zugänglichkeit, Barrierefreiheit) bezieht sich ursprünglich auf die barrierefreie Gestaltung von baulichen und physischen Massnahmen. Inzwischen umfasst er jedoch auch die barrierefreie Gestaltung von Webseiten (Web Accessibility). Was im Baugewerbe mittlerweile gang und gäbe ist, wird im Webbereich von vielen noch vernachlässigt behandelt.
Barrierefreiheit umfasst sowohl Menschen mit und ohne Behinderungen als auch Nutzerinnen und Nutzer mit technischen Einschränkungen wie zum Beispiel Textbrowser oder PDAs (Personal Digital Assistant). Wie verschiedene Menschen Webseiten wahrnehmen, kann verschiedene Gründe haben – sowohl altersbedingte wie fortgeschrittene Sehschwächen oder bereits angeborene kognitive und motorische Beeinträchtigungen.
Warum Accessibility?
Um die Bedeutung der Barrierefreiheit im Internet zu verstehen, muss man sich die Verbreitung von Behinderungen vor Augen führen. Nach Angaben der Weltgesundheitsorganisation (WHO) leben mehr als eine Milliarde Menschen, d. h. etwa 15 % der Weltbevölkerung, mit irgendeiner Form von Beeinträchtigung. Schon allein diese Zahl unterstreicht, wie wichtig es ist, ein integratives digitales Umfeld zu schaffen.
Obwohl Accessibility bei Google kein direktes Ranking-Kriterium ist – es wird eher Wert auf die Nutzererfahrung gelegt – kann deren Anwendung indirekt zu einem besseren Ranking führen. Websites, die auch die Barrierefreiheit berücksichtigen, bieten in der Regel ein besseres Nutzererlebnis, was indirekt zu einem höheren Engagement, niedrigeren Absprungraten und einer besseren SEO-Leistung führt.
Viele weitere Gründe sprechen ebenso dafür, eine Website barrierefrei zu gestalten.
Gleichberechtigter Zugang für alle Nutzenden: Eine barrierefreie Website ermöglicht es Menschen mit Behinderungen oder Einschränkungen, die Inhalte problemlos zu nutzen. Das fördert digitale Inklusion und stellt sicher, dass niemand ausgeschlossen wird.
Verbesserte Benutzerfreundlichkeit: Barrierefreie Gestaltung macht die Website für alle Nutzerinnen und Nutzer intuitiver und leichter zu bedienen. Klare Struktur, deutliche Navigation und gut lesbare Inhalte sind für jeden von Vorteil.
Grössere Reichweite und mehr Zielgruppen: Barrierefreiheit erschliesst eine breitere Nutzerbasis, darunter ältere Menschen, Nutzerinnen und Nutzer mit temporären Einschränkungen (z. B. bei Verletzungen), und Personen, die mobile oder alternative Geräte verwenden.
Suchmaschinenoptimierung (SEO): Barrierefreie Websites sind oft besser für Suchmaschinen strukturiert. Klare Überschriften, beschreibende Alt-Texte und semantische HTML-Elemente verbessern die Auffindbarkeit in Suchmaschinen.
Rechtliche Vorgaben: In vielen Ländern sind barrierefreie Websites durch Gesetze vorgeschrieben. Websites, die nicht zugänglich sind, könnten rechtlichen Konsequenzen ausgesetzt sein.
Positive Markenwahrnehmung: Eine barrierefreie Website zeigt, dass ein Unternehmen sich für Inklusion einsetzt. Das stärkt das Image und die Wahrnehmung als sozial verantwortliche Organisation.
Umsetzung
Nachdem das Warum geklärt ist, stellt sich nun die Frage, wie Accessibility im Webdesign konkret umgesetzt werden kann. Dies lässt sich grob in zwei Teile unterteilen – gestalterisch und inhaltlich.
1. Gestalterisch
Kontraste und Farben:
Ein hoher Kontrast zwischen Text und Hintergrund ist entscheidend für die Lesbarkeit – besonders für Menschen mit Sehschwächen. Optimal sind Farbkontraste mit einem Verhältnis von mindestens 4,5:1 für normalen Text und 3:1 für grösseren Text. Dies verbessert auch die Sichtbarkeit bei schlechten Lichtverhältnissen.
Farben sollten nicht als alleinige Informationsträger genutzt werden (z. B. grün für „richtig“ und rot für „falsch“). Farbsehschwächen (z. B. Rot-Grün-Schwäche) können dazu führen, dass Farben nicht wie beabsichtigt wahrgenommen werden. Stattdessen ist es hilfreich, visuelle Hinweise wie Symbole oder Beschriftungen hinzuzufügen.
Tastaturfreundliche Navigation:
Die gesamte Website sollte per Tastatur navigierbar sein, da viele Menschen, darunter solche mit motorischen Einschränkungen, keine Maus verwenden. Der Fokus sollte logisch und fliessend zwischen den Elementen wechseln können.
Fokus-Indikatoren (z. B. Rahmen um das aktive Element) helfen Nutzerinnen und Nutzern, den aktuellen Fokuspunkt auf der Seite zu erkennen. Dies ist besonders wichtig, wenn interaktive Elemente wie Links oder Formulare angesteuert werden.
Flexible und responsive Layouts:
Ein responsives Design stellt sicher, dass Inhalte auf verschiedenen Geräten und Bildschirmgrössen gut angezeigt werden – vom grossen Desktop-Monitor bis zum kleinen Smartphone-Bildschirm.
Verwende relative Masseinheiten für Schriftgrössen (wie em oder rem), sodass Texte sich bei Zoom oder Änderungen der Bildschirmeinstellungen anpassen. Dies ermöglicht es Nutzerinnen und Nutzern, die Anzeige ihren Bedürfnissen entsprechend zu vergrössern, ohne dass Inhalte verloren gehen oder unlesbar werden.
ARIA-Rollen und -Attribute:
Die Verwendung von ARIA (Accessible Rich Internet Applications) ermöglicht es, Informationen und Interaktionen für Screenreader verständlich zu machen. Beispiele sind aria-live für Bereiche mit dynamischen Inhalten, sodass Screenreader diese Änderungen ansagen.
ARIA-Rollen (z. B. role="button" für interaktive Elemente) geben zusätzliche Informationen über die Funktion von Elementen. Allerdings sollte ARIA nur dann eingesetzt werden, wenn keine native HTML-Lösung vorhanden ist, um Verwirrung zu vermeiden.
2. Inhaltlich
Strukturierte und semantische HTML-Nutzung:
Die Verwendung von semantischen HTML-Elementen (z. B. <header>, <main>, <footer>, <nav>) bietet eine logische Struktur, die sowohl Screenreader als auch Suchmaschinen besser interpretieren können.
Überschriften (<h1>, <h2>, usw.) sollten in einer hierarchischen Reihenfolge verwendet werden, um die Gliederung der Seite klar darzustellen. Dies erleichtert es Nutzern mit Screenreader, die Struktur zu verstehen und durch die Inhalte zu navigieren.
Alt-Texte für Bilder:
Alt-Texte beschreiben den Inhalt von Bildern und sind entscheidend für Nutzerinnen und Nutzer, die Screenreader verwenden. Ein prägnanter Alt-Text sollte die Bedeutung des Bildes erfassen und Nutzenden ermöglichen, den Bildinhalt zu verstehen, auch wenn sie es nicht sehen können.
Dekorative Bilder, die keinen zusätzlichen Inhalt zur Seite beitragen, sollten mit einem leeren Alt-Text versehen werden (alt=""), damit Screenreader sie ignorieren und die Nutzenden nicht mit unnötigen Details überfluten.
Klare und einfache Sprache:
Die Texte sollten leicht verständlich sein und klare Anweisungen oder Erklärungen enthalten. Dies hilft Nutzerinnen und Nutzern mit kognitiven Einschränkungen oder geringer Sprachkenntnis, die Inhalte besser zu verstehen.
Wenn komplexe Begriffe notwendig sind, kann eine kurze Erklärung oder ein Link zu einer detaillierteren Information hilfreich sein. Bei Formularen sind auch beschreibende Labels für die Eingabefelder wichtig.
Unterstützung für Screenreader und andere Hilfstechnologien:
Teste die Website mit Screenreadern (wie JAWS oder NVDA), um sicherzustellen, dass die Inhalte in der richtigen Reihenfolge und sinnvoll vorgelesen werden. Zum Beispiel sollte die Navigation überspringbar sein, damit Nutzerinnen und Nutzer direkt zu den Hauptinhalten gelangen können.
Achte darauf, dass dynamische Inhalte und Pop-ups korrekt für Screenreader verfügbar gemacht werden, indem ARIA-Attribute wie aria-live und aria-expanded verwendet werden, um Veränderungen auf der Seite zu kommunizieren.
Diese Punkte bilden ein solides Fundament für die barrierefreie Gestaltung und sorgen dafür, dass die Inhalte für alle Nutzerinnen und Nutzer zugänglich und verständlich sind. Accessibility ist heutzutage nicht mehr nur ein Nice-to-have, sondern schon fast ein Must-have für Webseiten. Wir helfen gerne, falls Hilfe zur Umsetzung oder Optimierung einer barrierefreien Website benötigt wird.