Bei einer neuen Website oder einer grundlegenden Überarbeitung bestimmen Ziele, Inhalte und Gestaltung früh, wie Menschen die Website nutzen können. Barrierefreiheit bedeutet, dass Menschen mit unterschiedlichen Fähigkeiten und Hilfsmitteln Inhalte verstehen und Funktionen bedienen können. Dazu tragen gut lesbare Texte, die Bedienung mit der Tastatur und verständliche Formulare bei.
Planen Sie Barrierefreiheit von Anfang an ein. Berücksichtigen Sie dabei Zeitplan und Budget sowie Gestaltung und Zuständigkeiten. So legen Sie die Anforderungen früh fest und prüfen sie im Projektverlauf, statt sie erst kurz vor der Veröffentlichung umzusetzen.
Ziele und Zuständigkeiten klären
Legen Sie im Projektauftrag fest, welche Aufgaben Nutzende auf der Website erledigen sollen und welche Barrierefreiheitsanforderungen dafür gelten. Bei einem Onlineshop zählen etwa Produktsuche, Warenkorb und Bezahlung; bei einer Behördenseite können Formulare und der Zugang zu Informationen im Mittelpunkt stehen. Benennen Sie außerdem, wer Anforderungen festlegt, Entwürfe prüft und die Ergebnisse verfolgt.
Planen Sie Zeit und Budget ein, um barrierefreie Inhalte zu erstellen, Tests durchzuführen und mögliche Überarbeitungen vorzunehmen. Nehmen Sie die Anforderungen in Briefings und Ausschreibungen auf. Halten Sie sie auch in den Vorgaben für Gestaltungskomponenten fest. Dazu zählen ein sichtbarer Tastaturfokus und ausreichende Kontraste. Verständliche Fehlermeldungen gehören ebenfalls dazu. Wenn Vorlagen und Komponenten diese Punkte bereits berücksichtigen, müssen Sie sie nicht für jede Seite neu umsetzen.
Nutzende früh einbeziehen
Menschen mit Behinderungen sollten zentrale Aufgaben schon an Entwürfen und Prototypen ausprobieren können. Ein Prototyp ist ein früher, meist noch nicht vollständig funktionsfähiger Entwurf einer Website. Lassen Sie zum Beispiel prüfen, ob sich ein Menü mit der Tastatur bedienen lässt oder ob der Weg durch ein Anmeldeformular nachvollziehbar ist.
Beziehen Sie nach Möglichkeit Menschen mit unterschiedlichen Behinderungen und Erfahrungen mit Hilfsmitteln ein. Ein Screenreader liest Inhalte und Bedienelemente einer Website vor; seine Nutzenden navigieren häufig über Überschriften und andere Seitenbereiche. Eine einzelne Person kann jedoch nicht für alle Bedürfnisse sprechen. Deshalb gehören Nutzertests und Prüfungen anhand anerkannter Standards zusammen.
Inhalte und Seitenstruktur planen
Eine klare Seitenstruktur hilft Menschen, Inhalte zu überblicken und gezielt zu finden. Planen Sie aussagekräftige Überschriften, die den jeweiligen Abschnitt benennen, und gliedern Sie die Seitenbereiche nachvollziehbar. So finden Lesende Inhalte schneller, und Screenreader-Nutzende können gezielt zwischen Abschnitten wechseln.
Formulieren Sie Anweisungen so, dass sie nicht allein von Farbe, Position oder Form abhängen. Statt „Wählen Sie den grünen Knopf rechts“ ist eine Beschreibung wie „Wählen Sie „Weiter““ verständlicher. Planen Sie außerdem von Anfang an Textalternativen für aussagekräftige Bilder ein. Bei Videos und Audiodateien gehören passende Untertitel, Transkripte oder Audiobeschreibungen zum Redaktions- und Produktionsplan. Welche Form nötig ist, hängt davon ab, welche Informationen das jeweilige Medium vermittelt.
Farben und Layouts barrierefrei gestalten
Prüfen Sie Farbkontraste bereits beim Entwurf der Farbpalette und Komponenten. Nach den Richtlinien des World Wide Web Consortium für barrierefreie Webinhalte (WCAG) benötigt normaler Text ein Kontrastverhältnis von mindestens 4,5:1. Für großen Text gilt mindestens 3:1. Diese Werte gelten für den Kontrast zwischen Text und Hintergrund. Für einzelne Kriterien gibt es Ausnahmen, etwa für Logos.
Farbe sollte nie allein einen Status vermitteln. Manche Nutzende erkennen einen Fehler nicht, wenn er nur durch rote Schrift oder einen roten Rahmen angezeigt wird. Ergänzen Sie deshalb eine verständliche Meldung oder ein passendes Symbol. Legen Sie auch fest, wie Fokus, Fehler und Erfolg sichtbar angezeigt werden. So erkennen Nutzende, welches Bedienelement gerade den Tastaturfokus hat und ob ein Vorgang erfolgreich war oder ein Fehler aufgetreten ist.
Entwerfen Sie flexible Layouts, die auch bei vergrößerter Schrift und schmalen Bildschirmen funktionieren. Die WCAG auf Stufe AA verlangt, dass Text bis auf 200 Prozent vergrößert werden kann, ohne dass Inhalte oder Funktionen verloren gehen. Prüfen Sie daher, ob Beschriftungen umbrechen dürfen und ob Schaltflächen oder Texte bei vergrößerter Darstellung überlagert werden. Vermeiden Sie feste Höhen, die Inhalte abschneiden.
Navigation und Formulare bedienbar machen
Planen Sie alle wichtigen Funktionen für die Tastaturbedienung. Nutzende müssen interaktive Elemente mit der Tastatur erreichen und sehen können, welches Element die Tastatur gerade ansteuert. Dieses Element hat den Tastaturfokus. Berücksichtigen Sie diese Abläufe bereits bei Menüs, Dialogfenstern und eingebetteten Diensten. Bewegte Inhalte und automatisch laufende Medien brauchen außerdem eine Möglichkeit, sie anzuhalten oder zu pausieren, wenn die geltenden Anforderungen dies verlangen.
Formulare brauchen sichtbare, eindeutige Beschriftungen für jedes Eingabefeld. Ein Platzhalter im Feld ersetzt keine Beschriftung, weil er beim Tippen verschwindet. Geben Sie Hinweise zu Pflichtfeldern und erwarteten Eingaben, bevor Nutzende einen Fehler machen. Eine Fehlermeldung sollte klar benennen, welches Feld betroffen ist und wie sich das Problem beheben lässt. Fragen Sie nur nach Angaben, die für den jeweiligen Vorgang erforderlich sind.
Redaktionssysteme und externe Dienste prüfen
Ein ungeeignetes Redaktionssystem, eine unzugängliche Vorlage oder ein externer Dienst kann die barrierefreie Nutzung trotz eines zugänglichen Designs erschweren. Prüfen Sie deshalb vor der Auswahl, ob sich die benötigten Funktionen mit der Tastatur bedienen lassen und ob das System Beschriftungen, Statusmeldungen und Alternativtexte, also Beschreibungen für Bilder, unterstützt. Das betrifft etwa Zahlungsdienste, Videoplayer, Karten und Buchungswerkzeuge.
Klären Sie bei Anbietern, welche bekannten Einschränkungen bestehen und welche Alternativen Sie Nutzenden anbieten können. Legen Sie außerdem fest, wer redaktionelle Inhalte wie Alternativtexte und Untertitel erstellt und kontrolliert. So bleiben diese Aufgaben nicht bis zur Veröffentlichung offen.
Regelmäßig prüfen und nachbessern
Prüfen Sie Barrierefreiheit während der Planung, beim ersten Prototyp, bei zentralen Komponenten und vor der Veröffentlichung. Wiederholen Sie die Prüfung, wenn Sie Navigation, Formulare oder eingebundene Dienste später ändern. Prüfungen anhand von Standards zeigen systematisch, welche Anforderungen erfüllt sind. Nutzertests machen sichtbar, ob Menschen konkrete Aufgaben tatsächlich erledigen können.
Welche gesetzlichen Pflichten gelten, hängt unter anderem davon ab, wer die Website betreibt und welche Leistungen sie anbietet. Das Barrierefreiheitsstärkungsgesetz erfasst bestimmte Produkte und Dienstleistungen, darunter Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher. Für Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, gelten die Anforderungen nach § 3 Absatz 1 des Gesetzes nicht. Für öffentliche Stellen des Bundes gelten eigene Vorgaben nach dem Behindertengleichstellungsgesetz und der Barrierefreie-Informationstechnik-Verordnung. Prüfen Sie, ob die gesetzlichen Anforderungen für Ihre Website gelten. Sie sind nicht für jede Website gleich.