Durch Stilattribute festgelegte Textabstände müssen mit benutzerdefinierten Stylesheets anpassbar sein
Blind
Sehbehindert
Hören
Mobilität
WCAG 2.2 Level AA
Von Menschen für Menschen geschrieben und recherchiert
Casandra Visser
Autor
Yotam Flohr
Forscher
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare:
0
Laut Web-Accessibility-Standards müssen durch Stilattribute definierte Textabstände so gestaltet sein, dass sie mit benutzerdefinierten Stylesheets angepasst werden können.
Warum es wichtig ist
Einige Menschen mit kognitiven Beeinträchtigungen haben Schwierigkeiten, Textzeilen zu verfolgen, wenn ein Textblock einfachzeilig formatiert ist. Durch das Bereitstellen von Abständen zwischen 1,5 und 2 können sie leichter eine neue Zeile beginnen, nachdem sie die vorherige beendet haben.
Behebung des Problems
Entwickler sollten sicherstellen, dass Inline-Textabstände mit benutzerdefinierten Stylesheets anpassbar sind.
Gutes Codebeispiel
Codebeispiel
<!-- style-Attribut enthält die Eigenschaft font-size -->
<p id="pass1" style="font-size: 200%">Ich trat auf eine Cornflakes, jetzt bin ich ein Serienmörder...</p>
<!-- style-Attribut enthält die Eigenschaft line-height -->
<p id="pass2" style="line-height: 1.5;">Auf einer Skala von eins bis zehn, was ist Ihre Lieblingsfarbe des Alphabets.</p>
<!-- style-Attribut enthält die Eigenschaft letter-spacing -->
<p id="pass3" style="letter-spacing: 50px;">Der schnelle braune Fuchs sprang über den faulen Hund</p>
<!-- style-Attribut enthält die Eigenschaft word-spacing -->
<p id="pass4" style="word-spacing: 10px;">Eine Gruppe von 24 Raupen hat 694 Beine</p>
<!-- style-Attribut enthält die Eigenschaften word-spacing, letter-spacing und line-height -->
<p id="pass5" style="word-spacing: 20ch; letter-spacing: 50rem; line-height: 3;">Schau, eine Ablenkung!</p>
Kopieren
Schlechtes Codebeispiel
Codebeispiel
<!-- style-Attribut enthält die erzwungene Eigenschaft line-height -->
<p id="fail1" style="line-height: 1.5 !important;">Bananenfehler</p>
<!-- style-Attribut enthält die erzwungene Eigenschaft letter-spacing -->
<p id="fail2" style="letter-spacing: 100em !important;">Wir brauchen mehr Käse!!!</p>
<!-- style-Attribut enthält die erzwungene Eigenschaft word-spacing -->
<p id="fail3" style="word-spacing: -.4ch !important;">Der Käsehobel ist im Weg!</p>
<!-- style-Attribut enthält die Eigenschaften word-spacing, eine erzwungene letter-spacing und line-height -->
<p id="fail4" style="word-spacing: 200%; letter-spacing: 50rem !important; line-height: 3;">Yo, Darth Vader</p>
Kopieren
Testfälle
Für weitere Beispiele besuchen Sie die folgenden Seiten in der ACT Rules Library der W3C auf GitHub: