Gestaltung für Webzugänglichkeit
Zusammenfassung
Diese Seite stellt einige grundlegende Überlegungen vor, die Ihnen helfen sollen, Ihre Benutzeroberflächengestaltung und visuelle Gestaltung für Menschen mit Behinderungen zugänglicher zu machen. Diese Tipps sind gute Praktiken, um Ihnen zu helfen, die Anforderungen der Web Content Accessibility Guidelines (WCAG) zu erfüllen. Folgen Sie den Links zu den entsprechenden WCAG-Anforderungen, detaillierten Hintergrundinformationen im „Understanding“-Dokument, Anleitungen aus Tutorials, Benutzererfahrungen und mehr.
Seiteninhalt
- ausreichenden Kontrast
- nicht nur Farbe
- interaktive Elemente leicht zu identifizieren sind
- klare und konsistente Navigationsoptionen
- Formularelemente klar zugeordnet
- leicht erkennbare Rückmeldungen
- Überschriften und Abstände gruppieren
- Designs für verschiedene Ansichtsgrößen
- Bild- und Medienalternativen ins Design
- Steuerungen für Inhalte
stellen-sie-ausreichenden-kontrast-zwischen-vordergrund-und-hintergrund-berei
Vordergrundtext muss einen ausreichenden Kontrast zu Hintergrundfarben haben. Dies gilt für Text auf Bildern, Hintergrundverläufen, Schaltflächen und anderen Elementen. Dies gilt nicht für Logos oder beiläufigen Text, wie z. B. Text, der zufällig in einem Foto vorkommt. Die unten stehenden Links bieten weitere Informationen zum minimalen Kontrastverhältnis, wie es von den WCAG gefordert wird, und wie man den Kontrast überprüft. „Kontrastverhältnis“ ist eine Kurzform des technisch korrekteren Begriffs „Leuchtdichte-Kontrastverhältnis“.
Beispiel
Unzureichend ❌
Einige Menschen können Text nicht lesen, wenn der Kontrast zwischen Text und Hintergrund nicht ausreichend ist. Für andere sind helle Farben (hohe Leuchtdichte) nicht lesbar; sie benötigen eine niedrige Leuchtdichte.
Ausreichend ✅
Einige Menschen können Text nicht lesen, wenn der Kontrast zwischen Text und Hintergrund nicht ausreichend ist. Für andere sind helle Farben (hohe Leuchtdichte) nicht lesbar; sie benötigen eine niedrige Leuchtdichte.
Verwenden Sie nicht nur Farbe, um Informationen zu vermitteln
Während Farbe nützlich sein kann, um Informationen zu vermitteln, sollte Farbe nicht der einzige Weg sein, auf dem Informationen vermittelt werden. Wenn Sie Farbe verwenden, um Elemente zu unterscheiden, bieten Sie auch zusätzliche Kennzeichnungen, die nicht auf Farbwahrnehmung beruhen. Verwenden Sie beispielsweise ein Sternchen zusätzlich zur Farbe, um erforderliche Formularfelder anzuzeigen, und verwenden Sie Beschriftungen, um Bereiche in Diagrammen zu unterscheiden.
Beispiel: Verwendung von Farbe zur Bedeutungsvermittlung
Nur Farbe ❌
Farbe und Symbol ✅
Stellen Sie sicher, dass interaktive Elemente leicht zu identifizieren sind
Stellen Sie für interaktive Elemente wie Links und Schaltflächen eindeutige Stile bereit, damit sie leicht zu identifizieren sind. Ändern Sie beispielsweise das Erscheinungsbild von Links bei Mausüberfahrt, Tastaturfokus und Touchscreen-Aktivierung. Stellen Sie sicher, dass Stile und Bezeichnungen für interaktive Elemente auf der gesamten Website einheitlich verwendet werden.
Style Links, um sich vom Text abzuheben ✅
Einige Menschen können keine Maus verwenden und navigieren nur mit der Tastatur durch Webseiten.
Für jedes fokussierbare Element auf der Webseite ✅
- Setzen Sie den Fokus auf das Steuerelement
- Überprüfen Sie, ob der Benutzeragent das Steuerelement auf irgendeine Weise hervorgehoben hat
Consistent Identification Level AA ✅
Komponenten, die auf mehreren Webseiten dieselbe Funktionalität haben, werden einheitlich identifiziert.
WCAG Consistent Identification
Bieten Sie klare und konsistente Navigationsoptionen
Stellen Sie sicher, dass die Navigation auf den Seiten einer Website konsistente Benennungen, Stile und Positionierungen aufweist. Bieten Sie mehr als eine Methode zur Navigation auf der Website an, wie z. B. eine Site-Suche oder eine Sitemap. Helfen Sie den Benutzern zu verstehen, wo sie sich auf einer Website oder Seite befinden, indem Sie Orientierungshilfen wie Brotkrumen und klare Überschriften bereitstellen.
WCAG Consistent NavigationWCAG Multiple Ways
Stellen Sie sicher, dass Formularelemente klar zugeordnete Beschriftungen enthalten
Stellen Sie sicher, dass alle Felder eine beschreibende Beschriftung haben, die sich in der Nähe des Feldes befindet. Für von links nach rechts lesende Sprachen werden Beschriftungen normalerweise links oder oberhalb des Feldes positioniert, außer bei Kontrollkästchen und Optionsfeldern, bei denen sie normalerweise rechts stehen. Vermeiden Sie zu viel Platz zwischen Beschriftungen und Feldern.
Bieten Sie leicht erkennbare Rückmeldungen
Bieten Sie Rückmeldungen für Interaktionen an, wie z. B. die Bestätigung der Formularübermittlung, das Warnen des Benutzers, wenn etwas schiefgeht, oder das Benachrichtigen des Benutzers über Änderungen auf der Seite. Anweisungen sollten leicht zu erkennen sein. Wichtige Rückmeldungen, die eine Benutzeraktion erfordern, sollten in einem auffälligen Stil präsentiert werden.
Bieten Sie leicht erkennbare Rückmeldungen
Verwenden Sie Überschriften und Abstände, um verwandte Inhalte zu gruppieren
Verwenden Sie Leerraum und Nähe, um Beziehungen zwischen Inhalten deutlicher zu machen. Gestalten Sie Überschriften, um Inhalte zu gruppieren, Unordnung zu reduzieren und das Scannen und Verstehen zu erleichtern.
Erstellen Sie Designs für verschiedene Ansichtsgrößen
Berücksichtigen Sie, wie Seiteninformationen in unterschiedlich großen Ansichtsfenstern, wie z. B. Mobiltelefonen oder vergrößerten Browserfenstern, dargestellt werden. Die Position und Präsentation der Hauptelemente, wie Kopfzeile und Navigation, können geändert werden, um den verfügbaren Platz optimal zu nutzen. Stellen Sie sicher, dass die Textgröße und die Zeilenbreite so eingestellt sind, dass die Lesbarkeit und Verständlichkeit maximiert werden.
Die Anzeige in einem breiten Fenster mit kleinem Text verwendet mehrere Spalten für primäre Inhalte, sichtbare Navigationsoptionen und sichtbare sekundäre Informationen.
Die Anzeige in einem schmalen Fenster, wie z. B. einem Mobiltelefon, oder mit großem Text verwendet eine einzelne Spalte für primäre Inhalte, Navigationsoptionen werden über ein Symbol angezeigt, und sekundäre Informationen werden ebenfalls über ein Symbol angezeigt.
Schließen Sie Bild- und Medienalternativen in Ihr Design ein
Stellen Sie in Ihrem Design Platz für Alternativen zu Bildern und Medien bereit. Zum Beispiel könnten Sie benötigen:
Sichtbare Links zu Transkripten von Audiodateien Sichtbare Links zu audiobeschriebenen Versionen von Videos Text zusammen mit Symbolen und grafischen Schaltflächen Beschriftungen und Beschreibungen für Tabellen oder komplexe Grafiken Arbeiten Sie mit Inhaltsautoren und Entwicklern zusammen, um Alternativen für nicht-textliche Inhalte bereitzustellen.
Bieten Sie Steuerungen für Inhalte, die automatisch starten
Stellen Sie sichtbare Steuerungen bereit, mit denen Benutzer Animationen oder automatisch abgespielte Sounds stoppen können. Dies gilt für Karussells, Bildslider, Hintergrundgeräusche und Videos.