Typograficzne rekomendacje zaliczają się do najwyższego, najbardziej surowego poziomu AAA standardu WCAG. Większość projektów dąży do spełnienia wymagań poziomu AA. To może oznaczać, że kwestia typografii będzie lekceważona w trakcie zarówno planowania, jak i testowania dostępności strony internetowej. A szkoda! Chciałabym Tobie pokazać, że naprawdę niewielkim nakładem pracy jesteśmy w stanie zadbać o dostępną typografię. Dla jasności – w tym artykule bazuję na kryterium sukcesu 1.4.8 WCAG 2.2 Visual Presentation.
Po co mi ta cała typografia?
Zacznijmy od zauważenia, kto może zyskać na prawidłowo zaprojektowanej typografii:
- osoby z problemami kognitywnymi (m.in. dysleksją)
- osoby niedowidzące
- osoby widzące posiadające różne wady wzroku
To są grupy ludzi najbardziej narażone na problemy z płynnym przeczytaniem oraz prawidłowym zrozumieniem tekstu.
1. Czytelność czcionek
Podstawą jest czytelność czcionek dla osób widzących. Które czcionki możemy nazwać czytelnymi? Odpowiadając na to pytanie zaznaczę, że nie ma czegoś takiego, jak oficjalna lista akceptowalnych oraz zakazanych czcionek. Są tylko wskazówki, dobre praktyki i zaufanie do grafików, programistów. Najlepszym wyborem są proste, standardowe czcionki szeryfowe typu Times New Roman oraz bezszeryfowe typu Arial. Powinniśmy unikać czcionek dekoracyjnych, odręcznych, o nietypowych kształtach.
2. Odstępy
Dzięki odpowiednim odstępom ludzie z problemami kognitywnymi łatwiej przechodzą do kolejnej linii oraz zauważają koniec paragrafu.
Cytując źródło: „Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.”
Tak więc kwestię odstępów można podzielić na 2 części: odstępy między wierszami oraz odstępy między paragrafami.
Line spacing
Cytując Understanding SC 1.4.8: „By space and a half within paragraphs we mean that top of one line is 150% further from the top of the line below it than would be true when the text is 'single spaced’ (the default spacing for the font).”
Co oznacza, że odległość między sąsiednimi wierszami tekstu w paragrafie powinna wynosić min. 1.5 (i według najlepszych praktyk nie powinna przekraczać 2.0). Ani zbyt gęste, ani zbyt luźne rozmieszczenie wierszy – nie poprawia czytelności tekstu.
Prawidłową odległość między wierszami ustawiamy za pomocą własności CSS line-height (źródło).
p {
line-height: 150%;
}Paragraph spacing
Cytując Understanding SC 1.4.8: „By Paragraph spacing that is 1.5 times larger than the line spacing we mean that the spacing from the top of the last line of 1 paragraph is 250% farther from the Top of the first line of the next paragraph (i.e., that there is a blank line between the two paragraphs that is 150% of the single space blank line).”
Co oznacza, że odstęp pomiędzy paragrafami powinien być min. 1.5 (oraz max. 2.0 według najlepszych praktyk) razy większy niż odstęp pomiędzy wierszami w paragrafie. Ta zasada ma na celu zapewnienie, że poszczególne bloki tekstu są łatwe do rozróżnienia.
Paragraph spacing wydaje się być oczywisty koncepcyjnie, jednak technicznie – jestem zmieszana. Ustawiamy go oczywiście za pomocą marginesów. Jednak technicznego przykładu nie znalazłam na stronie WCAG.
Wyjaśnienia szukałam również w SC 1.4.12 Text Spacing (AA). Napisane jest tam„spacing following paragraphs to at least 2 times the font size”, co nijak ma się do powyższego „paragraph spacing is at least 1.5 times larger than the line spacing” z SC 1.4.8 Visual Presentation.
Jeśli ktokolwiek z Was potrafi mi wytłumaczyć technicznie prawidłowy paragraph spacing – proszę o pomoc! Dajcie znać w komentarzach, jak Wy widzicie ten temat.
Póki co powołuję się na Vision Australia:
- Generally, opt for 1.5 times the text size between lines
- Generally, opt for 2 times the text size between paragraphs
To tłumaczenie wydaje się być bardziej sympatyczne i tego też bym się trzymała.
p {
margin-bottom: 2em;
}3. Szerokość tekstu
Liczba znaków w wierszu nie powinna przekraczać 80 (40 dla języków Chińskiego, Japońskiego, Koreańskiego). Długie linie tekstu są sporym utrudnieniem – uniemożliwiają sprawne przejście do drugiej linii tekstu, utrzymanie płynności czytania.
Co ważne, pomimo dosłownego użycia wyrażenia „width is no more than 80 characters or glyphs” przez WCAG, to wymaganie nie polega na tym, aby ograniczać szerokość każdego paragrafu za pomocą CSS (źródło). Osoby mające wady wzroku często powiększają stronę za pomocą standardowych narzędzi przeglądarki zarówno w celu powiększenia tekstu, jak i… dostosowania szerokości paragrafu do swoich preferencji. Powiększają tekst lub zmieniają szerokość okna, aby szerokość tekstu na stronie była komfortowa dla ich wzroku.
Zatem aby spełnić to wymaganie, upewnij się, że podczas powiększania strony do 200% lub zmiany szerokości okna tekst płynnie przechodzi do drugiej linii i nie wymaga horyzontalnego przewijania. Wyjątkiem tutaj są tylko przypadki naturalnie długich wyrazów lub adresów URL na urządzeniach mobilnych.
4. Wyrównanie tesktu
Tekst nie powinien być wyjustowany (rozciągnięty zarówno do prawej, jak i lewej strony). Nierówne odległości pomiędzy słowami skutkują m.in.:
- tzw. „rivers of white space”, czyli pola pustej przestrzeni w obrębie paragrafu
- nienaturalne, niejasne granice między poszczególnymi wyrazami.
Ostatecznie według najlepszych praktyk nie zalecane jest również wyrównanie tekstu do prawej strony (dla języków pisanych od lewej strony) oraz centrowanie tekstu. Także najbezpieczniejszym sposobem ułożenia tekstu jest po prostu wyrównanie do lewej.
5. Wizualna personalizacja
Użytkownik powinien mieć możliwość personalizacji czcionek. Oznacza to zmianę m.in. takich własności jak:
- kolor
- wielkość
- rodzaj czcionki
- odległość między wierszami
- odległość między paragrafami
Oczywiście, dobrze byłoby udostępnić użytkownikowi przyciski do zmiany poszczególnych właśności. Jednak większość użytkowników zmienia je globalnie w przeglądarce lub systemie operacyjnym. Tak więc podstawą spełnienia tego wymagania jest osadzenie tekstu w kodzie HTML za pomocą… zwykłego, regularnego tekstu (a nie np. obrazka). Jeśli jednak tekst z pewnych przyczyn musi być przedstawiony w formie obrazka, dobrym wyborem jest format SVG, który zachowuje swoją jakość podczas powiększania.
Mam nadzieję, że powyższe zasady zapadną komuś w pamięci. Naprawdę czasami nie trzeba wiele pracy, aby zrobić krok do przodu w kierunku dostępnego internetu. A najprostsze rozwiązania, mogą być najlepsze.
A jakby ktoś rozkminił zagadkę odstępów między paragrafami – niech się odezwie w komentarzu!
