Zugängliche Schriftgröße, erklärt

Die Webinhalte -Richtlinien (WCAG) -Richtlinien (WCAG) schreibt keine minimale Schriftgröße für Webinhalte vor. Die Lesbarkeit ist jedoch entscheidend. In diesem Artikel werden Best Practices für zugängliche Schriftgrößen untersucht, wobei der Schwerpunkt auf WCAG -Anforderungen und Nutzung von Browser -Standardeinstellungen liegt.

Lesbarkeit: Kontrast und Charaktervielfalt

WCAG priorisiert den Kontrast gegenüber einer festen Größe . Der Text muss ein Kontrastverhältnis von mindestens 4,5: 1 (3: 1 für großen Text) erfüllen. Tools wie den Kontrastprüfer von Webaim können helfen. Die Komplexität verschiedener Alphabete (rund 300 global) bedeutet, dass eine einzige Mindestgröße nicht allgemein anwendbar ist. WCAG definiert "großen Text" basierend auf sprachspezifischen Mindestdruckgrößen, gemessen in Punkten (nicht Pixel). Für den römischen Text werden 18 Punkte (die je nach Bildschirmdichte 24px gleichsetzen können) als "groß".

Im Wesentlichen gibt WCAG Kontrast an, keine präzise Schriftgröße .

Glücklicherweise sind Browser -Standardstile von Natur aus zugänglich. Nutzen wir sie.

Proportionen, keine festen Größen

Browser -Standardstile (User Agent Stylesheets) gehen den Autorenstilen und Benutzerstilen voraus. Viele Benutzer passen ihre Standard -Browser -Schriftgrößen an. Aufgrund von Faktoren wie Übersetzung, Schriftladungsfehlern oder benutzerdefizierten Schriftarten (wie OpendySlexic) fehlt uns auch die vollständige Kontrolle über Schriftfamilien.

Konzentrieren Sie sich daher auf Proportionen , nicht auf absolute Größen. Verwenden Sie CSS -Relativeinheiten (WCAG empfiehlt em -Einheiten), um die Inhaltskalen für die Umgebung des Benutzers angemessen sicherzustellen. Erwägen Sie, rem und em -Einheiten konsequent zu verwenden (mit Ausnahme von Grenzen, bei denen Pixel häufig vorzuziehen sind).

Vermeiden Sie es, eine Basis -Schriftgröße festzulegen

Vermeiden Sie es im Allgemeinen, font-size auf der :root festzulegen, , oder<code> Elemente. Lassen Sie die Standardgröße des Browsers als Grundlinie dienen. Der WCAG 2.2 Working Draft legt nahe, dass die Standard -Schriftgröße, die von großen Browsern für nicht spezifizierten Text verwendet wird, eine angemessene Grundlinie liefert.

Ausnahmen existieren. Ausführliche, dünne oder kurze X-Hirg-Schriftarten erfordern möglicherweise eine etwas größere Basis-Schriftgröße, um einen ausreichenden Kontrast zu erreichen. Denken Sie daran: Kontrast, nicht Größe, ist die wichtigste WCAG -Metrik. Ungewöhnliche Schriftarten erfordern möglicherweise größere Größen, um die Lesbarkeit aufrechtzuerhalten, insbesondere bei niedrigeren Kontrastniveaus. Benutzer können die Basis -Schriftgröße weiterhin an ihre Präferenz einstellen.

Proportionen beibehalten: Definieren Sie die relativen Größenanpassungen (z. .small ,. .large ) basierend auf dem Standardeinsatz des Browsers.

 :Wurzel {
  / * Stellen Sie hier keine Schriftgröße ein */
}
.klein {
  Schriftgröße: .8rem;
}
.groß {
  Schriftgröße: 2Rem;
}

Überschriften

Halten Sie die Übergangsreihenfolge (H1, H2, H3 usw.) für den Bildschirmleser -Zugänglichkeit. Das Zurücksetzen der Schriftgrößen in 1rem kann das visuelle Styling von semantischer Bedeutung entkoppeln.

Arbeiten mit Pixeln

Um pixelbasierte Designs in relative Einheiten zu übersetzen:

Methode 1: Die 62,5% -Regel

font-size: 62.5%; Auf der :root macht 1REM gleich 10px und vereinfacht die Pixel-REM-Konvertierung.

Methode 2: Verwendung calc()

Verwenden Sie calc() , um die REM -Werte dynamisch basierend auf dem angenommenen 16px -Browser -Standard zu berechnen.

Methode 3: Pixel-zu-REM-Funktion

Verwenden Sie Präprozessorfunktionen (Sass Mixins, Styled-Komponenten-Politur) oder erstellen Sie sogar eine benutzerdefinierte CSS-Funktion für die Pixel-zu-REM-Konvertierung.

Abschluss

Priorisieren Sie die proportionale Größe mithilfe von rem -Einheiten, nutzen Sie die Browser -Standardeinstellungen und vermeiden Sie Annahmen zu den Benutzereinstellungen. Dieser Ansatz gewährleistet die Zugänglichkeit für verschiedene Browser, Geräte und Benutzerpräferenzen. Vielen Dank an Franco Correa für seine Hilfe.

Das obige ist der detaillierte Inhalt vonZugängliche Schriftgröße, erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!