1.3.2 - Értelmes sorrend

Röviden a szabványpontról

A WCAG 1.3.2 (Meaningful Sequence) előírja, hogy amikor a tartalom bemutatásának sorrendje befolyásolja annak jelentését, akkor ezt programozottan meghatározhatóvá kell tenni. Ez azt jelenti, hogy az olvasási és navigációs sorrendnek meg kell őriznie a tartalom szándékolt jelentését és kapcsolatait. Ez minden olyan webes tartalomra vonatkozik, ahol a sorrend fontos információt közvetít, mint például bekezdések, listák, űrlap mezők vagy egy folyamat lépései.

A cél az, hogy biztosítsa, hogy azok a felhasználók, akik kisegítő technológiákra támaszkodnak, mint a képernyőolvasók, logikus és értelmes sorrendben tapasztalják meg a tartalmat, amely megegyezik a vizuális megjelenítéssel. Ez megelőzi a zavart és segít a felhasználóknak megérteni a tartalmat a szándékolt módon.

Kiket érint

Ez a szabványpont elsősorban azokat a felhasználókat érinti, akik képernyőolvasót vagy más kisegítő technológiát használnak, amelyek a tartalmat szekvenciálisan mutatják be. Hasznos lehet akkor is, ha:

• Kognitív fogyatékossággal élők számára kiszámítható, logikus tartalomfolyamot biztosít
• Segíti a csak billentyűzetet használó felhasználókat az űrlapok és tartalom könnyebb navigálásában

Tesztelés

Konkrét módszerek az értelmes sorrend tesztelésére:

1. Képernyőolvasó tesztelés: Hallgasd meg az oldal tartalmát felolvasva népszerű képernyőolvasókkal (NVDA, JAWS, VoiceOver). Ellenőrizd, hogy az olvasási sorrend megegyezik-e a vizuális sorrenddel és logikus folyamattal
2. Billentyűzetes navigáció: Csak a billentyűzetet használva (Tab, Shift+Tab, nyílbillentyűk) navigálj az interaktív elemeken. Ellenőrizd, hogy a fókusz sorrend értelmes sorrendet követ-e
3. DOM vizsgálat: Nézd meg a HTML struktúrát, hogy a DOM sorrend tükrözi-e a szándékolt olvasási sorrendet. Például a címsorok, bekezdések és listák logikus sorrendben jelenjenek meg
4. Akadálymentességi fa ellenőrzése: Használd a böngésző akadálymentességi eszközeit (Chrome DevTools Accessibility panel vagy Firefox Accessibility Inspector) annak ellenőrzésére, hogy az akadálymentességi fa sorrendje megegyezik-e a vizuális sorrenddel
5. Automatizált tesztelés: Használj akadálymentességi tesztelő eszközöket, mint az axe DevTools a lehetséges sorrendi problémák jelzésére, bár a kézi ellenőrzés elengedhetetlen

Jó gyakorlatok

Íme néhány valós forgatókönyv HTML példákkal:

Logikus tartalom sorrend

<h1>Cikk címe</h1>
<p>Bevezető bekezdés, amely elmagyarázza a témát.</p>
<p>Második bekezdés további részletekkel.</p>
<p>Összegző bekezdés a következtetésekkel.</p>

Magyarázat: A tartalom természetesen folyik a címsortól a bekezdésekig olvasási sorrendben.

Űrlap mezők sorrendben

<form>
  <label for="name">Név:</label>
  <input id="name" type="text" />
  
  <label for="email">E-mail:</label>
  <input id="email" type="email" />
  
  <label for="phone">Telefon:</label>
  <input id="phone" type="tel" />
  
  <button type="submit">Küldés</button>
</form>

Magyarázat: A címkék és input mezők csoportosítva vannak és úgy rendezettek, hogy megfeleljenek a vizuális elrendezésnek, biztosítva, hogy a képernyőolvasó felhasználók megértsék az űrlap sorrendjét.

Listák sorrendben

<h2>Sütemény készítés lépései</h2>
<ol>
  <li>1. lépés: Készítsd elő a hozzávalókat.</li>
  <li>2. lépés: Keverd össze a száraz alapanyagokat.</li>
  <li>3. lépés: Add hozzá a nedves hozzávalókat.</li>
  <li>4. lépés: Süsd 30 percig.</li>
</ol>

Magyarázat: A listaelem logikus sorrendben vannak, megőrizve a lépések jelentését.

Navigációs elemek megfelelő sorrendben

<nav>
  <ul>
    <li><a href="/">Főoldal</a></li>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

Magyarázat: A navigációs linkek logikus sorrendben követik egymást, ahogy a felhasználó várná.

CSS újrarendezés kerülése

Kerüld a CSS-sel történő vizuális újrarendezést (mint a flexbox order tulajdonság). Ehelyett mindig a DOM sorrendet módosítsd, hogy megfeleljen a kívánt vizuális sorrendnek.

<!-- Megfelelő megoldás: DOM sorrend megegyezik a vizuális sorrenddel -->
<div class="container">
  <div class="first-item">Első elem (vizuálisan és DOM-ban is első)</div>
  <div class="second-item">Második elem (vizuálisan és DOM-ban is második)</div>
  <div class="third-item">Harmadik elem (vizuálisan és DOM-ban is harmadik)</div>
</div>

Fontos: Nincs megbízható ARIA megoldás a CSS újrarendezés problémájára. A DOM sorrend módosítása az egyetlen helyes megoldás.

Rossz gyakorlatok

Gyakori hibák:

Vizuális sorrend eltér a DOM sorrendtől

<div style="display: flex; flex-direction: row-reverse;">
  <p>Második bekezdés</p>
  <p>Első bekezdés</p>
</div>

Probléma: A DOM sorrend „Második bekezdés”-t olvassa először, de vizuálisan „Első bekezdés” jelenik meg először. A képernyőolvasók a DOM sorrendet követik, zavart okozva.

Űrlap elemek rossz sorrendben

<form>
  <input id="email" type="email" />
  <label for="email">E-mail:</label>
  
  <input id="name" type="text" />
  <label for="name">Név:</label>
</form>

Probléma: A címkék az input mezők után következnek, megtörve a várt olvasási sorrendet.

Táblázatok használata elrendezéshez, ami megzavarja az olvasási sorrendet

<table>
  <tr>
    <td>Sidebar tartalom</td>
    <td>Fő tartalom cím</td>
  </tr>
  <tr>
    <td>Navigáció</td>
    <td>Fő tartalom szövege</td>
  </tr>
</table>

Probléma: A képernyőolvasók soronként olvassák: „Sidebar tartalom, Fő tartalom cím, Navigáció, Fő tartalom szövege” – ami nem logikus sorrend.

Források

• WCAG 2.2 Understanding Document: Meaningful Sequence↗⧉
• WCAG 2.2 Specification: Success Criterion 1.3.2 Meaningful Sequence↗⧉