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>&#8226; Element pierwszy</p>
<p>&#8226; 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.

Powiązane wpisy

Nadal szukasz odpowiedzi?

Zapytaj naszych specjalistów używając czatu online.

Skontaktuj się z nami