2.4.3 - Fókusz sorrend

Kategória: 2. Működtethető (Operable) Irányelv: 2.4. Navigálható Szint: A

Röviden a szabványpontról

A WCAG 2.4.3 (Focus Order) előírja, hogy amikor billentyűzettel navigálsz az interaktív elemek között egy weboldalon, a fókusz olyan sorrendben mozogjon, amely megőrzi a jelentést és a használhatóságot. Ez azt jelenti, hogy a Tab billentyű használatakor a fókusz logikus és kiszámítható módon haladjon végig az oldalon.

Mire vonatkozik: Minden billentyűzetről működtethető felületi komponensre, mint linkek, űrlapmezők, gombok és egyéni interaktív widgetek.

Cél: Biztosítani, hogy a billentyűzetes navigációra hagyatkozó felhasználók:

Logikusan tudjanak navigálni az oldalon
Ne kerüljenek zavarba a váratlan fókusz ugrások miatt
Hatékonyan érhessék el az összes interaktív elemet

Kiket érint

Elsődleges felhasználók: Azok, akik mozgáskorlátozottság, ideiglenes sérülés vagy preferencia miatt nem tudnak egeret használni. Ide tartoznak a képernyőolvasót vagy kapcsoló eszközöket használó emberek is.

Másodlagos előnyök: Javítja mindenki használhatóságát logikus tab sorrenddel, csökkenti a frusztrációt és növeli a navigációs hatékonyságot.

Tesztelés

Billentyűzetes navigáció: Használd a Tab billentyűt az interaktív elemek között és győződj meg róla, hogy a fókusz logikus sorrendben mozog, amely megfelel a vizuális elrendezésnek
Képernyőolvasó teszt: Navigálj billentyűzet parancsokkal és figyelj arra, milyen sorrendben jelentik be az elemeket
DOM sorrend ellenőrzése: Vizsgáld meg a fejlesztői eszközökkel a DOM sorrendet és ellenőrizd, hogy egyezik-e a vizuális sorrenddel
Automatizált eszközök: Használj akadálymentességi tesztelő eszközöket, mint az axe DevTools a fókusz sorrend problémák felderítésére
Egyéni widgetek: JavaScript fókusz kezeléssel rendelkező vezérlőknél ellenőrizd, hogy a fókusz kiszámíthatóan mozog és nem ejti csapdába a felhasználókat

Jó gyakorlatok

1. Egyszerű űrlap logikus tab sorrenddel

<form>
  <label for="nev">Név:</label>
  <input id="nev" type="text" required aria-describedby="nev-help" />
  <div id="nev-help" class="help-text">Adja meg teljes nevét</div>
  
  <label for="email">E-mail cím:</label>
  <input id="email" type="email" required aria-describedby="email-help" />
  <div id="email-help" class="help-text">Érvényes e-mail címet adjon meg</div>
  
  <button type="submit">Küldés</button>
</form>

A fókusz sorrend követi a természetes olvasási és vizuális sorrendet (Név → E-mail → Küldés gomb), így intuitív a billentyűzetes felhasználók számára. Az ARIA leírások további kontextust biztosítanak.

2. Navigációs menü DOM sorrendben

<nav role="navigation" aria-label="Fő navigáció">
  <ul>
    <li><a href="#kezdolap" aria-current="page">Kezdőlap</a></li>
    <li><a href="#rolunk">Rólunk</a></li>
    <li><a href="#szolgaltatasok">Szolgáltatások</a></li>
    <li><a href="#kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

A DOM sorrend megfelel a vizuális sorrendnek, így a billentyűzetes felhasználók kiszámíthatóan navigálhatnak. Az ARIA címkék és a current oldal jelzése további tájékozódást segít.

3. Egyéni modal dialógus kezelt fókusszal

<!-- Modal trigger -->
<button id="modal-megnyitas" onclick="modalMegnyitas()">Modal megnyitása</button>

<!-- Modal dialog -->
<div id="modal" class="modal" role="dialog" aria-labelledby="modal-cim" aria-hidden="true">
  <div class="modal-tartalom">
    <h2 id="modal-cim">Megerősítés szükséges</h2>
    <p>Biztosan törölni szeretné az elemet?</p>
    <button id="megerosites" onclick="torlesTovabbi()">Igen, törlés</button>
    <button id="megse" onclick="modalBezaras()">Mégse</button>
    <button class="bezaras" onclick="modalBezaras()" aria-label="Modal bezárása">×</button>
  </div>
</div>

<script>
function modalMegnyitas() {
  const modal = document.getElementById('modal');
  const elozoFokusz = document.activeElement;
  
  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');
  
  // Fókusz az első interaktív elemre
  document.getElementById('megerosites').focus();
  
  // Fókusz csapdázása a modalon belül
  modal.addEventListener('keydown', fokuszCsapda);
  
  // Eredeti fókusz mentése
  modal.elozoFokusz = elozoFokusz;
}

function modalBezaras() {
  const modal = document.getElementById('modal');
  modal.style.display = 'none';
  modal.setAttribute('aria-hidden', 'true');
  
  // Fókusz visszaállítása
  if (modal.elozoFokusz) {
    modal.elozoFokusz.focus();
  }
  
  modal.removeEventListener('keydown', fokuszCsapda);
}

function fokuszCsapda(e) {
  if (e.key === 'Tab') {
    const fokuszolhatoElemek = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    const elsoElem = fokuszolhatoElemek[0];
    const utolsoElem = fokuszolhatoElemek[fokuszolhatoElemek.length - 1];
    
    if (e.shiftKey) {
      if (document.activeElement === elsoElem) {
        utolsoElem.focus();
        e.preventDefault();
      }
    } else {
      if (document.activeElement === utolsoElem) {
        elsoElem.focus();
        e.preventDefault();
      }
    }
  }
  
  // Escape billentyűre bezárás
  if (e.key === 'Escape') {
    modalBezaras();
  }
}
</script>

A modal megnyitásakor a fókusz az első interaktív elemre kerül, a modalon belül marad ciklikusan, és bezáráskor visszaáll az eredeti pozícióra. Ez megakadályozza, hogy a billentyűzetes felhasználók akaratlanul a modal mögötti tartalomra navigáljanak.

Rossz gyakorlatok

Önkényes fókusz ugrások

<button onclick="document.getElementById('lablec').focus()">Ugrás a láblécre</button>
<!-- Váratlanul mozgatja a fókuszt, megzavarja a billentyűzetes felhasználókat -->

Probléma: A fókusz kiszámíthatatlan mozgatása JavaScript-tel megtöri a logikus navigációt és megzavarja a felhasználókat.

Helytelen DOM sorrend

<div>
  <input id="email" type="email" placeholder="E-mail cím" />
  <input id="nev" type="text" placeholder="Név" />
</div>
<!-- Vizuális sorrend: Név, E-mail; DOM sorrend: E-mail, Név -->

Probléma: A vizuális sorrend eltér a DOM sorrendtől, ami zavaró tab szekvenciát eredményez.

Billentyűzet csapdák

<div class="modal">
  <input type="text" />
  <button>OK</button>
  <!-- Nincs mód a kilépésre billentyűzettel -->
</div>

Probléma: A fókusz beszorul egy elemben (mint egy modal) anélkül, hogy lenne mód kimozdulni.

Interaktív elemek kihagyása

<button tabindex="-1">Fontos művelet</button>
<!-- Eltávolítja az elemet a tab sorrendből szándékolatlanul -->

Probléma: Elemek szándékolatlan eltávolítása a tab sorrendből a tabindex=”-1″ használatával.

Dinamikus tartalom fókusz kezelés nélkül

<button onclick="ujTartalomBetoltes()">Tartalom betöltése</button>
<div id="dinamikus-tartalom"></div>

<script>
function ujTartalomBetoltes() {
  document.getElementById('dinamikus-tartalom').innerHTML = 
    '<h2>Új tartalom</h2><button>Új gomb</button>';
  // Nincs fókusz kezelés az új tartalomhoz
}
</script>

Probléma: Dinamikusan hozzáadott tartalom esetén a fókusz nem kerül az új elemekre, így a billentyűzetes felhasználók nem értesülnek a változásról.

Rejtett tartalom a tab sorrendben

<div style="display: none;">
  <button>Rejtett gomb</button>
</div>
<!-- A gomb továbbra is elérhető Tab-bal annak ellenére, hogy láthatatlan -->

Probléma: Vizuálisan rejtett elemek továbbra is elérhetők a billentyűzettel, ami zavart okoz, mivel a felhasználó nem látja, hová került a fókusz.

Források

Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!