Was ist Barrierefreiheit bei Websites?

Barrierefreies Webdesign heisst, eine Website für alle nutzbar zu bauen. Das umfasst es, warum es rechtlich und praktisch wichtig ist und wie du es umsetzt.

Entwurf

Über 96 Prozent der meistbesuchten Websites haben auf ihrer Startseite erkennbare Barrieren. Diese Zahl stammt aus einer jährlichen Studie zur Barrierefreiheit, die jedes Jahr Millionen Seiten testet. Barrierefreies Webdesign ist nicht der Standard. Man muss es bewusst bauen, und bei den meisten Unternehmenswebsites ist das nicht passiert.

Barrierefreies Webdesign heisst, eine Website so aufzubauen, dass Menschen mit Behinderungen sie wahrnehmen, durchsuchen und nutzen können. Dazu gehören Menschen mit Sehbeeinträchtigung, die Screenreader nutzen, Menschen mit motorischen Einschränkungen, die per Tastatur statt Maus navigieren, Menschen mit Hörverlust, die Untertitel für Audio und Video brauchen, und Menschen mit kognitiven Einschränkungen, denen klare, einheitliche Layouts helfen.

Barrierefreiheit ist keine Funktion, die du am Ende des Aufbaus ergänzt. Sie besteht aus Design- und Entwicklungsentscheidungen, die den ganzen Aufbau begleiten und bestimmen, ob alle Besucher die Website nutzen können, nicht nur Menschen ohne Behinderung.

Welchen Besuchern dient barrierefreies Webdesign?

Die Weltgesundheitsorganisation schätzt, dass über 1,3 Milliarden Menschen mit irgendeiner Form von Behinderung leben. Das sind etwa 16 Prozent der Weltbevölkerung. Barrierefrei zu gestalten heisst, für einen bedeutenden Teil deiner möglichen Zielgruppe zu gestalten.

Die Vorteile reichen über Nutzer mit dauerhaften Behinderungen hinaus. Wer in grellem Sonnenlicht ein Handy nutzt, sieht schlechter. Jemand mit einer vorübergehenden Verletzung navigiert vielleicht per Tastatur. Wer in lauter Umgebung ein Video schaut, braucht Untertitel, um zu folgen. Verbesserungen der Barrierefreiheit helfen bei vorübergehenden und situativen Einschränkungen genauso wie bei dauerhaften. Eine barrierefrei gebaute Website funktioniert für viel mehr Menschen besser.

Es gibt auch eine rechtliche Seite. In vielen Ländern, darunter den USA, müssen Unternehmen per Gesetz gleichen Zugang zu ihren Leistungen bieten. Websites waren schon Gegenstand von Klagen wegen mangelnder Barrierefreiheit, und die Zahl solcher Klagen steigt jedes Jahr stetig. Der Artikel So machst du deine Website ADA-konform zeigt, was die rechtlichen Vorgaben für Unternehmenswebsites in der Praxis bedeuten.

Was sind die WCAG-Standards für Barrierefreiheit?

Die Web Content Accessibility Guidelines, kurz WCAG, sind die international anerkannten Standards für Barrierefreiheit im Web. Sie stammen vom World Wide Web Consortium und definieren drei Konformitätsstufen. Stufe A ist die Mindestgrundlage. Stufe AA ist der Standard, auf den die meisten Rechtsrahmen verweisen, und das praktische Ziel für Unternehmenswebsites. Stufe AAA ist die umfassendste und wird für eine ganze Website selten verlangt.

Die WCAG beruhen auf vier Grundprinzipien, die mit dem Kürzel POUR bezeichnet werden.

Wahrnehmbar

Alle Inhalte müssen so dargestellt werden, dass Nutzer sie wahrnehmen können. Textalternativen für Bilder erlauben Screenreadern, visuelle Inhalte Nutzern zu beschreiben, die sie nicht sehen können. Untertitel und Transkripte machen Audio und Video für Menschen mit Hörverlust zugänglich. Ausreichender Farbkontrast sorgt dafür, dass Text für Menschen mit geringer Sehkraft oder Farbenblindheit lesbar ist.

Bedienbar

Alle Funktionen müssen über eine Tastatur bedienbar sein, nicht nur mit Maus oder Touchscreen. Die Navigation muss vorhersehbar sein. Nutzer müssen genug Zeit haben, Inhalte zu lesen und zu nutzen, ohne Zeitdruck. Blinkende Inhalte, die Anfälle auslösen könnten, müssen vermieden oder kontrollierbar sein.

Verständlich

Inhalte und Navigation müssen lesbar und verständlich sein. Die Sprache der Seite muss angegeben sein, damit Screenreader die richtigen Ausspracheregeln anwenden. Fehlermeldungen in Formularen müssen erklären, was schiefging und wie man es behebt. Die Navigation muss sich auf allen Seiten gleich verhalten, damit Nutzer vorhersehen können, wo Bedienelemente sind.

Robust

Inhalte müssen zuverlässig mit aktuellen und künftigen Hilfstechnologien funktionieren. Dafür nutzt du gültiges, semantisches HTML, damit Screenreader und andere Tools die Seitenstruktur richtig deuten. Buttons müssen als Buttons programmiert sein. Überschriften müssen einer logischen Hierarchie folgen und nicht nur nach der optischen Grösse gewählt werden. Der Artikel Was ist visuelle Hierarchie? erklärt, wie Überschriftenstruktur und visuelles Gewicht auf einer Seite zusammenwirken.

Was sind die häufigsten Probleme bei der Barrierefreiheit von Websites?

Eine Analyse zur Barrierefreiheit nennt sechs Fehlertypen, die auf der überwältigenden Mehrheit der getesteten Seiten auftreten. Fehlende Alternativtexte bei Bildern sind am häufigsten. Zu geringer Farbkontrast zwischen Text und Hintergrund ist der zweite. Fehlende Formularbeschriftungen, leere Links, fehlende Angaben zur Dokumentsprache und leere Buttons machen den Rest aus.

Für Unternehmenswebsites sind die praktischen Startpunkte: Textalternativen für alle aussagekräftigen Bilder, ausreichender Kontrast bei allen Textelementen, klare Beschriftungen für jedes Formularfeld und eine logische Überschriftenstruktur auf jeder Seite.

Die Barrierefreiheit der Navigation ist eine weitere häufige Lücke. Dropdown-Menüs, die nur beim Darüberfahren aktiv werden, versagen bei Tastaturnutzern. Links mit "hier klicken" oder "mehr lesen" ohne Kontext versagen bei Screenreader-Nutzern, die über die Linkliste navigieren. Der Artikel Was ist Website-Navigation? zeigt, wie du eine Navigation baust, die mit allen Eingabemethoden und Geräten funktioniert.

Wie testest du deine Website auf Barrierefreiheit?

Automatische Tools erkennen schnell einen grossen Teil der Barrieren. Browser-Erweiterungen, die Seiten nach WCAG-Kriterien prüfen, zeigen Kontrastprobleme, fehlende Alt-Texte und strukturelle Probleme ohne technische Einrichtung. Ein automatischer Scan ist ein vernünftiger erster Schritt und findet die häufigsten Probleme auf den meisten Seiten.

Automatische Tests haben Grenzen. Sie können nicht zuverlässig beurteilen, ob Alt-Texte beschreibend sind, ob die Lesereihenfolge ohne CSS sinnvoll ist oder ob interaktive Elemente mit einem Screenreader richtig funktionieren. Für eine gründliche Prüfung ist manuelles Testen nötig. Die wichtigsten Seiten einer Website nur mit der Tastatur durchzugehen, ohne die Maus anzufassen, ist ein schneller Check, der Bedienprobleme sofort zeigt.

Für eine umfassende Prüfung ist der Test mit echten Hilfstechnologien der verlässlichste Weg. Screenreader gibt es für alle gängigen Betriebssysteme kostenlos. Wenn du die wichtigen Seiten mit einem aktiven Screenreader durchgehst, findest du Probleme, die automatische Tools komplett übersehen.

Wie wirkt sich Barrierefreiheit auf SEO aus?

Viele Massnahmen für Barrierefreiheit unterstützen direkt SEO. Alt-Texte bei Bildern geben Suchmaschinen Kontext, die visuelle Inhalte nicht deuten können. Eine logische Überschriftenstruktur hilft Suchmaschinen zu verstehen, wie eine Seite aufgebaut ist. Beschreibende Linktexte geben Suchmaschinen aussagekräftige Ankertexte statt allgemeiner Floskeln. Seiten, die per Tastatur bedienbar und sauber strukturiert sind, schneiden bei Signalen zur Nutzererfahrung insgesamt tendenziell besser ab.

Die Überschneidung ist kein Zufall. Bei Barrierefreiheit und SEO geht es im Kern darum, Inhalte für mehr Nutzer und Systeme verfügbar und verständlich zu machen. Verbesserungen bei einem nützen oft dem anderen. Der Artikel Was ist SEO? erklärt, wie Suchmaschinen die Qualität einer Seite bewerten und wo sich Barrierefreiheit mit Ranking-Signalen überschneidet.

So geht WEMASY mit Barrierefreiheit um

Der Website-Builder von WEMASY erzeugt semantisches HTML und ordnet Überschriften logisch an. Für alle Bilder gibt es Felder für Alt-Texte, sodass du Beschreibungen ohne Code ergänzen kannst. Die Vorlagen sind nach den WCAG-AA-Standards für Farbkontrast gebaut, damit das Standarddesign ohne manuelle Anpassung besteht. Tastaturnavigation und Touch-Ziele auf dem Handy übernimmt die Plattform, du musst nichts getrennt einstellen.

Sieh, was enthalten ist, beim Website-Builder von WEMASY, oder vergleiche Tarife auf der Preisseite.

Häufig gestellte Fragen

Ist Barrierefreiheit bei Websites gesetzlich vorgeschrieben?

In den USA verlangt der Americans with Disabilities Act von Unternehmen gleichen Zugang zu ihren Leistungen, und Gerichte und das Justizministerium haben bestätigt, dass das auch für Websites gilt. Die Web-Accessibility-Richtlinie und der European Accessibility Act der Europäischen Union stellen ähnliche Anforderungen. Die Rechtslage unterscheidet sich je nach Land und Art des Unternehmens. Für jedes Unternehmen, das die Öffentlichkeit bedient, birgt es aber ein rechtliches Risiko, Barrierefreiheit als optional zu behandeln. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.

Was ist der Unterschied zwischen WCAG A, AA und AAA?

Die WCAG haben drei Konformitätsstufen. Stufe A umfasst die Mindestanforderungen, die alle Webinhalte erfüllen sollten. Stufe AA ergänzt genauere Kriterien zu Farbkontrast, Tastaturbedienung und Fehlerbehandlung in Formularen. Sie ist die Stufe, auf die die meisten Rechtsrahmen verweisen, und das praktische Ziel für Unternehmenswebsites. Stufe AAA ist die umfassendste und wird in der Regel nicht pauschal verlangt, weil sich manche Kriterien nicht für alle Inhaltstypen erfüllen lassen.

Macht Barrierefreiheit eine Website langsamer?

Nein. Alt-Texte hinzuzufügen, die Überschriftenstruktur zu verbessern und den Farbkontrast zu erhöhen, hat keinen Einfluss auf die Ladezeit. Manche Ergänzungen, etwa Transkripte für Videoinhalte, bringen zusätzliche Dateien mit. Die zentralen Massnahmen für die meisten Unternehmenswebsites sind aber strukturelle und textliche Änderungen ohne Leistungskosten.

Wie viel einer Website muss barrierefrei sein?

Alles. Barrierefreiheit gilt für jede Seite, die ein Besucher erreichen kann, auch für Produktseiten, Kontaktformulare, Kaufabläufe und herunterladbare Dokumente. Eine Startseite, die den Test besteht, während ein Kontaktformular durchfällt, bleibt für Nutzer, die es brauchen, ein nicht barrierefreies Erlebnis. Prüfungen der Barrierefreiheit sollten den ganzen Nutzerweg für die wichtigen Aufgaben abdecken, die ein Besucher erledigen kann, nicht nur die Startseite.

Was ist eine Erklärung zur Barrierefreiheit?

Eine Erklärung zur Barrierefreiheit ist eine Seite, die den aktuellen Stand der Barrierefreiheit einer Website beschreibt, bekannte Einschränkungen nennt und Kontaktdaten für Nutzer angibt, die auf Probleme stossen. Sie schafft Transparenz und ist kein rechtlicher Schutzschild. Viele Vorschriften zur Barrierefreiheit verlangen oder empfehlen sie, und sie zeigt Nutzern mit Behinderungen, dass Barrierefreiheit bedacht wurde. Sie nützt am meisten, wenn sie aktuell bleibt und den tatsächlichen Stand der Website widerspiegelt.

Setz es direkt um,
auf deiner eigenen Website.

Starte kostenlos mit WEMASY und baue deine Seite in wenigen Minuten.