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

7. Etykiety pól formularza
   • Użycie <label> z atrybutem for, aby powiązać etykiety z odpowiednimi polami formularza.
8. 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

9. Poprawne oznaczenie tabel danych
   • Nagłówki w tabelach oznaczone jako <th> i powiązane z komórkami <td> za pomocą atrybutu scope.
10. Korekta orientacji w tabelach dużych zestawów danych

• Używanie atrybutu headers w tabelach o skomplikowanej strukturze.

11. Prezentacja danych na wykresach

• Dodanie tabeli danych pod wykresem jako alternatywnej formy przedstawienia informacji.

---

Elementy interaktywne

12. Wyróżnianie przycisków jako akcji

• Użycie <button> zamiast <div> lub <span> dla przycisków.

13. Sekcje wysuwanych paneli

• Każdy panel FAQ oznaczony semantycznie jako <section> z aria-expanded.

14. Poprawne oznaczenie treści skopiowanych do clipboardu

• Dodanie komunikatu z użyciem aria-live, np. „Tekst został skopiowany”.

15. 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

16. Infografiki z alternatywnymi opisami

• Dodanie tekstu alternatywnego dla diagramów, które opisują ich treść.

17. Opisanie ikon nawigacyjnych

• Ikony, takie jak strzałki, mają opisy w aria-hidden="false" lub za pomocą ukrytego tekstu.

18. 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

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

---

Dane i tabele

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

---

Elementy interaktywne

8. Brak roli w komponentach interaktywnych
   • Złożone elementy (np. suwaki, przełączniki) bez atrybutów ARIA, takich jak role="switch".
9. Brak oznaczenia aktywnego linku
   • Brak aria-current="page" dla bieżącej strony w nawigacji.
10. Brak opisu dla elementów sterujących karuzelą

• Przyciski „Dalej” i „Wstecz” w karuzeli nie mają opisów w aria-label.

---

Grafiki i multimedia

11. Obrazy bez tekstu alternatywnego

• Brak atrybutu alt dla grafik przedstawiających ważne informacje.

12. Informacje wyłącznie przekazane kolorem

• Kluczowe dane (np. „zaznaczone na czerwono”) nie mają dodatkowego tekstu opisowego.

13. 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😊