Godziny otwarcia Pon-Pt: 8.00 - 17.00

Zastosowanie kryterium 1.3.1 – Informacje i relacje: Przykłady poprawnego i złego zastosowania w kodzie

Przykłady poprawnego zastosowania kryterium 1.3.1 na stronie internetowej lub aplikacji mobilnej

 

Struktura treści

  1. Nagłówki i ich hierarchia
    • Stosowanie <h1>, <h2>, <h3> w logicznej kolejności, aby odzwierciedlić strukturę dokumentu.
  2. Strukturalne oznaczanie akapitów
    • Tekst na stronie jest podzielony na akapity za pomocą <p> zamiast używania <div>.
  3. Listy uporządkowane i nieuporządkowane
    • Używanie <ul> i <ol> z <li> do prezentowania list zamiast ręcznego formatowania.
  4. Grupowanie powiązanych pól formularza
    • Pola grupowane za pomocą <fieldset> i opisane przy użyciu <legend>.
  5. Hierarchiczna struktura menu nawigacyjnego
    • Menu główne i podmenu są semantycznie oznaczone jako zagnieżdżone <ul>.
  6. Oznaczenie stron w paginacji
    • Dodanie atrybutu aria-current="page" do aktualnej strony w paginacji.

Formularze

  1. Etykiety pól formularza
    • Użycie <label> z atrybutem for, aby powiązać etykiety z odpowiednimi polami formularza.
  2. Wyraźne oznaczenie błędów walidacji w formularzach
    • Informowanie użytkownika o błędach za pomocą aria-invalid i komunikatów tekstowych.

Dane i tabele

  1. Poprawne oznaczenie tabel danych
    • Nagłówki w tabelach oznaczone jako <th> i powiązane z komórkami <td> za pomocą atrybutu scope.
  2. Korekta orientacji w tabelach dużych zestawów danych
  • Używanie atrybutu headers w tabelach o skomplikowanej strukturze.
  1. Prezentacja danych na wykresach
  • Dodanie tabeli danych pod wykresem jako alternatywnej formy przedstawienia informacji.

Elementy interaktywne

  1. Wyróżnianie przycisków jako akcji
  • Użycie <button> zamiast <div> lub <span> dla przycisków.
  1. Sekcje wysuwanych paneli
  • Każdy panel FAQ oznaczony semantycznie jako <section> z aria-expanded.
  1. Poprawne oznaczenie treści skopiowanych do clipboardu
  • Dodanie komunikatu z użyciem aria-live, np. „Tekst został skopiowany”.
  1. Zastosowanie ARIA dla dynamicznych treści
  • Używanie atrybutów takich jak aria-labelledby, aria-describedby dla komponentów jak modale czy suwaki.

Grafiki i multimedia

  1. Infografiki z alternatywnymi opisami
  • Dodanie tekstu alternatywnego dla diagramów, które opisują ich treść.
  1. Opisanie ikon nawigacyjnych
  • Ikony, takie jak strzałki, mają opisy w aria-hidden="false" lub za pomocą ukrytego tekstu.
  1. Oznaczenie języka dla fragmentów tekstu
  • Użycie atrybutu lang w elementach tekstowych, aby określić ich język.

Przykłady błędów naruszających kryterium 1.3.1 na stronie internetowej lub aplikacji mobilnej

 

Struktura treści

  1. Brak semantycznych znaczników dla sekcji zawartości
    • Używanie <div> zamiast <header>, <main>, <footer> czy <article>.
  2. Wielopoziomowe nagłówki w niewłaściwej kolejności
    • Przeskakiwanie z <h1> do <h4> bez zachowania hierarchii.
  3. Brak oznaczenia list rozwijanych
    • Brak atrybutów aria-haspopup i aria-expanded w rozwijanych menu.

Formularze

  1. Brak powiązania między etykietą a polem formularza
    • Brak <label> lub atrybutu for, co utrudnia obsługę formularzy.
  2. Brak opisu błędów walidacji
    • Pola z błędami są oznaczone tylko kolorem, bez dodatkowego opisu tekstowego.

Dane i tabele

  1. Tabela używana do układu strony
    • Wykorzystywanie <table> do układu wizualnego zamiast do prezentowania danych.
  2. Tabela bez nagłówków kolumn
    • Brak <th> w tabelach prezentujących dane.

Elementy interaktywne

  1. Brak roli w komponentach interaktywnych
    • Złożone elementy (np. suwaki, przełączniki) bez atrybutów ARIA, takich jak role="switch".
  2. Brak oznaczenia aktywnego linku
    • Brak aria-current="page" dla bieżącej strony w nawigacji.
  3. Brak opisu dla elementów sterujących karuzelą
  • Przyciski „Dalej” i „Wstecz” w karuzeli nie mają opisów w aria-label.

Grafiki i multimedia

  1. Obrazy bez tekstu alternatywnego
  • Brak atrybutu alt dla grafik przedstawiających ważne informacje.
  1. Informacje wyłącznie przekazane kolorem
  • Kluczowe dane (np. „zaznaczone na czerwono”) nie mają dodatkowego tekstu opisowego.
  1. Niewłaściwe wykorzystanie elementu <blockquote>
  • Cytaty nie są oznaczone semantycznie, lecz jako zwykły tekst w <div>.

Podsumowanie

Dobre praktyki polegają na konsekwentnym wykorzystaniu semantyki HTML i ARIA, co pozwala wszystkim użytkownikom (także tym korzystającym z technologii wspomagających) zrozumieć strukturę i funkcjonalność strony.
Błędy wynikają najczęściej z pomijania semantycznych znaczników, polegania wyłącznie na stylach wizualnych oraz braku opisów dla elementów interaktywnych czy grafik.

Potrzebujesz szczegółowych wytycznych lub analizy konkretnego przypadku? Napisz do nas😊