Przykłady poprawnego zastosowania kryterium 1.3.2 na stronie internetowej lub aplikacji mobilnej
Kryterium 1.3.2 – Zrozumiała kolejność wymaga, aby treści na stronie internetowej były prezentowane w logicznej kolejności zarówno wizualnie, jak i w kodzie. Dotyczy to kolejności czytania treści przez użytkownika, np. podczas korzystania z technologii wspomagających.
Przykłady poprawnego zastosowania (programistyczne)
1. Poprawna kolejność w kodzie HTML
Scenariusz: Elementy HTML są ułożone w logicznej kolejności, odpowiadającej kolejności wizualnej na stronie.
Przykład kodu:
<header>
<h1>Nagłówek strony</h1>
</header>
<nav>
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#about">O nas</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<main>
<h2>O nas</h2>
<p>Treść o firmie...</p>
</main>
<footer>
<p>Prawa autorskie 2024</p>
</footer>
Dlaczego to działa? Elementy w kodzie są w tej samej kolejności, w jakiej użytkownik widzi je na stronie.
2. Unikanie wizualnego zamieszania z CSS
Scenariusz: Elementy są stylizowane przy użyciu CSS, ale ich kolejność w kodzie pozostaje logiczna.
Przykład kodu:
<main>
<article>
<h2>Główny artykuł</h2>
<p>Treść artykułu...</p>
</article>
<aside>
<h3>Boczna sekcja</h3>
<p>Dodatkowe informacje...</p>
</aside>
</main>
aside {
float: right;
}
Dlaczego to działa? W kodzie HTML kolejność czytania jest poprawna, a stylizacje CSS służą tylko do zmiany układu wizualnego.
3. Formularze z logiczną kolejnością elementów
Scenariusz: Pola formularza są ułożone w logicznej kolejności, od góry do dołu.
Przykład kodu:
<form>
<label for="name">Imię:</label>
<input type="text" id="name" name="name">
<label for=„email”>E-mail:</label><input type=„email” id=„email” name=„email”>
<button type=„submit”>Wyślij</button></form>
Dlaczego to działa? Kolejność elementów w kodzie pokrywa się z naturalnym przepływem użytkownika.
4. Interaktywne elementy w odpowiedniej kolejności
Scenariusz: Na stronie z menu i przyciskami interaktywnymi kolejność interakcji odpowiada wizualnemu układowi.
Przykład kodu:
<button>Otwórz menu</button>
<div role="menu">
<a href="#item1">Opcja 1</a>
<a href="#item2">Opcja 2</a>
</div>
Dlaczego to działa? Kolejność w kodzie odpowiada kolejności na stronie – menu pojawia się zaraz po przycisku, który je otwiera.
5. Logiczne grupowanie za pomocą ARIA
Scenariusz: Sekwencja elementów nawigacyjnych jest odpowiednio oznaczona dla czytników ekranu.
Przykład kodu:
<nav aria-label="Główne menu">
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#about">O nas</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
Dlaczego to działa? Atrybut aria-label
zapewnia dodatkowy kontekst użytkownikom technologii wspomagających.
6. Poprawna obsługa widocznych i ukrytych elementów
Scenariusz: Ukryte elementy są dostępne w odpowiednim momencie i nie zakłócają kolejności czytania.
Przykład kodu:
<div id="modal" aria-hidden="true">
<h2>Modal</h2>
<p>Treść w oknie modalnym...</p>
</div>
#modal {
display: none;
}
Dlaczego to działa? Element #modal
jest ukryty dla wszystkich użytkowników, dopóki nie zostanie jawnie pokazany.
7. Kolejność nagłówków w dynamicznie generowanych treściach
Scenariusz: Na stronie bloga treści są ładowane dynamicznie (np. przez JavaScript), ale kolejność elementów pozostaje logiczna.
Przykład kodu:
<div id="post">
<h1>Tytuł artykułu</h1>
<p>Treść artykułu...</p>
<footer>Autor: Jan Kowalski</footer>
</div>
<script>
document.getElementById('post').innerHTML += '<section><h2>Komentarze</h2><p>Brak komentarzy</p></section>';
</script>
Dlaczego to działa? Elementy ładowane dynamicznie są dodawane we właściwym miejscu hierarchii strony.
8. Poprawne korzystanie z ról ARIA w formularzach
Scenariusz: Formularz wieloetapowy ma jasną strukturę z rolami ARIA i właściwą kolejnością interakcji.
Przykład kodu:
<form>
<div role="group" aria-labelledby="step1">
<h2 id="step1">Krok 1: Informacje podstawowe</h2>
<label for="name">Imię:</label>
<input type="text" id="name" name="name">
</div>
<div role="group" aria-labelledby="step2">
<h2 id="step2">Krok 2: Adres</h2>
<label for="address">Adres:</label>
<input type="text" id="address" name="address">
</div>
</form>
Dlaczego to działa? Role ARIA pomagają zrozumieć strukturę i kolejność formularza, a każdy krok jest jasno oznaczony.
9. Kolejność nawigacji w złożonych komponentach
Scenariusz: Na stronie złożone komponenty, takie jak menu rozwijane, zachowują odpowiednią kolejność nawigacji.
Przykład kodu:
<button id="menuButton">Otwórz menu</button>
<nav id="menu" aria-hidden="true">
<ul>
<li><a href="#section1">Sekcja 1</a></li>
<li><a href="#section2">Sekcja 2</a></li>
<li><a href="#section3">Sekcja 3</a></li>
</ul>
</nav>
<script>
const menu = document.getElementById('menu');
const button = document.getElementById('menuButton');
button.addEventListener('click', () => {
menu.setAttribute('aria-hidden', menu.getAttribute('aria-hidden') === 'true' ? 'false' : 'true');
});
</script>
Dlaczego to działa? Menu jest poprawnie wstawione w kodzie po przycisku otwierającym, a jego widoczność jest kontrolowana.
10. Kolejność interakcji w galerii zdjęć
Scenariusz: Użytkownik może poruszać się po galerii za pomocą klawiatury w logicznej kolejności.
Przykład kodu:
<div class="gallery">
<button aria-label="Poprzednie zdjęcie">⟵</button>
<img src="photo1.jpg" alt="Zdjęcie 1">
<button aria-label="Następne zdjęcie">⟶</button>
</div>
Dlaczego to działa? Kolejność elementów w kodzie odpowiada wizualnej kolejności interakcji.
11. Zrozumiała kolejność w tabelach zagnieżdżonych
Scenariusz: Tabela zawierająca zagnieżdżone dane zachowuje logiczną strukturę.
Przykład kodu:
<table>
<thead>
<tr>
<th>Produkt</th>
<th>Szczegóły</th>
</tr>
</thead>
<tbody>
<tr>
<td>Produkt A</td>
<td>
<table>
<thead>
<tr><th>Kolor</th><th>Waga</th></tr>
</thead>
<tbody>
<tr><td>Czerwony</td><td>1kg</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Dlaczego to działa? Nawet w przypadku zagnieżdżonych danych kolejność jest logiczna i jasna.
12. Logiczne ukrywanie i odkrywanie treści
Scenariusz: Na stronie sekcje treści są ukrywane i odkrywane w odpowiednim momencie, nie zaburzając kolejności czytania.
Przykład kodu:
<h2>FAQ</h2>
<button aria-expanded="false" aria-controls="faq1">Pytanie 1</button>
<div id="faq1" hidden>
<p>Odpowiedź na pytanie 1</p>
</div>
<button aria-expanded="false" aria-controls="faq2">Pytanie 2</button>
<div id="faq2" hidden>
<p>Odpowiedź na pytanie 2</p>
</div>
Dlaczego to działa? Treści są logicznie powiązane z pytaniami i odpowiednio ukrywane.
13. Kolejność przycisków w nawigacji mobilnej
Scenariusz: W wersji mobilnej strony nawigacja rozwijana jest prezentowana poniżej przycisku otwierającego menu, a kolejność w kodzie odpowiada wizualnemu układowi.
Przykład kodu:
<button aria-expanded="false" id="menuButton">Menu</button>
<nav id="menu" aria-hidden="true">
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#services">Usługi</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
Dlaczego to działa? Nawigacja pojawia się w logicznym miejscu względem przycisku otwierającego.
14. Wielokolumnowe układy z poprawną kolejnością HTML
Scenariusz: Na stronie zastosowano układ wielokolumnowy, ale w kodzie HTML elementy zachowują logiczną kolejność.
Przykład kodu:
<section>
<h2>Nagłówek główny</h2>
<p>Treść główna w lewej kolumnie...</p>
</section>
<aside>
<h3>Dodatkowe informacje</h3>
<p>Treść w prawej kolumnie...</p>
</aside>
section {
float: left;
width: 70%;
}
aside {
float: right;
width: 30%;
}
Dlaczego to działa? Kolejność czytania w HTML jest logiczna, a układ jest zmieniany tylko wizualnie przez CSS.
15. Poprawna kolejność w responsywnych siatkach CSS
Scenariusz: W układach siatkowych (grid) elementy HTML mają logiczną kolejność, a CSS tylko modyfikuje ich położenie wizualne.
Przykład kodu:
<div class="grid">
<header>Górny baner</header>
<main>Treść główna</main>
<footer>Stopka</footer>
</div>
.grid {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
}
header {
grid-area: header;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
Dlaczego to działa? Elementy w kodzie HTML są w logicznej kolejności, a układ wizualny nie wpływa na czytelność.
16. Zarządzanie modalami w kolejności nawigacji
Scenariusz: Po otwarciu modala użytkownik klawiatury przechodzi wyłącznie przez elementy wewnątrz tego okna, bez przypadkowego opuszczania go.
Przykład kodu:
<button id="openModal">Otwórz modal</button>
<div id="modal" role="dialog" aria-hidden="true">
<h2>Tytuł modala</h2>
<p>Treść modalna</p>
<button>Zamknij</button>
</div>
const modal = document.getElementById('modal');
const button = document.getElementById('openModal');
button.addEventListener('click', () => {
modal.setAttribute('aria-hidden', 'false');
});
Dlaczego to działa? Kolejność elementów w modalach jest odpowiednia i ograniczona do samego modala, co zapewnia spójność.
17. Grupowanie logicznych sekcji za pomocą landmarków
Scenariusz: Użyto landmarków ARIA i HTML5 (<header>
, <main>
, <footer>
) do podziału strony na sekcje w logicznej kolejności.
Przykład kodu:
<header>Baner</header>
<main>Treść główna</main>
<footer>Stopka</footer>
Dlaczego to działa? Landmarki pomagają użytkownikom zrozumieć kolejność i przeznaczenie sekcji.
18. Poprawna kolejność w rozwijanych sekcjach akordeonowych
Scenariusz: Na stronie znajduje się sekcja akordeonowa z pytaniami i odpowiedziami, które zachowują logiczną strukturę w kodzie.
Przykład kodu:
<section>
<button aria-expanded="false">Pytanie 1</button>
<div hidden>Odpowiedź na pytanie 1</div>
<button aria-expanded="false">Pytanie 2</button>
<div hidden>Odpowiedź na pytanie 2</div>
</section>
Dlaczego to działa? Treści są logicznie powiązane z elementami sterującymi, co zapewnia zgodność z kolejnością czytania.
Przykłady błędów naruszających kryterium
- Niespójność kolejności w kodzie i układzie wizualnym
- Nagłówki i treści są zamieszczone w losowej kolejności w kodzie HTML, ale za pomocą CSS wyświetlane w innej kolejności.
Przykład:
W kodzie nagłówek<h2>
jest poniżej akapitu<p>
, ale na stronie wyświetlany jest nad nim.
- Nagłówki i treści są zamieszczone w losowej kolejności w kodzie HTML, ale za pomocą CSS wyświetlane w innej kolejności.
- Niepoprawne wykorzystanie
tabindex
- Nadawanie elementom nielogicznych wartości
tabindex
, co powoduje przeskakiwanie kursora w losowej kolejności.
- Nadawanie elementom nielogicznych wartości
- Dynamiczne treści w niewłaściwym miejscu kolejności
- Na przykład popup lub reklama pojawia się w środku tekstu, zmieniając logiczną kolejność czytania.
- Użycie układów tabelarycznych zamiast semantycznego HTML
- Treść jest ułożona wizualnie w tabeli, ale w rzeczywistości jej kolejność nie odpowiada logicznemu przepływowi.
- Brak obsługi ukrytych elementów
- Ukryte elementy (np. za pomocą
visibility: hidden
) są nadal dostępne dla czytników ekranu i zakłócają kolejność.
- Ukryte elementy (np. za pomocą
- Nieintuicyjne grupowanie elementów
- Na przykład pola formularza są wymieszane z innymi treściami, co utrudnia zrozumienie ich powiązań.
- Przeskakiwanie elementów podczas nawigacji klawiaturą
- Elementy interaktywne, np. przyciski lub linki, są w kodzie ułożone w losowej kolejności, co powoduje chaos w nawigacji.
- Treści ładowane dynamicznie w niewłaściwym miejscu
- Na przykład: dynamicznie dodawany baner reklamowy pojawia się na środku treści, przerywając logiczną kolejność czytania.
- Brak powiązań między kontrolkami a treścią
- Przyciski rozwijające sekcje nie mają odpowiednich atrybutów ARIA, przez co czytniki ekranu nie rozpoznają zależności.
- Układ zmieniany przez CSS bez odpowiedniej struktury HTML
- CSS zmienia układ wizualny (np. przestawia kolumny), ale kolejność w kodzie HTML pozostaje nielogiczna.
- Brak atrybutów ARIA w interaktywnych komponentach
- Elementy, takie jak rozwijane listy czy modale, nie są odpowiednio opisane w kodzie, co powoduje chaos w technologii wspomagającej.
- Tabele używane do układu strony
- Tabele zawierają elementy wizualne zamiast danych, co zakłóca logiczną kolejność treści.
- Ukryte elementy widoczne dla czytników ekranu
- Treści ukryte wizualnie (np. za pomocą
visibility: hidden
) są nadal dostępne w kolejności czytania.
- Treści ukryte wizualnie (np. za pomocą
- Zmiana układu bez zmiany kolejności logicznej w HTML
- Na przykład treści wyświetlane wizualnie obok siebie są w kodzie HTML ułożone w odwrotnej kolejności.
- Nieprawidłowe zachowanie w modalu
- Użytkownik może przypadkowo przejść do elementów poza modalem, nawet gdy okno modalne jest otwarte.
- Dynamiczne treści pojawiające się w losowym miejscu
- Nowe elementy są wstawiane w środku czytanej treści, zakłócając logiczny przepływ.
- Brak ukrycia nieaktywnych elementów
- Na przykład ukryte rozwijane menu jest wciąż dostępne dla czytników ekranu i zakłóca ich działanie.
- Nielogiczne tablice wielokolumnowe
- Dane w tabelach wielokolumnowych są ułożone w taki sposób, że ich odczytanie w kolejności liniowej traci sens.
- Niepoprawne użycie landmarków
- Na przykład użycie
<main>
lub<header>
w kilku miejscach na jednej stronie, co dezorientuje użytkowników technologii wspomagających.
- Na przykład użycie