Wiemy, że warto projektować elastycznie, aby zapewnić jak najlepsze wrażenia na różnych urządzeniach, ale elastyczne projektowanie jest też korzystne pod względem dostępności.
Weźmy na przykład stronę Udacity:
Osoba niedowidząca, która ma trudności z czytaniem małego druku, może powiększyć stronę, być może nawet o 400%. Ponieważ witryna korzysta z elastycznego projektowania, interfejs zmienia układ w przypadku „mniejszego widocznego obszaru” (w rzeczywistości większej strony), co jest przydatne dla użytkowników komputerów, którzy potrzebują powiększenia ekranu, oraz dla użytkowników czytników ekranu na urządzeniach mobilnych. To świetny układ. Oto ta sama strona powiększona do 400%:
W rzeczywistości, projektując responsywnie, spełniamy regułę 1.4.4 z listy kontrolnej WebAIM, która mówi, że strona jest „czytelna i funkcjonalna, gdy rozmiar tekstu jest dwukrotnie większy”.
Omówienie wszystkich aspektów projektowania responsywnego wykracza poza zakres tego przewodnika, ale poniżej znajdziesz kilka ważnych informacji, które pomogą Ci poprawić responsywność i zapewnić użytkownikom lepszy dostęp do Twoich treści.
Używanie metatagu viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ustawienie width=device-width odpowiada szerokości ekranu w pikselach niezależnych od urządzenia, a ustawienie initial-scale=1 określa relację 1:1 między pikselami CSS a pikselami niezależnymi od urządzenia. Dzięki temu przeglądarka dopasuje treść do rozmiaru ekranu, więc użytkownicy nie zobaczą tylko zniekształconego tekstu.
Więcej informacji znajdziesz w artykule Dopasowywanie rozmiaru treści do widocznego obszaru.
Zezwalaj użytkownikom na powiększanie
Aby zapobiec powiększaniu, możesz użyć metatagu viewport z ustawieniem maximum-scale=1 lub user-scaleable=no. Nie rób tego i pozwól użytkownikom powiększać obraz, jeśli tego potrzebują.
Projektowanie z myślą o elastyczności
Unikaj kierowania na konkretne rozmiary ekranu i zamiast tego używaj elastycznej siatki, wprowadzając zmiany w układzie, gdy wymaga tego treść. Jak widzieliśmy na przykładzie Udacity, takie podejście zapewnia, że projekt reaguje na zmniejszoną przestrzeń, niezależnie od tego, czy jest ona spowodowana mniejszym ekranem czy większym poziomem powiększenia.
Więcej informacji o tych technikach znajdziesz w artykule Podstawy elastycznego projektowania witryn.
Używanie jednostek względnych w przypadku tekstu
Aby w pełni wykorzystać elastyczną siatkę, używaj jednostek względnych, takich jak em lub rem, w przypadku rozmiaru tekstu zamiast wartości w pikselach. Niektóre przeglądarki obsługują zmianę rozmiaru tekstu tylko w ustawieniach użytkownika. Jeśli używasz wartości pikseli dla tekstu, to ustawienie nie ma wpływu na Twoją kopię. Jeśli jednak w całej witrynie używasz jednostek względnych, kopia witryny zostanie zaktualizowana zgodnie z preferencjami użytkownika.
Dzięki temu cała witryna może się dostosowywać do powiększenia, co zapewnia użytkownikom komfort czytania, którego potrzebują, aby korzystać z Twojej witryny.
Unikaj odłączania widoku od zamówienia źródłowego
Użytkownicy klawiatury, którzy poruszają się po Twojej witrynie za pomocą klawisza Tab, podążają za kolejnością treści w dokumentach HTML. Korzystając z metod układu, takich jak Flexbox i Grid, możesz zmieniać wizualną kolejność elementów, co może prowadzić do rozbieżności z kolejnością w kodzie źródłowym. Może to powodować przeskakiwanie użytkownika po stronie przy każdej karcie.
Przetestuj projekt w każdym punkcie przerwania, przechodząc przez treść za pomocą klawisza Tab. Zadaj sobie pytanie: „Czy przepływ informacji na stronie nadal ma sens?”.
Dowiedz się więcej o rozbieżnościach między źródłem a wyświetlaniem.
Uważaj na wskazówki przestrzenne
Pisząc mikrotreści, unikaj używania języka, który wskazuje lokalizację elementu na stronie. Użytkownicy z wadami wzroku mogą nie mieć tego wspólnego kontekstu i lepiej skorzystają z identyfikacji dokładnej kopii elementu, dzięki czemu będzie można ją wyszukać.
Pomaga to również wszystkim użytkownikom, ponieważ odniesienie się do nawigacji jako „po lewej stronie” może nie mieć sensu w wersji mobilnej, w której nawigacja może być przeniesiona w inne miejsce.
Sprawdź, czy elementy dotykowe są wystarczająco duże na urządzeniach z ekranem dotykowym
Na urządzeniach z ekranem dotykowym upewnij się, że obszary klikalne są wystarczająco duże, aby można było je łatwiej aktywować bez klikania innych linków. Dobry rozmiar każdego elementu, w który można kliknąć, to 48 pikseli. Więcej wskazówek na temat elementów docelowych kliknięcia znajdziesz w tym artykule.