WCAG 1.4.4: Zmiana rozmiaru tekstu

Kryterium sukcesu 1.4.4 WCAG 2.0 i 2.1, Zmiana rozmiaru tekstu, stanowi kluczowy element dostępności stron internetowych. Wymaga ono, aby użytkownicy mieli możliwość powiększenia tekstu na stronie do 200% jego oryginalnego rozmiaru, bez utraty treści, funkcjonalności lub konieczności przewijania w poziomie w przypadku treści ułożonych w pojedynczej kolumnie.

Czym jest zmiana rozmiaru tekstu i dlaczego jest ważna?

To kryterium odnosi się do zdolności użytkownika do zwiększania rozmiaru czcionek wyświetlanych na ekranie. Chociaż przeglądarki internetowe często oferują ogólne funkcje powiększania strony (tzw. zoom), które skalują całą zawartość (tekst, obrazy, układ), WCAG 1.4.4 koncentruje się na tym, aby sam tekst był elastyczny i skalowalny. Oznacza to, że nawet jeśli użytkownik powiększy tylko tekst (a nie całą stronę), układ powinien pozostać funkcjonalny i czytelny.

Wpływ na dostępność i grupy użytkowników

Możliwość zmiany rozmiaru tekstu jest niezwykle ważna dla szerokiego grona użytkowników:

• Osoby z niską wizją: Dla wielu osób z zaburzeniami wzroku, powiększenie tekstu jest niezbędne do jego odczytania. Bez tej funkcji treść byłaby dla nich niedostępna.
• Osoby starsze: Z wiekiem wzrok często się pogarsza, a możliwość powiększenia czcionki ułatwia czytanie i zmniejsza zmęczenie oczu.
• Osoby z dysleksją i trudnościami w czytaniu: Większy tekst, często w połączeniu ze zwiększonymi odstępami między literami i wierszami, może znacząco poprawić czytelność i zrozumienie.
• Osoby z pewnymi zaburzeniami poznawczymi: Większy i wyraźniejszy tekst może ułatwić przetwarzanie informacji.

Zapewnienie skalowalności tekstu poprawia ogólną użyteczność, zmniejsza frustrację i umożliwia większej liczbie osób pełne korzystanie z treści internetowych.

Wymagania i kryteria sukcesu

Kryterium 1.4.4 ma poziom zgodności AA i wymaga spełnienia następujących warunków:

• Tekst (z wyłączeniem napisów i obrazów tekstu, które są istotną częścią obrazu) może być skalowany do 200%.
• Skalowanie odbywa się bez utraty treści. Oznacza to, że żadna część tekstu nie może być obcięta, ukryta lub nakładająca się w sposób uniemożliwiający czytanie.
• Skalowanie odbywa się bez utraty funkcjonalności. Wszystkie interaktywne elementy (np. linki, przyciski, pola formularzy) muszą nadal działać poprawnie i być dostępne.
• Treść ułożona w jednej kolumnie po powiększeniu do 200% nie powinna wymagać przewijania w poziomie. Przewijanie w pionie jest akceptowalne.

Wyjątki: To kryterium nie dotyczy napisów do materiałów audiowizualnych oraz obrazów tekstu, które są niezbędne dla informacji (np. logo firmowe, diagramy z wbudowanym tekstem, których wygląd jest kluczowy dla zrozumienia). Jednak nawet w takich przypadkach zaleca się dostarczanie alternatywnych opisów lub możliwości dostosowania.

Praktyczne wytyczne dla programistów i twórców treści

Aby spełnić kryterium 1.4.4, należy zastosować następujące praktyki:

1. Używaj jednostek względnych dla rozmiaru czcionki

Zamiast sztywnych jednostek pikselowych (px), używaj jednostek względnych, które skalują się w zależności od ustawień przeglądarki lub rozmiaru elementu nadrzędnego:

• em: Odnosi się do rozmiaru czcionki elementu nadrzędnego.
• rem: Odnosi się do rozmiaru czcionki elementu głównego (html). Jest to często preferowana jednostka, ponieważ ułatwia spójne skalowanie.
• %: Procentowy rozmiar czcionki w stosunku do elementu nadrzędnego.
• Jednostki widoku (vw, vh): Skalują się w zależności od rozmiaru okna przeglądarki, ale mogą być mniej przewidywalne dla samego tekstu bez innych dostosowań.

2. Projektuj elastyczne układy (Responsive Web Design)

Układy powinny być elastyczne i adaptować się do różnych rozmiarów ekranu oraz zwiększonego tekstu. Unikaj stałych szerokości i wysokości kontenerów, zwłaszcza tych, które zawierają tekst.

• Używaj flexbox lub CSS Grid do tworzenia responsywnych układów.
• Stosuj jednostki względne (%, em, rem, vw) dla szerokości, marginesów i paddingów.
• Wykorzystuj zapytania mediów (@media) do dostosowywania układu, gdy tekst staje się większy.

3. Zapewnij możliwość skalowania widoku (viewport meta tag)

Upewnij się, że meta tag widoku nie blokuje skalowania. Unikaj atrybutów takich jak user-scalable=no lub maximum-scale=1.0.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. Unikaj obrazów tekstu

Zawsze, gdy to możliwe, używaj prawdziwego tekstu HTML/CSS zamiast obrazów zawierających tekst. Obrazy tekstu nie skalują się w ten sam sposób co żywy tekst, a ich jakość może się pogorszyć po powiększeniu.

Przykłady implementacji

Poprawna implementacja (zgodna z WCAG 1.4.4)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dostępny tekst - Przykład WCAG 1.4.4</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Nagłówek strony</h1>
    </header>
    <main>
        <p class="intro">Ten tekst jest napisany z użyciem jednostek względnych.</p>
        <div class="content-box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="#" class="button">Dowiedz się więcej</a>
        </div>
    </main>
    <footer>
        <p>© 2023 Dostępna Strona</p>
    </footer>
</body>
</html>

html {
    font-size: 100%; /* Bazowy rozmiar dla rem */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    margin: 1rem;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.intro {
    font-size: 1.2rem;
    font-weight: bold;
}

.content-box {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 2rem;
    max-width: 800px; /* Użycie max-width pozwala na elastyczność */
}

.content-box p {
    font-size: 1rem; /* 1rem = 16px jeśli bazowe to 16px */
    margin-bottom: 1rem;
}

.button {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    margin-top: 1rem;
}

/* Przykład użycia media queries dla większych czcionek */
@media (min-width: 600px) {
    html {
        font-size: 112.5%; /* Zwiększa bazowy rem dla większych ekranów */
    }
}

@media (min-width: 900px) {
    html {
        font-size: 125%;
    }
}

Niepoprawna implementacja (niezgodna z WCAG 1.4.4)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Niedostępny tekst - Przykład WCAG 1.4.4</title>
    <link rel="stylesheet" href="styles-incorrect.css">
</head>
<body>
    <header>
        <img src="logo.png" alt="Logo firmy - tekst jako obraz" style="width: 200px; height: 50px;">
    </header>
    <main>
        <div class="fixed-width-box">
            <p>Ten tekst używa stałych rozmiarów pikselowych i jest zawarty w elemencie o stałej szerokości. Po powiększeniu tekst może zostać obcięty lub wypaść poza kontener.</p>
            <p style="font-size: 12px;">Mały tekst, który trudno powiększyć.</p>
            <button style="width: 100px; height: 30px; font-size: 14px;">Kliknij mnie</button>
        </div>
    </main>
</body>
</html>

body {
    font-family: Arial, sans-serif;
}

.fixed-width-box {
    width: 300px; /* Stała szerokość */
    height: 100px; /* Stała wysokość */
    overflow: hidden; /* Ukrywanie wychodzącej treści */
    border: 1px solid red;
    margin: 20px;
    padding: 10px;
}

.fixed-width-box p {
    font-size: 14px; /* Stała wielkość czcionki w pikselach */
    margin-bottom: 5px;
}

button {
    font-size: 14px; /* Stała wielkość czcionki */
}

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki

• Zacznij od podstaw: Ustaw bazowy rozmiar czcionki na elemencie html (np. font-size: 100%; lub font-size: 16px;), a następnie używaj rem dla większości tekstu.
• Testuj na różnych poziomach powiększenia: Sprawdzaj, jak strona zachowuje się przy powiększeniu przeglądarki do 150%, 200%, a nawet 300% (chociaż 200% to minimum WCAG).
• Elastyczne odstępy: Używaj jednostek względnych (em, rem, %) dla line-height, margin i padding, aby odstępy również skalowały się wraz z tekstem.
• Dostępność interaktywnych elementów: Upewnij się, że przyciski i linki nie są zbyt małe, a ich obszary kliknięcia są odpowiednie nawet po powiększeniu tekstu.

Typowe pułapki

• Używanie jednostek px: Sztywne wartości pikselowe są główną przyczyną problemów ze skalowaniem tekstu.
• Blokowanie skalowania: Atrybuty user-scalable=no lub maximum-scale=1.0 w meta tagu viewport całkowicie uniemożliwiają powiększanie.
• Stałe szerokości/wysokości kontenerów: Elementy o stałych wymiarach, które zawierają tekst, mogą prowadzić do obcinania treści lub nakładania się elementów.
• overflow: hidden: Stosowanie tej właściwości na kontenerach tekstowych, które nie są zaprojektowane do adaptacyjnego przewijania, ukrywa powiększony tekst.
• Niewystarczająca przestrzeń: Niewystarczające odstępy między wierszami (line-height) lub literami (letter-spacing) mogą sprawić, że powiększony tekst będzie trudny do odczytania.

Podsumowanie

Kryterium 1.4.4 Zmiana rozmiaru tekstu to fundamentalny wymóg zapewniający dostępność i użyteczność witryn dla wielu grup użytkowników. Poprzez stosowanie jednostek względnych, elastycznych układów i odpowiednie konfiguracje meta tagów, możemy stworzyć strony, które są czytelne i funkcjonalne dla każdego, niezależnie od jego preferencji czy potrzeb wzrokowych. Pamiętaj, że testowanie jest kluczem do sukcesu – zawsze sprawdzaj swoją stronę przy różnych poziomach powiększenia tekstu w przeglądarce.