Wiemy, że elastyczne projektowanie witryn dobrze sprawdza się w przypadku różnych urządzeń, ale responsywne projektowanie zwiększa też dostępność.
Weźmy na przykład Udacity:
Niedowidzący użytkownik, który ma trudności z czytaniem drobnym drukiem, może powiększyć stronę nawet o 400%. Witryna jest zaprojektowana elastycznie, więc interfejs dostosowuje się do „mniejszego widocznego obszaru” (w szczególności w przypadku większej strony). Jest to świetne rozwiązanie w przypadku użytkowników komputerów, którzy potrzebują powiększenia ekranu, oraz czytników ekranu mobilnego. To świetny układ. Oto ta sama strona powiększona do 400%:
Dzięki elastycznemu projektowaniu spełniamy wymogi reguły 1.4.4 z listy kontrolnej WebAIM, zgodnie z którą strona „... powinna być czytelna i funkcjonalna po podwojeniu rozmiaru tekstu”.
Ten przewodnik wykracza poza zakres tego przewodnika, ale warto wspomnieć o kilku ważnych kwestiach, które zwiększą wygodę korzystania z tego rozwiązania i zapewnią użytkownikom lepszy dostęp do Twoich treści.
Używaj tagu widocznego obszaru
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ustawienie width=device-width dopasuje szerokość ekranu w pikselach niezależnych od urządzenia, a ustawienie initial-scale=1 powstanie relację 1:1 między pikselami CSS a pikselami niezależnych od urządzenia.
Dzięki temu przeglądarka dopasuje zawartość do rozmiaru ekranu, a użytkownicy nie zobaczą jedynie zwiniętego tekstu.
Więcej informacji znajdziesz w artykule [GA4] Dopasowanie zawartości do widocznego obszaru.
Zezwalaj użytkownikom na powiększanie
Aby zapobiec powiększaniu, użyj metatagu widocznego obszaru, ustawiając właściwość maximum-scale=1 lub user-scaleable=no.
Unikaj tego, a w razie potrzeby pozwól użytkownikom powiększyć obraz.
Elastyczność projektu
Unikaj kierowania reklam na konkretne rozmiary ekranów. Zamiast tego korzystaj z elastycznej siatki i dokonuj zmian w układzie, kiedy uznasz to za konieczne. Jak widać w przykładzie powyżej Udacity, to podejście zapewnia, że projekt reaguje niezależnie od tego, czy mniejszy ekran czy większy poziom powiększenia.
Więcej o tych technikach dowiesz się z artykułu Podstawy elastycznego projektowania witryn.
Używaj w tekście jednostek względnych
Aby jak najlepiej wykorzystać elastyczną siatkę, zamiast wartości w pikselach użyj jednostek względnych, takich jak em czy rem. Niektóre przeglądarki obsługują zmianę rozmiaru tekstu tylko w ustawieniach użytkownika. Jeśli używasz w tekście liczby pikseli, ustawienie to nie będzie miało wpływu na kopiowanie. Jeśli jednak w całym tekście stosujesz jednostki względne, treść witryny zostanie zaktualizowana zgodnie z preferencjami użytkownika.
Umożliwi to zmian układu całej witryny wraz z powiększaniem przez użytkownika, co zapewni wygodne korzystanie z witryny.
Unikaj odłączania widoku wizualnego od kolejności źródłowej
Użytkownik, który przegląda witrynę za pomocą klawisza Tab, będzie przestrzegać kolejności treści w dokumencie HTML. Korzystając z nowoczesnych metod układu, takich jak Flexbox czy Grid, możesz łatwo sprawić, aby renderowanie wizualne nie było zgodne z kolejnością źródłową. Może to prowadzić do niepokojących skoków użytkowników, którzy poruszają się po stronie, korzystając z klawiatury.
Sprawdź, czy projekt jest dostępny w każdym punkcie przerwania, przewijając zawartość klawiszem Tab. Czy poruszanie się po stronie nadal ma sens?
Dowiedz się więcej o odłączeniu źródła od wyświetlacza wizualnego.
Szukaj wskazówek przestrzennych
Pisząc mikroskopy, nie używaj języka, który określa lokalizację elementu na stronie. Na przykład określenie nawigacji „po lewej stronie” nie ma sensu w wersji mobilnej, gdy nawigacja znajduje się u góry ekranu.
Upewnij się, że elementy dotykowe są wystarczająco duże na urządzeniach z ekranem dotykowym
Jeśli masz ekran dotykowy, upewnij się, że elementy dotykowe są na tyle duże, by można było łatwo aktywować inne linki. Dobry rozmiar każdego elementu klikalnego to 48 pikseli. Więcej informacji o elementach dotykowych znajdziesz w artykule.