Dlaczego czytelność warto sprawdzać na całej stronie
Czytelność nie zależy od jednego ustawienia w arkuszu stylów. Jasnoszary opis produktu może być trudny do odczytania na białym tle, choć nagłówki wyglądają dobrze. Tekst na zdjęciu może być czytelny na komputerze, ale zniknąć na telefonie, gdy zmieni się kadr. Z kolei wygodna wielkość pisma nie pomoże, jeśli długie akapity są zbite lub powiększenie strony ukrywa część treści.
Takie problemy utrudniają wykonanie zadania: znalezienie informacji, porównanie oferty czy wypełnienie formularza. Warto traktować ich usuwanie jako poprawę dostępności i wygody korzystania z witryny, a nie jako sposób na zagwarantowanie wyższych pozycji w wyszukiwarce. Kontrolę najlepiej zacząć od miejsc, w których użytkownik musi coś przeczytać lub wybrać: strony usługi, artykułu, listy produktów i formularza kontaktowego.
Kontrast: sprawdzaj konkretne pary kolorów
Kontrast opisuje różnicę między kolorem tekstu a jego tłem. W wytycznych WCAG 2.x często stosowanym punktem odniesienia dla zwykłego tekstu jest współczynnik co najmniej 4,5:1, a dla dużego tekstu co najmniej 3:1. Duży tekst oznacza tu co najmniej 24 px przy zwykłej grubości albo około 19 px przy pogrubieniu. To progi do oceny konkretnych zestawień kolorów, nie ogólna ocena całej palety marki.
Aby wykonać kontrolę, odczytaj kolor tekstu i rzeczywistego tła, a następnie wprowadź je do kalkulatora kontrastu. Powtórz test dla tekstu podstawowego, linków, etykiet pól, komunikatów błędu, przycisków oraz tekstu po najechaniu kursorem i po ustawieniu fokusu. Przy przezroczystych warstwach, gradientach i zdjęciach samo sprawdzenie dwóch wartości zapisanych w CSS może nie wystarczyć. Obejrzyj wtedy element na ekranie w kilku miejscach i rozważ jednolite tło pod tekstem. Nie przekazuj ważnej informacji wyłącznie kolorem, na przykład samym czerwonym obramowaniem błędnego pola.
Wielkość pisma i powiększenie: oceniaj je w kontekście
Dla tekstu głównego 16 px bywa rozsądnym punktem wyjścia, ale nie jest uniwersalnym wymogiem. O wygodzie czytania współdecydują krój pisma, grubość znaków, długość wiersza i urządzenie. Drobne etykiety oraz przypisy łatwo przeoczyć, zwłaszcza na telefonie. Zamiast zmniejszać tekst, żeby zmieścił się w ciasnym układzie, sprawdź, czy można dać mu więcej miejsca lub skrócić etykietę bez utraty znaczenia.
Otwórz kilka typowych podstron i powiększ widok przeglądarki do 200%. Sprawdź, czy da się przeczytać treść, użyć menu, zamknąć okno dialogowe i wysłać formularz bez zasłoniętych przycisków. Przetestuj też wąski ekran: tekst powinien układać się w dostępnej szerokości, a nie wymuszać poziome przewijanie całej strony. Niektóre elementy, takie jak szerokie tabele, mogą wymagać osobnego sposobu prezentacji. W kodzie warto pozwolić użytkownikowi korzystać z ustawień przeglądarki zamiast blokować skalowanie.
Odstępy: zostaw miejsce na czytanie i własne ustawienia
Przy dłuższych tekstach przyjrzyj się wysokości wiersza, odstępom między akapitami i długości linijek. Zbyt ciasne wiersze utrudniają śledzenie tekstu, a zbyt szerokie kolumny mogą utrudniać odnalezienie początku następnego wiersza. Nie ma jednej wartości odpowiedniej dla każdego kroju i układu. W artykule sprawdź odstępy na kilku akapitach; w karcie produktu zobacz również krótkie opisy, listy i podpisy przy polach.
Dobrym testem odporności układu jest zwiększenie przez użytkownika odstępów: wysokości wiersza do 1,5 wielkości pisma, odstępu między akapitami do dwóch wielkości pisma, między literami do 0,12 i między wyrazami do 0,16 wielkości pisma. Są to wartości używane przy sprawdzaniu dostępności, a nie nakaz stosowania identycznych odstępów jako domyślnych. Po zmianie tekst nie powinien znikać, nachodzić na inne elementy ani tracić funkcjonalności. Szczególnie uważnie obejrzyj przyciski, karty i pola o sztywno określonej wysokości.
Krótka lista kontroli przed publikacją zmian
Wybierz po jednym przykładzie najważniejszych szablonów strony i przejdź je na komputerze oraz telefonie. Sprawdź kontrast zwykłego tekstu i stanów interaktywnych; obejrzyj tekst na zdjęciach; przeczytaj dłuższy akapit; powiększ widok; przetestuj większe odstępy. Na formularzu upewnij się, że etykiety i komunikaty błędów pozostają widoczne. Zapisz znaleziony problem razem z adresem podstrony, elementem i warunkami, w których występuje.
Po poprawkach wróć do tych samych miejsc. Zmiana globalnego koloru, kroju albo wysokości wiersza może pomóc w jednym szablonie, a zepsuć inny. Automatyczny test przyspiesza wykrywanie części problemów z kontrastem, lecz nie zastępuje obejrzenia strony i próby wykonania zadania. Taka prosta, powtarzalna kontrola pozwala utrzymywać czytelność także wtedy, gdy do serwisu dochodzą nowe podstrony i komponenty.
