Wiemy, że elastyczne strony internetowe to dobry sposób na zapewnienie najlepszego działania na różnych urządzeniach, ale elastyczny projekt jest też korzystny dla dostępności.
Weźmy np. witrynę Udacity:
Użytkownik słabo widzący, który ma trudności z czytaniem drobnego druku, może powiększyć stronę nawet do 400%. Witryna została zaprojektowana w technologii RWD, więc interfejs automatycznie dostosuje się do „mniejszego widocznego obszaru” (w rzeczywistości do większej strony). Jest to świetne rozwiązanie dla użytkowników komputerów, którzy potrzebują powiększenia ekranu, a także dla użytkowników czytników ekranu na urządzeniach mobilnych. To świetny układ. Oto ta sama strona po powiększeniu do 400%:
Projektując strony responsywne, spełniasz już regułę 1.4.4 z listy kontrolnej WebAIM, która mówi, że strona „… powinna być czytelna i funkcjonalna, gdy rozmiar tekstu zostanie podwojony”.
Ten przewodnik nie obejmuje wszystkich aspektów projektowania responsywnego, ale poniżej znajdziesz kilka ważnych wskazówek, które pomogą Ci w zapewnieniu użytkownikom wygodnej obsługi i dostępu do treści.
Używanie meta tagu widocznego obszaru
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ustawienie width=device-width spowoduje dopasowanie szerokości ekranu do pikseli niezależnych od urządzenia, a ustawienie initial-scale=1 utworzy relację 1:1 między pikselami CSS a pikselami niezależnymi od urządzenia.
Dzięki temu przeglądarka dopasuje zawartość do rozmiaru ekranu,
a użytkownicy nie zobaczą tylko zwiniętego tekstu.
Więcej informacji znajdziesz w artykule Dopasowywanie rozmiaru treści do widocznego obszaru.
Zezwalanie użytkownikom na powiększanie
Jeśli chcesz zapobiec powiększaniu, możesz użyć meta tagu widocznego obszaru, ustawiając parametr maximum-scale=1 lub user-scaleable=no.
Unikaj tego i pozwól użytkownikom powiększać obraz w razie potrzeby.
Projektowanie z myślą o elastyczności
Unikaj kierowania na konkretne rozmiary ekranu. Zamiast tego użyj elastycznej siatki, wprowadzając zmiany w układzie, gdy wymaga tego treść. Jak widać na przykładzie Udacity, takie podejście zapewnia, że projekt będzie responsywny niezależnie od tego, czy ograniczona przestrzeń wynika z mniejszego ekranu czy z wyższego poziomu powiększenia.
Więcej informacji o tych technikach znajdziesz w artykule Podstawowe informacje o elastycznym projektowaniu witryn.
Używanie jednostek względnych do tekstu
Aby w pełni wykorzystać możliwości elastycznego układu, używaj jednostek względnych, takich jak em lub rem, do określania rozmiaru tekstu zamiast wartości w pikselach. Niektóre przeglądarki obsługują zmianę rozmiaru tekstu tylko w ustawieniach użytkownika. Jeśli do tekstu używasz wartości w pikselach, to ustawienie nie będzie miało wpływu na tekst. Jeśli jednak użyjesz jednostek względnych, tekst w witrynie zostanie zaktualizowany zgodnie z ustawieniami użytkownika.
Dzięki temu cała witryna będzie się przeformatowywać, gdy użytkownik powiększy tekst, co zapewni wygodę czytania, której użytkownicy potrzebują, aby korzystać z Twojej witryny.
Unikaj odłączenia widoku wizualnego od kolejności źródłowej
Użytkownik, który przegląda Twoją witrynę za pomocą klawiatury za pomocą klawisza Tab, będzie przestrzegać kolejności treści w dokumencie HTML. Jeśli korzystasz z nowoczesnych metod układu, takich jak Flexbox i Siatka, możesz łatwo dopasować renderowanie wizualne do kolejności źródłowej. Może to powodować niepokojące przeskakiwanie po stronie, gdy użytkownik porusza się po niej za pomocą klawiatury.
Przetestuj projekt na każdym punkcie przełamania, przechodząc przez zawartość za pomocą klawisza tabulacji. Czy układ strony nadal ma sens?
Dowiedz się więcej o rozłączeniu źródła i wyświetlacza.
Uważaj na wskazówki przestrzenne
Podczas pisania mikrotekstu unikaj słów, które wskazują położenie elementu na stronie. Na przykład używanie elementów nawigacyjnych „po lewej” nie ma sensu w wersji mobilnej, gdy nawigacja znajduje się na górze ekranu.
Upewnij się, że elementy dotykowe są wystarczająco duże na urządzeniach z ekranem dotykowym
Na urządzeniach z ekranem dotykowym elementy dotykowe muszą być wystarczająco duże, aby można je było łatwo aktywować bez klikania innych linków. Dobry rozmiar dowolnego dotykowego elementu to 48 pikseli. Więcej wskazówek znajdziesz w sekcji Elementy docelowe kliknięcia.