Heim Web-Frontend js-Tutorial Barrierefreiheit (a) Regeln – 4

Barrierefreiheit (a) Regeln – 4

Nov 28, 2024 am 03:52 AM

Accessibility (a) Rules - 4

Farbe und Kontrast

  • Text in normaler Größe, einschließlich Textbildern, muss ein Farbkontrastverhältnis von 4,5:1 haben.

  • Großer Text (18pt / 24px oder 14pt / 18,5px fett) und wichtige Symbole müssen ein Farbkontrastverhältnis von 3:1 haben.

  • Um das Farbkontrastverhältnis herauszufinden, verwenden Sie den DevTools-Farbwähler von Google Chrome.

  • Fügen Sie neben der Farbe in Grafiken, Diagrammen und Tabellen eine zusätzliche Kennung wie ein Muster, einen Text oder ein Symbol ein, um das Inhaltsverständnis für alle Benutzer zu verbessern.

  • Erstellen Sie ein dunkles Thema mit @prefers-color-scheme.

  • Erstellen Sie ein kontrastreiches Thema @prefers-contrast.

Animation und Bewegung

Blinkende und bewegende Inhalte

  • Enthalten Sie nichts, was mehr als dreimal pro Sekunde blinkt.

  • Blinkt unterhalb der allgemeinen Blitz- und Rotblitzschwelle.

Bewegung anhalten, stoppen oder ausblenden

  • Fügen Sie auf der Seite einen Mechanismus zum Anhalten, Stoppen oder Ausblenden hinzu, damit Benutzer potenziell problematische Bewegungsanimationen deaktivieren können.

  • Kann dies auf Bildschirmebene oder Elementebene tun.

Verwenden Sie Medienabfragen

  • Mit Hilfe von @prefers-reduced-motion überprüft die Medienabfrage die Betriebssystemeinstellungen des Benutzers in Bezug auf die Animations- und Designseite, die diese Präferenzen berücksichtigt.

Typografie

  • Der schnellste Weg, ein barrierefreies Design zu erstellen, besteht darin, eine gängige Schriftart auszuwählen (wie Arial, Times New Roman, Calibri, Verdana und viele andere).

  • Vermeiden Sie kunstvolle oder handgeschriebene Schriftarten sowie solche, bei denen nur eine Groß-/Kleinschreibung verfügbar ist (z. B. nur Großbuchstaben).

  • Achten Sie bei der Suche nach der Schriftart besonders auf Folgendes:

    • Verwenden Sie nach Möglichkeit gängige Schriftarten.
    • Vermeiden Sie aufwändige oder handgeschriebene Schriftarten und solche mit nur einer Groß-/Kleinschreibung.
    • Wählen Sie eine Schriftart mit einzigartigen Eigenschaften – achten Sie dabei besonders auf das große I, das kleine l und die 1.
    • Überprüfen Sie bestimmte Buchstabenkombinationen, um sicherzustellen, dass sie nicht ein genaues Spiegelbild voneinander sind.
    • Überprüfen Sie die Unterschneidung, insbesondere zwischen dem Buchstabenpaar r und n.

Schriftgröße und typografische Gestaltung

  • Grundschriftgrößen sollten mit einem relativen Wert (%, rem oder em) definiert werden, um eine Größenänderung zu ermöglichen.

  • Begrenzen Sie die Anzahl der Schriftartvariationen wie Farbe, Fett, GROSSBUCHSTABEN und Kursivschrift, um die Lesbarkeit zu verbessern. Verwenden Sie stattdessen Methoden, um Wörter in Ihrer Kopie hervorzuheben, z. B. Sternchen, Bindestriche oder die Hervorhebung eines einzelnen Wortes.

  • Verwenden Sie nach Möglichkeit Markup anstelle von Text auf Bildern. Bildschirmlesegeräte können eingebetteten Text in Bildern nicht lesen (ohne dass zusätzlicher Code hinzugefügt wird), und eingebetteter Text kann auch verpixelt werden, wenn er von Benutzern mit eingeschränktem Sehvermögen vergrößert wird.

Struktur und Layout

  • Kritische Elemente sollten sich voneinander unterscheiden und ähnliche Elemente sollten in Gruppen zusammengefasst werden.

Abstand

  • Textblöcke sollten schmal gehalten werden, um die Lesbarkeit zu verbessern und Lesern mit Behinderungen zu helfen, den Inhalt leichter zu verstehen.

Inhaltsausrichtung

  • Vermeiden Sie Blocksatz, da ungleiche Abstände die Lesbarkeit erschweren, insbesondere für Menschen mit Behinderungen. Außerdem kann es zu verzerrten Wortabständen kommen, sodass Wortgrenzen schwer zu erkennen sind.

  • Abstände und Tools wie „Good Line-Height“ und der Golden-Ratio-Rechner helfen dabei, die Kopie leichter zugänglich zu machen.

Best Practices für Struktur und Layout

  • Verwenden Sie Elemente wie Überschriften, Zwischenüberschriften, Listen, Zahlen, Anführungszeichen und andere visuelle Gruppierungen, um die Seite in Abschnitte zu unterteilen.

  • Verwenden Sie klar definierte Absätze, Sätze und Wortabstände.

  • Erstellen Sie Textspalten mit einer Breite von weniger als 80 Zeichen (40 Zeichen für Logogramme).

  • Vermeiden Sie eine Blocksatzausrichtung, da dadurch „Raumflüsse“ innerhalb der Kopie entstehen.

Das obige ist der detaillierte Inhalt vonBarrierefreiheit (a) Regeln – 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Ersetzen Sie Stringzeichen in JavaScript

JQuery überprüfen, ob das Datum gültig ist JQuery überprüfen, ob das Datum gültig ist Mar 01, 2025 am 08:51 AM

JQuery überprüfen, ob das Datum gültig ist

JQuery Get Element Polsterung/Rand JQuery Get Element Polsterung/Rand Mar 01, 2025 am 08:53 AM

JQuery Get Element Polsterung/Rand

10 JQuery Accords Registerkarten 10 JQuery Accords Registerkarten Mar 01, 2025 am 01:34 AM

10 JQuery Accords Registerkarten

10 lohnt 10 lohnt Mar 01, 2025 am 01:29 AM

10 lohnt

HTTP-Debugging mit Knoten und HTTP-Konsole HTTP-Debugging mit Knoten und HTTP-Konsole Mar 01, 2025 am 01:37 AM

HTTP-Debugging mit Knoten und HTTP-Konsole

Benutzerdefinierte Google -Search -API -Setup -Tutorial Benutzerdefinierte Google -Search -API -Setup -Tutorial Mar 04, 2025 am 01:06 AM

Benutzerdefinierte Google -Search -API -Setup -Tutorial

JQuery fügen Sie Scrollbar zu Div hinzu JQuery fügen Sie Scrollbar zu Div hinzu Mar 01, 2025 am 01:30 AM

JQuery fügen Sie Scrollbar zu Div hinzu

See all articles