Barrierefreiheit im Internet: Barrierefreie flüssige Typografie

• Einführung
• Vor allem: Schriftgröße: 20px – schlechte Praxis
• Wie man flüssigen Text barrierefrei macht
• Typografie-Komponenten in 10 Minuten
• Inspiriert von

Einführung

Heute möchte ich an ein wichtiges Thema erinnern – Barrierefreiheit. Es ist eine Community-gesteuerte
Bemühungen, die digitale Zugänglichkeit zu erleichtern.

Ein kleiner Teil dieses Themas ist Typografie. Der Text sollte in jeder Browser-Schriftgröße gut aussehen.

100%	200%

Vor allem: Schriftgröße: 20px – schlechte Praxis

Ich weiß, das haben wir alle gemacht, viele Leute im Internet nutzen es in ihren Kursen. Aber es ist ein schlechter Ansatz. Hier ist eine einfache Regel, wenn Sie nicht sicher sind, welches Gerät Sie wählen sollen:

px – Elemente mit fester Größe, die sich nicht ändern, z. B. für Ränder oder Schatten.

rem – Schriftgrößen, um es Benutzern zugänglich zu machen, die die Standardschriftgröße ihres Browsers geändert haben.

vw / vh – Elementgröße bleibt an der Größe des Ansichtsfensters hängen

% – Elementgröße bleibt bei relativer Größe

So machen Sie flüssigen Text barrierefrei

Alles, was wir brauchen, ist clamp(), um es zugänglich zu machen und eine Formel dafür zu erstellen
Machen Sie es reaktionsfähig.

1. Stellen Sie sicher, dass Sie die globale Schriftgröße auf 16 Pixel einstellen. Und Zeilenhöhe mindestens 1,2

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

1. Definieren Sie Ihre minimale und maximale Bildschirmgröße, in meinem Fall 320 px – 1920 px.

2. Definieren Sie die Größe Ihres Textes, den Sie auf Ihrem minimalen und maximalen Bildschirm haben möchten. In meinem Beispiel habe ich das h1-Tag, also mein
   Die Schriftgröße beträgt entsprechend 50 Pixel bzw. 90 Pixel.

3. Gehen Sie zu https://utopia.fyi/type/calculator und geben Sie dort Ihre Werte ein

1. Scrollen Sie nach unten zum CSS-Generator. Wir brauchen den Wert --step-0

   Copy
   /* @link https://utopia.fyi/type/calculator?c=320,50,1.2,1920,90,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
--step--2: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--step--1: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--step-0: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
--step-1: clamp(3.75rem, 3.0938rem + 3.2813vw, 7.0313rem);
--step-2: clamp(4.5rem, 3.6422rem + 4.2891vw, 8.7891rem);
}

1. Klemme anbringen (3,125rem, 2,625rem, 2,5vw, 5,625rem); als Schriftgröße Ihres Textes.

Ergebnis:

320px	1920px	1920px(200% zoom)

Sie können sehen, dass mein Text mit einer Zeile CSS reagiert und auch für die Browserskalierung zugänglich ist.

Typografie-Komponenten in 10 Minuten

Meine Absicht war es, so schnell und flexibel wie möglich eine flexible Typografiekomponente zu erstellen.

Ich habe meinen größten h1-Text genommen. Ging zu https://utopia.fyi/type/calculator und generierte 8 Downscale-Schritte:

Das wären meine Textgrößen p, h1-6, span und label

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

Dann noch 5 Minuten mit React spielen und Voilà:

Meine wiederverwendbaren Typografiekomponenten für React

Inspiriert von

Die Verwendung von REM macht Ihre Website nicht responsiv – hier ist der Grund

Flüssige Typografie

Das obige ist der detaillierte Inhalt vonBarrierefreiheit im Internet: Barrierefreie flüssige Typografie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!