Przykłady poprawnego zastosowania kryterium 1.3.1 na stronie internetowej lub aplikacji mobilnej
Struktura treści
- Nagłówki i ich hierarchia
- Stosowanie
<h1>
,<h2>
,<h3>
w logicznej kolejności, aby odzwierciedlić strukturę dokumentu.
- Stosowanie
- Strukturalne oznaczanie akapitów
- Tekst na stronie jest podzielony na akapity za pomocą
<p>
zamiast używania<div>
.
- Tekst na stronie jest podzielony na akapity za pomocą
- Listy uporządkowane i nieuporządkowane
- Używanie
<ul>
i<ol>
z<li>
do prezentowania list zamiast ręcznego formatowania.
- Używanie
- Grupowanie powiązanych pól formularza
- Pola grupowane za pomocą
<fieldset>
i opisane przy użyciu<legend>
.
- Pola grupowane za pomocą
- Hierarchiczna struktura menu nawigacyjnego
- Menu główne i podmenu są semantycznie oznaczone jako zagnieżdżone
<ul>
.
- Menu główne i podmenu są semantycznie oznaczone jako zagnieżdżone
- Oznaczenie stron w paginacji
- Dodanie atrybutu
aria-current="page"
do aktualnej strony w paginacji.
- Dodanie atrybutu
Formularze
- Etykiety pól formularza
- Użycie
<label>
z atrybutemfor
, aby powiązać etykiety z odpowiednimi polami formularza.
- Użycie
- Wyraźne oznaczenie błędów walidacji w formularzach
- Informowanie użytkownika o błędach za pomocą
aria-invalid
i komunikatów tekstowych.
- Informowanie użytkownika o błędach za pomocą
Dane i tabele
- Poprawne oznaczenie tabel danych
- Nagłówki w tabelach oznaczone jako
<th>
i powiązane z komórkami<td>
za pomocą atrybutuscope
.
- Nagłówki w tabelach oznaczone jako
- Korekta orientacji w tabelach dużych zestawów danych
- Używanie atrybutu
headers
w tabelach o skomplikowanej strukturze.
- Prezentacja danych na wykresach
- Dodanie tabeli danych pod wykresem jako alternatywnej formy przedstawienia informacji.
Elementy interaktywne
- Wyróżnianie przycisków jako akcji
- Użycie
<button>
zamiast<div>
lub<span>
dla przycisków.
- Sekcje wysuwanych paneli
- Każdy panel FAQ oznaczony semantycznie jako
<section>
zaria-expanded
.
- Poprawne oznaczenie treści skopiowanych do clipboardu
- Dodanie komunikatu z użyciem
aria-live
, np. „Tekst został skopiowany”.
- 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
- Infografiki z alternatywnymi opisami
- Dodanie tekstu alternatywnego dla diagramów, które opisują ich treść.
- Opisanie ikon nawigacyjnych
- Ikony, takie jak strzałki, mają opisy w
aria-hidden="false"
lub za pomocą ukrytego tekstu.
- 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
- Brak semantycznych znaczników dla sekcji zawartości
- Używanie
<div>
zamiast<header>
,<main>
,<footer>
czy<article>
.
- Używanie
- Wielopoziomowe nagłówki w niewłaściwej kolejności
- Przeskakiwanie z
<h1>
do<h4>
bez zachowania hierarchii.
- Przeskakiwanie z
- Brak oznaczenia list rozwijanych
- Brak atrybutów
aria-haspopup
iaria-expanded
w rozwijanych menu.
- Brak atrybutów
Formularze
- Brak powiązania między etykietą a polem formularza
- Brak
<label>
lub atrybutufor
, co utrudnia obsługę formularzy.
- Brak
- Brak opisu błędów walidacji
- Pola z błędami są oznaczone tylko kolorem, bez dodatkowego opisu tekstowego.
Dane i tabele
- Tabela używana do układu strony
- Wykorzystywanie
<table>
do układu wizualnego zamiast do prezentowania danych.
- Wykorzystywanie
- Tabela bez nagłówków kolumn
- Brak
<th>
w tabelach prezentujących dane.
- Brak
Elementy interaktywne
- Brak roli w komponentach interaktywnych
- Złożone elementy (np. suwaki, przełączniki) bez atrybutów ARIA, takich jak
role="switch"
.
- Złożone elementy (np. suwaki, przełączniki) bez atrybutów ARIA, takich jak
- Brak oznaczenia aktywnego linku
- Brak
aria-current="page"
dla bieżącej strony w nawigacji.
- Brak
- Brak opisu dla elementów sterujących karuzelą
- Przyciski „Dalej” i „Wstecz” w karuzeli nie mają opisów w
aria-label
.
Grafiki i multimedia
- Obrazy bez tekstu alternatywnego
- Brak atrybutu
alt
dla grafik przedstawiających ważne informacje.
- Informacje wyłącznie przekazane kolorem
- Kluczowe dane (np. „zaznaczone na czerwono”) nie mają dodatkowego tekstu opisowego.
- 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😊