zbyt mały font treści informacyjnej

Zbyt mały font treści informacyjnej obniża czytelność wiadomości, zwłaszcza dla starszych odbiorców.

Czytelność zależy nie tylko od rozmiaru liter

Zbyt mały font treści informacyjnej utrudnia odczytywanie komunikatów, instrukcji, opisów usług i wyników diagnostyki. Użytkownik musi wtedy zwiększać powiększenie strony, zmieniać skalowanie systemu albo przybliżać ekran telefonu. Takie działanie nie rozwiązuje jednak problemu, jeśli powiększony tekst wychodzi poza obszar ekranu, nachodzi na inne elementy lub wymusza poziome przewijanie. Czytelność zależy również od kroju pisma, grubości znaków, odstępów między wierszami, długości wiersza i kontrastu między tekstem a tłem.

W arkuszach CSS rozmiar tekstu można określać między innymi w jednostkach px, em i rem. Jednostka rem odnosi się do rozmiaru fontu elementu głównego dokumentu, natomiast em zależy od rozmiaru fontu elementu nadrzędnego lub bieżącego. Zagnieżdżone wartości em mogą się kumulować, dlatego przy rozbudowanych stylach łatwiej przypadkowo uzyskać bardzo mały tekst. Jednostka px daje bardziej bezpośrednią kontrolę, ale sama liczba pikseli nie gwarantuje wygodnego odczytu na każdym ekranie.

Skalowanie tekstu w przeglądarce i systemie

Przeglądarki internetowe pozwalają powiększać zawartość skrótem klawiaturowym Ctrl+ w systemie Windows i Linux oraz Command+ w macOS. Skrót Ctrl+0 przywraca domyślny poziom powiększenia w popularnych przeglądarkach dla komputerów. Powiększenie strony może obejmować cały interfejs, podczas gdy ustawienie minimalnego rozmiaru czcionki w preferencjach przeglądarki wpływa przede wszystkim na tekst. Jeśli witryna blokuje skalowanie w widoku mobilnym albo wykorzystuje sztywne wysokości kontenerów, zwiększenie fontu może powodować obcinanie treści.

Responsywny interfejs powinien pozwalać na zmianę wielkości tekstu bez utraty informacji i podstawowej funkcjonalności. W praktyce wymaga to stosowania płynnych wysokości elementów, zawijania długich nagłówków, unikania tekstu umieszczonego wyłącznie jako obraz oraz poprawnego używania właściwości overflow. Rozmiary i odstępy nie powinny być ustawiane w sposób, który uniemożliwia rozszerzenie zawartości. Przydatne jest także uwzględnienie ustawień systemowych, takich jak skalowanie ekranu w Windows, powiększenie tekstu w Androidzie oraz funkcje ułatwień dostępu w iOS i macOS.

Wymagania dostępności dotyczące powiększania

Wytyczna WCAG 2.2, kryterium sukcesu 1.4.4 „Resize Text”, wymaga, aby tekst można było powiększyć do 200 procent bez utraty treści lub funkcjonalności, z wyjątkami dotyczącymi napisów i obrazów tekstu. Nie oznacza to, że każda strona musi używać konkretnego rozmiaru bazowego wyrażonego w pikselach. Ocenie podlega zachowanie interfejsu po powiększeniu. Jeżeli litery stają się większe, ale przyciski, formularze i komunikaty pozostają dostępne, rozwiązanie lepiej spełnia ten warunek.

WCAG 2.2 zawiera również kryterium 1.4.10 „Reflow”. Przy powiększeniu odpowiadającym szerokości 320 pikseli CSS dla treści przewijanej w jednym kierunku, a także przy 400-procentowym powiększeniu typowego widoku o szerokości 1280 pikseli CSS, użytkownik nie powinien być zmuszany do przewijania w dwóch kierunkach, poza elementami, dla których jest to niezbędne, takimi jak rozbudowane tabele. Weryfikacja powinna obejmować zwykły tekst, menu, pola formularzy, przyciski, tabele i komunikaty o błędach. Samo sprawdzenie strony przy domyślnym powiększeniu nie wykrywa problemów ujawniających się dopiero po zwiększeniu fontu.

Sprawdzenie na laptopie, komputerze PC i telefonie

Diagnostykę warto rozpocząć od odczytania deklaracji CSS dla akapitów, nagłówków, etykiet i elementów interfejsu. Należy sprawdzić, czy reguły dla małych ekranów nie zmniejszają tekstu do wartości trudnej do odczytania oraz czy media queries nie nadpisują ustawień użytkownika. Test obejmuje powiększenie przeglądarki do 200 procent, zmianę szerokości okna, tryb wysokiego kontrastu i nawigację klawiaturą. W przypadku urządzeń mobilnych trzeba dodatkowo sprawdzić orientację poziomą i pionową oraz działanie powiększenia wykonywanego gestem.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, a przy problemach z wyświetlaniem może również sprawdzić ustawienia skalowania systemu, sterownik grafiki, rozdzielczość ekranu oraz konfigurację przeglądarki. Zbyt mały tekst może wynikać z ustawień systemowych, powiększenia konkretnej witryny, rozszerzenia przeglądarki albo błędnego skalowania aplikacji. Rozdzielenie tych przyczyn pozwala ustalić, czy problem znajduje się w samym interfejsie strony, konfiguracji programu, sterowniku obrazu czy ustawieniach monitora.