1.3.1 Informacje i relacje

Krótko

Jeśli coś na stronie wygląda jak struktura albo relacja, ta sama informacja musi być dostępna w kodzie albo w tekście.

Problem w praktyce

Strona wygląda porządnie dla osoby widzącej: jest duży tytuł, lista punktów, tabela, etykiety pól i grupa odpowiedzi. W kodzie te elementy są jednak zwykłymi `div`, tekstem rozdzielonym przez `br` albo tabelą bez nagłówków.

Wtedy czytnik ekranu, tryb czytania, narzędzie do zmiany prezentacji albo inna technologia wspomagająca nie dostaje tej samej struktury. Użytkownik słyszy tekst, ale traci informację, co jest nagłówkiem, co jest listą, które komórki należą do którego nagłówka i które pola tworzą jedną grupę.

Kogo to dotyczy

• Osób niewidomych korzystających z czytników ekranu.
• Osób słabowidzących, które zmieniają wygląd strony, powiększają tekst albo korzystają z trybów uproszczonych.
• Osób głuchoniewidomych korzystających z linijek brajlowskich.
• Osób z trudnościami poznawczymi, dla których jasna struktura zmniejsza obciążenie.
• Osób korzystających z klawiatury i technologii wspomagających do nawigowania po nagłówkach, listach, tabelach i formularzach.
• Wszystkich użytkowników, gdy treść jest długa, formularz jest złożony albo tabela zawiera wiele danych.

Dobry przykład

Dobre rozwiązanie używa natywnego HTML do tego, co HTML już umie opisać. Wygląd może być dowolny, ale znaczenie musi wynikać z kodu albo z tekstu.

• Nagłówek jest oznaczony jako `h1`, `h2`, `h3` i tak dalej, a nie tylko powiększony CSS-em.
• Lista jest oznaczona jako `ul`, `ol` i `li`, a nie jako tekst z ręcznie wpisanymi kropkami i `br`.
• Tabela danych ma `caption`, komórki nagłówkowe `th` i odpowiedni `scope`.
• Pole formularza ma widoczną etykietę połączoną z polem przez `label` i `for`.
• Grupa pól, na przykład radio albo checkbox, ma `fieldset` i `legend` z pytaniem grupy.

Zły przykład

Zły wzorzec opiera się na tym, że coś tylko wygląda jak struktura. Dla osoby widzącej układ może być czytelny, ale w kodzie relacje nie istnieją.

• `div` z dużą czcionką udaje nagłówek.
• Lista jest zrobiona jako tekst z kropkami i przełamaniami linii.
• Tabela danych ma same komórki `td`, bez `th` i relacji nagłówków z danymi.
• Placeholder jest jedyną etykietą pola.
• Grupa radio ma kilka opcji, ale nie ma wspólnego pytania w `legend`.
• Kolor, położenie albo pogrubienie przekazuje znaczenie, którego nie ma w kodzie ani w tekście.

Przykłady kodu

<section>
  <h2>Dokumenty do pobrania</h2>

  <ul>
    <li>Regulamin</li>
    <li>Polityka prywatności</li>
    <li>Deklaracja dostępności</li>
  </ul>
</section>

Nagłówek i lista są strukturą w kodzie. Czytnik ekranu może przejść po nagłówkach i powiedzieć, że użytkownik jest na liście z trzema elementami.

<div class="big-title">
  Dokumenty do pobrania
</div>

<div>
  • Regulamin<br>
  • Polityka prywatności<br>
  • Deklaracja dostępności
</div>

To zły przykład. Tekst wygląda jak nagłówek i lista, ale w kodzie nie ma ani nagłówka, ani listy.

<table>
  <caption>Terminy szkoleń</caption>
  <thead>
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Miasto</th>
      <th scope="col">Miejsca</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12 czerwca</td>
      <td>Warszawa</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

Tabela danych ma tytuł i nagłówki kolumn. Dzięki temu relacja między komórką „8” a nagłówkiem „Miejsca” jest możliwa do ustalenia programowo.

<label for="email">
  Adres e-mail
</label>
<input
  id="email"
  name="email"
  type="email"
>

Widoczna etykieta jest połączona z konkretnym polem. To jest relacja, której nie zapewnia sam placeholder.

<fieldset>
  <legend>
    Wybierz sposób kontaktu
  </legend>

  <label>
    <input
      type="radio"
      name="contact-method"
      value="email"
    >
    E-mail
  </label>

  <label>
    <input
      type="radio"
      name="contact-method"
      value="phone"
    >
    Telefon
  </label>
</fieldset>

`fieldset` i `legend` pokazują, że opcje należą do jednej grupy i odpowiadają na wspólne pytanie.

Przykład graficzny

Jak sprawdzić

1. Przejdź po stronie i wypisz elementy, które wizualnie tworzą strukturę: nagłówki, listy, tabele, grupy pól, etykiety i wyróżnienia.
2. Sprawdź w kodzie, czy nagłówki są prawdziwymi elementami `h1`-`h6`.
3. Sprawdź, czy listy są oznaczone jako `ul`, `ol` i `li`, a nie jako tekst z kropkami.
4. Sprawdź tabele danych: czy mają nagłówki `th`, właściwy `scope` albo inne poprawne powiązanie nagłówków z komórkami.
5. Sprawdź formularze: czy pola mają widoczne etykiety połączone z polami.
6. Sprawdź grupy checkbox i radio: czy mają wspólne pytanie w `legend`.
7. Wyłącz CSS albo użyj narzędzia do inspekcji dostępności i zobacz, czy struktura nadal jest rozpoznawalna.
8. Przejdź po stronie czytnikiem ekranu, skrótami po nagłówkach, listach, tabelach i polach formularza.
9. Upewnij się, że informacje nie są przekazane wyłącznie przez wygląd, kolor, położenie albo wielkość tekstu.

Co sprawdzi automat, a czego nie

Automat może wykryć

• część pól formularza bez powiązanej etykiety,
• część tabel danych bez nagłówków,
• część niepoprawnych relacji `headers` i `id` w tabelach,
• część problemów z kolejnością lub poziomami nagłówków,
• część użyć semantyki w sposób niezgodny z treścią.

Automat nie oceni pewnie

• czy duży tekst powinien być nagłówkiem, czy tylko wyróżnieniem,
• czy dana grupa pól naprawdę potrzebuje wspólnego pytania,
• czy tabela jest tabelą danych, czy tylko układem wizualnym,
• czy relacje widoczne na ekranie są kompletne w kodzie,
• czy tekstowa alternatywa rzeczywiście przekazuje tę samą informację co prezentacja.

Typowe błędy

• Nagłówki zrobione przez `div`, `span`, pogrubienie albo większą czcionkę.
• Listy zapisane jako zwykły tekst z kropkami, myślnikami i `br`.
• Tabele danych bez `th`, `caption`, `scope` albo poprawnych relacji nagłówków z komórkami.
• Używanie tabeli układowej i jednocześnie oznaczanie jej jak tabeli danych.
• Placeholder jako jedyna etykieta pola formularza.
• Grupa radio albo checkbox bez `fieldset` i `legend`.
• Wymagane pola oznaczone tylko kolorem, bez tekstu albo programowo dostępnej informacji.
• Usuwanie semantyki z treści, która niesie znaczenie, na przykład przez `role="presentation"`.

Powiązane kryteria

• 1.3.2 Zrozumiała kolejność: gdy znaczenie zależy od kolejności treści.
• 1.3.5 Określenie celu danych wejściowych: gdy pola danych osobowych powinny mieć rozpoznawalny cel.
• 2.4.6 Nagłówki i etykiety: gdy trzeba ocenić, czy nagłówki i etykiety są opisowe.
• 3.3.2 Etykiety lub instrukcje: gdy użytkownik potrzebuje informacji przed wpisaniem danych.
• 4.1.2 Nazwa, rola, wartość: gdy trzeba sprawdzić nazwę, rolę, stan i wartość komponentu interfejsu.
• 1.4.1 Użycie koloru: gdy informacja jest przekazana wyłącznie kolorem.

Źródła

• WCAG 2.2: 1.3.1 Info and Relationships (otwiera się w nowym oknie)
• Understanding WCAG 1.3.1: Info and Relationships (otwiera się w nowym oknie)
• How to Meet WCAG 1.3.1: Info and Relationships (otwiera się w nowym oknie)
• H42: Using h1-h6 to identify headings (otwiera się w nowym oknie)
• H48: Using ol, ul and dl for lists or groups of links (otwiera się w nowym oknie)
• H51: Using table markup to present tabular information (otwiera się w nowym oknie)
• H63: Using the scope attribute to associate header cells with data cells in data tables (otwiera się w nowym oknie)
• H44: Using label elements to associate text labels with form controls (otwiera się w nowym oknie)
• H71: Providing a description for groups of form controls using fieldset and legend elements (otwiera się w nowym oknie)
• F91: Failure for not correctly marking up table headers (otwiera się w nowym oknie)