WCAG 1.3.1: Informacje i relacje
Wprowadzenie
Kryterium sukcesu WCAG 1.3.1 „Informacje i relacje” (Info and Relationships) na poziomie A, jest jednym z fundamentalnych wymogów dotyczących dostępności treści internetowych. Jego głównym celem jest zapewnienie, że informacje, struktura i relacje, które są przekazywane wizualnie poprzez prezentację graficzną, są również dostępne programowo (czyli w kodzie) lub w tekście. Oznacza to, że użytkownicy technologii wspomagających, takich jak czytniki ekranu, powinni mieć dostęp do tych samych informacji o strukturze i znaczeniu treści, co użytkownicy widzący stronę.
Dlaczego kryterium 1.3.1 jest ważne? (Wpływ na dostępność)
To kryterium ma kluczowe znaczenie dla wielu grup użytkowników z niepełnosprawnościami:
- Osoby niewidome i słabowidzące (używające czytników ekranu): Czytniki ekranu interpretują kod strony, aby przekazać użytkownikowi jej zawartość. Jeśli struktura (np. nagłówki, listy, relacje między elementami formularza) nie jest programowo zdefiniowana, czytnik ekranu nie jest w stanie przekazać tych informacji, co uniemożliwia zrozumienie kontekstu i nawigację.
- Osoby z niepełnosprawnościami poznawczymi: Spójna i logiczna struktura pomaga w lepszym zrozumieniu treści i łatwiejszej nawigacji. Brak jasnych relacji może prowadzić do dezorientacji.
- Osoby z dysleksją: Poprawna struktura semantyczna, np. użycie nagłówków, ułatwia skanowanie i przetwarzanie tekstu.
- Osoby korzystające z alternatywnych metod nawigacji: Użytkownicy korzystający z klawiatury, przełączników lub innych technologii wspomagających polegają na programowej strukturze do efektywnego poruszania się po stronie i interakcji z jej elementami.
Ignorowanie tego kryterium sprawia, że strona staje się chaotyczna i niezrozumiała dla wielu użytkowników, którzy nie mogą polegać na wizualnych wskazówkach.
Wymagania kryterium sukcesu 1.3.1
Kryterium to wymaga, aby „Informacje, struktura i relacje przekazywane przez prezentację mogły być programowo określone lub dostępne w tekście.”
Programowo określone relacje
Oznacza to, że informacje o strukturze i relacjach powinny być zakodowane w HTML (lub innej technologii webowej) w sposób zrozumiały dla przeglądarek i technologii wspomagających. Przykłady obejmują:
- Semantyczne znaczniki HTML: Używanie nagłówków (
<h1>do<h6>), list (<ul>,<ol>,<dl>), tabel (<table>,<th>,<caption>), formularzy (<label>,<fieldset>,<legend>), itp. - Atrybuty WAI-ARIA: Kiedy natywne HTML nie jest wystarczające do przekazania wszystkich relacji lub ról (np. w przypadku złożonych widżetów UI), można użyć atrybutów ARIA (
role,aria-labelledby,aria-describedby,aria-controls, itp.).
Dostępne w tekście relacje
W rzadkich przypadkach, gdy programowe określenie relacji jest niemożliwe lub niepraktyczne (np. w przypadku starszych technologii), informacje o strukturze i relacjach muszą być jawnie opisane w tekście, aby każdy użytkownik mógł je zrozumieć. Jest to jednak rozwiązanie mniej preferowane niż semantyczne kodowanie.
Praktyczne wytyczne dotyczące zgodności
1. Struktura nagłówków
Używaj nagłówków HTML (<h1> do <h6>) w logicznej i hierarchicznej kolejności, aby określić strukturę treści. Nie pomijaj poziomów nagłówków i nie używaj ich wyłącznie do stylizacji.
<h1>Tytuł główny strony</h1>
<p>Wprowadzenie do tematu.</p>
<h2>Pierwszy główny rozdział</h2>
<p>Treść rozdziału...</p>
<h3>Podrozdział A</h3>
<p>Treść podrozdziału A...</p>
<h2>Drugi główny rozdział</h2>
<p>Treść rozdziału...</p><h1>Tytuł główny strony</h1>
<p>Wprowadzenie do tematu.</p>
<h4>Pierwszy główny rozdział (skok z h1 do h4)</h4>
<p>Treść rozdziału...</p>
<div style="font-size: 20px; font-weight: bold;">To wygląda jak nagłówek, ale nim nie jest</div>
<p>Treść podrozdziału...</p>2. Listy
Używaj semantycznych znaczników list (<ul> dla list nieuporządkowanych, <ol> dla list uporządkowanych, <dl> dla list definicji), aby poprawnie przekazać relacje między elementami list.
<ul>
<li>Element pierwszy</li>
<li>Element drugi</li>
<li>Element trzeci</li>
</ul>
<ol>
<li>Krok 1</li>
<li>Krok 2</li>
</ol><p>• Element pierwszy</p>
<p>• Element drugi</p>
<p>1. Krok 1</p>
<p>2. Krok 2</p>3. Tabele danych
Dla tabel zawierających dane, używaj znaczników <th> do nagłówków kolumn i/lub wierszy, oraz atrybutu scope (col lub row) do jasnego określenia ich relacji z komórkami danych. Dodaj <caption> dla ogólnego opisu tabeli.
<table>
<caption>Sprzedaż produktów w Q1 2023</caption>
<thead>
<tr>
<th scope="col">Produkt</th>
<th scope="col">Styczeń</th>
<th scope="col">Luty</th>
<th scope="col">Marzec</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Laptop X</th>
<td>120</td>
<td>150</td>
<td>130</td>
</tr>
<tr>
<th scope="row">Smartfon Y</th>
<td>200</td>
<td>180</td>
<td>220</td>
</tr>
</tbody>
</table><table>
<tr>
<td style="font-weight: bold;">Produkt</td>
<td style="font-weight: bold;">Styczeń</td>
<td style="font-weight: bold;">Luty</td>
<td style="font-weight: bold;">Marzec</td>
</tr>
<tr>
<td>Laptop X</td>
<td>120</td>
<td>150</td>
<td>130</td>
</tr>
</table>4. Formularze
Zapewnij, że wszystkie pola formularza są powiązane z odpowiednimi etykietami (<label>) za pomocą atrybutu for i id. Używaj <fieldset> i <legend> do grupowania powiązanych kontrolek formularza.
<form>
<fieldset>
<legend>Informacje kontaktowe</legend>
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie"><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br>
</fieldset>
<fieldset>
<legend>Preferowany sposób kontaktu</legend>
<input type="radio" id="telefon" name="kontakt" value="telefon">
<label for="telefon">Telefon</label><br>
<input type="radio" id="email_pref" name="kontakt" value="email">
<label for="email_pref">E-mail</label>
</fieldset>
</form><form>
<p>Imię:</p>
<input type="text" name="imie"><br>
<p>E-mail:</p>
<input type="email" name="email"><br>
<div>Preferowany sposób kontaktu</div>
<input type="radio" name="kontakt" value="telefon">Telefon<br>
<input type="radio" name="kontakt" value="email">E-mail
</form>5. Orientacja i nawigacja (Elementy ARIA i Regiony punktów orientacyjnych)
Używaj semantycznych znaczników HTML5 takich jak <nav>, <main>, <aside>, <header>, <footer> oraz, jeśli to konieczne, ról ARIA (np. role="navigation", role="main", role="complementary") do identyfikowania głównych sekcji strony. Pomaga to użytkownikom czytników ekranu szybko zrozumieć układ strony i nawigować między jej regionami.
<header>
<h1>Logo Strony</h1>
<nav aria-label="Główna nawigacja">
<ul>
<li><a href="/">Strona główna</a></li>
<li><a href="/o-nas">O nas</a></li>
</ul>
</nav>
</header>
<main>
<h2>Treść główna</h2>
<p>...</p>
</main>
<aside>
<h2>Dodatkowe informacje</h2>
<p>...</p>
</aside>
<footer>
<p>© 2023 Moja Firma</p>
</footer>6. Wyróżnienia wizualne
Upewnij się, że wszelkie informacje przekazywane wizualnie (np. kolor, rozmiar, styl czcionki) mają swoje programowe odpowiedniki lub są wspierane tekstem.
<p>Elementy <span style="color: red;">wymagane</span> są oznaczone na czerwono.</p>
<!-- Bez dodatkowego wskaźnika, jak np. "* Wymagane" -->
<label for="field1">Nazwa:</label>
<input type="text" id="field1"> <!-- Jeśli to pole jest wymagane, tylko kolor nie wystarczy --><p>Elementy <span style="color: red;"><strong>wymagane</strong></span> są oznaczone na czerwono i pogrubione.</p>
<!-- LUB -->
<p><span class="required-indicator">*</span> Pole wymagane.</p>
<label for="field1">Nazwa <span class="required-indicator">*</span>:</label>
<input type="text" id="field1" required aria-required="true">Najlepsze praktyki i typowe pułapki
- Zawsze używaj semantycznego HTML: To podstawa. Zanim sięgniesz po ARIA, sprawdź, czy natywny element HTML nie spełnia Twoich potrzeb.
- Nie polegaj wyłącznie na wyglądzie: Wizualna prezentacja jest ważna, ale zawsze upewnij się, że ta sama informacja lub relacja jest dostępna w kodzie. Na przykład, nie używaj tylko pogrubienia do oznaczania nagłówka – użyj znacznika
<h1>do<h6>. - Testuj z czytnikami ekranu: Regularne testowanie strony za pomocą popularnych czytników ekranu (np. NVDA, JAWS, VoiceOver) jest najlepszym sposobem na zweryfikowanie, czy struktura i relacje są poprawnie interpretowane.
- Używaj ARIA rozważnie: Atrybuty ARIA są potężne, ale mogą być skomplikowane i łatwo ich nadużyć. Niewłaściwe użycie ARIA może pogorszyć dostępność, zamiast ją poprawić. Przestrzegaj zasady „First Rule of ARIA Use”: Jeśli element HTML ma już semantykę i jest dostępny, nie używaj ARIA, aby to powielać lub zmieniać.
- Spójność: Utrzymuj spójną strukturę i terminologię na całej stronie. Pomaga to wszystkim użytkownikom w orientacji.
Podsumowanie
Kryterium WCAG 1.3.1 jest fundamentem dostępności, gwarantującym, że struktura i znaczenie treści są zrozumiałe dla technologii wspomagających i tym samym dla wszystkich użytkowników. Poprawne stosowanie semantycznego HTML, a w razie potrzeby uzupełnianie go o odpowiednie atrybuty ARIA, jest kluczowe dla stworzenia włączającej i użytecznej witryny internetowej. Koncentrując się na programowym określaniu informacji i relacji, deweloperzy mogą znacząco poprawić doświadczenia użytkowników z różnymi potrzebami.