Godziny otwarcia Pon-Pt: 8.00 - 17.00

Zastosowanie kryterium 1.3.2 – Zrozumiała kolejność: Przykłady poprawnego i złego zastosowania w kodzie

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

  1. 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.
  2. Niepoprawne wykorzystanie tabindex
    • Nadawanie elementom nielogicznych wartości tabindex, co powoduje przeskakiwanie kursora w losowej kolejności.
  3. 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.
  4. 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.
  5. 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ść.
  6. Nieintuicyjne grupowanie elementów
    • Na przykład pola formularza są wymieszane z innymi treściami, co utrudnia zrozumienie ich powiązań.
  7. 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.
  8. 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.
  9. 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.
  10. Układ zmieniany przez CSS bez odpowiedniej struktury HTML
    • CSS zmienia układ wizualny (np. przestawia kolumny), ale kolejność w kodzie HTML pozostaje nielogiczna.
  11. 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.
  12. Tabele używane do układu strony
    • Tabele zawierają elementy wizualne zamiast danych, co zakłóca logiczną kolejność treści.
  13. Ukryte elementy widoczne dla czytników ekranu
    • Treści ukryte wizualnie (np. za pomocą visibility: hidden) są nadal dostępne w kolejności czytania.
  14. 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.
  15. Nieprawidłowe zachowanie w modalu
    • Użytkownik może przypadkowo przejść do elementów poza modalem, nawet gdy okno modalne jest otwarte.
  16. Dynamiczne treści pojawiające się w losowym miejscu
    • Nowe elementy są wstawiane w środku czytanej treści, zakłócając logiczny przepływ.
  17. 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.
  18. Nielogiczne tablice wielokolumnowe
    • Dane w tabelach wielokolumnowych są ułożone w taki sposób, że ich odczytanie w kolejności liniowej traci sens.
  19. 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.