Tworzenie dostępnych zasobów: Typografia

Wyraźny, czytelny tekst ma zasadnicze znaczenie dla dostępności witryny. Typografia wpływa na to, jak łatwo użytkownicy mogą skanować, rozumieć i angażować się w twoje treści. W tym artykule dowiesz się, jak wybrać dostępne czcionki, ustawić odpowiednie rozmiary i odstępy między wierszami oraz uporządkować tekst pod kątem czytelności. Postępuj zgodnie z tymi wskazówkami, aby upewnić się, że typografia wspiera integracyjne doświadczenie dla wszystkich odwiedzających.

Aby upewnić się, że Twoja witryna, strona docelowa, formularz lub wiadomość spełniają wymogi dostępności, skorzystaj z listy kontrolnej dostępnej tutaj.

Wymagania

  • Jeśli używasz języków znaczników, które obsługują określone właściwości stylu tekstu, dostosowanie tych właściwości w następujący sposób nie spowoduje utraty treści ani funkcji:
    • Ustaw wysokość linii (odstępy między wierszami) na co najmniej 1,5 rozmiaru czcionki;
    • Ustaw odstępy po akapitach na co najmniej 2-krotność rozmiaru czcionki;
    • Ustaw odstępy między literami (śledzenie) na co najmniej 0,12 rozmiaru czcionki;
    • Ustaw odstępy między wyrazami na co najmniej 0,16 rozmiaru czcionki.
  • Rozmiar tekstu można zmienić do 200 procent bez utraty treści lub funkcjonalności bez technologii wspomagającej.
  • Strona powinna być nadal funkcjonalna.
  • Strona musi umożliwiać użytkownikom powiększanie na urządzeniach mobilnych. Następujące elementy NIE są dozwolone:
    <meta name="viewport" content="user-scalable=no">.
  • Treść może być prezentowana bez utraty informacji lub funkcjonalności i bez konieczności przewijania w dwóch wymiarach:
    • Treści przewijanej w pionie przy szerokości odpowiadającej 320 pikselom CSS;
    • Treści przewijanej w poziomie o wysokości odpowiadającej 256 pikselom CSS.
  • Zapewnij alternatywę tekstową dla treści informacyjnych generowanych przez CSS i rozważ ustawienie tekstu generowanego przez CSS na aria-hidden="true".
  • Nie używaj tekstu w obrazach, jeśli możesz zamiast tego użyć prawdziwego tekstu, chyba że jest to niezbędne (np. logo) lub potrzebujesz określonych czcionek, rozmiarów, kolorów lub tła.
  • Jeśli konieczne jest użycie obrazu tekstu, postępuj zgodnie z wytycznymi dotyczącymi kolorów i kontrastu.
  • Tekst musi być zgodny z wytycznymi dotyczącymi koloru i kontrastu.

Wyjątki

Przewijanie w dwóch wymiarach

Jest to dozwolone w przypadku sekcji treści, które wymagają dwuwymiarowego układu dla zrozumienia lub użyteczności, np. duże tabele.

Odstępy między tekstem dla określonych języków

Niektóre właściwości stylu tekstu mogą nie mieć zastosowania do wszystkich języków i skryptów. Na przykład odstępy między literami mogą nie mieć zastosowania do języków używających logografów, takich jak chiński. Jednak w takich przypadkach odstępy między wyrazami i wysokość linii będą nadal istotne.

Przykłady

zoomed pagepage before zoomTAK: Podczas korzystania z ogólnego powiększenia w Chrome strona nie traci swojej funkcjonalności, a układ pozostaje użyteczny i niezakłócony.

Również kolejność elementów pozostaje taka sama.
example comparison of text overflowing containerNIE: W tym przykładzie div zawierający tekst jest ustawiony za pomocą pikseli (px), więc nie rozszerza się wraz z treścią.

Ustawienie wysokości div w stosunku do wysokości czcionki za pomocą “em” lub nie ustawianie wysokości div w ogóle zapobiegnie przepełnieniu div przez tekst.

Powiązane artykuły

Popularne materiały