2.4.5 - Többféle mód

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

Röviden a szabványpontról

A WCAG 2.4.5 (Multiple Ways) előírja, hogy egynél több módon lehessen megtalálni egy weboldalt a weboldalak halmazán belül, kivéve ha az oldal egy folyamat része vagy eredményoldal. Ez minden olyan webes tartalomra vonatkozik, amely több oldalból vagy szakaszból áll, mint például webhelyek, webalkalmazások és online dokumentációk.

Mire vonatkozik: Minden több oldalból vagy szakaszból álló webes tartalomra, beleértve a webhelyeket, webalkalmazásokat és online dokumentációkat.

Cél: Biztosítani, hogy a felhasználók:

Hatékonyan navigálhassanak és megtalálják a tartalmat
Több navigációs módszer közül választhassanak
Különböző stratégiákra vagy segítő technológiákra támaszkodva gyorsan megtalálják az információkat
Frusztráció nélkül böngészhessenek

Kiket érint

Elsődleges felhasználók: Kognitív fogyatékossággal élő emberek, akik több navigációs lehetőségből profitálnak a zavar csökkentése érdekében. Mozgáskorlátozottak, akik számára bizonyos navigációs módszerek könnyebbek. Csak billentyűzetet használók és képernyőolvasó felhasználók, akik landmarkokra, címsorokra vagy menükre támaszkodnak.

Másodlagos előnyök: Javítja az általános használhatóságot minden felhasználó számára rugalmas navigációs útvonalakkal. Támogatja a gyengénlátó felhasználókat is, akik a oldaltérképet vagy keresést részesíthetik előnyben a menük görgetése helyett.

Tesztelés

Több navigációs mechanizmus ellenőrzése: Győződj meg róla, hogy legalább két különböző módon elérheted a kulcsfontosságú oldalakat, például navigációs menü plusz oldaltérkép vagy keresési funkció
Csak billentyűzetes navigáció: Ellenőrizd, hogy minden navigációs módszer billentyűzettel működtethető
Képernyőolvasó teszt: Használj képernyőolvasót annak ellenőrzésére, hogy több navigációs landmark vagy link elérhető és egyértelműen címkézve van.
Felhasználói folyamat teszt: Navigálj ugyanarra az oldalra különböző módszerekkel (menü, keresés, közvetlen link) hogy meggyőződj róla, minden útvonal megfelelően működik
Automatizált eszközök: Használj akadálymentességi eszközöket a hiányzó landmarkok vagy navigációs elemek azonosítására, de mindig egészítsd ki manuális teszteléssel

Jó gyakorlatok

1. Navigációs menü + keresőmező

<!-- Fő navigációs menü -->
<nav aria-label="Fő navigáció">
  <ul>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
    <li><a href="/rolunk">Rólunk</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

<!-- Keresési űrlap -->
<form role="search" action="/kereses" method="get">
  <label for="oldal-kereses">Keresés az oldalon:</label>
  <input type="search" id="oldal-kereses" name="q" 
         placeholder="Pl: laptop, webfejlesztés..."
         aria-describedby="kereses-help" />
  <div id="kereses-help" class="sr-only">
    Írj be kulcsszavakat a kereséshez és nyomd meg az Enter billentyűt
  </div>
  <button type="submit">Keresés</button>
</form>

<!-- Gyors linkek -->
<nav aria-label="Gyors linkek">
  <h2>Gyakran keresett oldalak</h2>
  <ul>
    <li><a href="/arlista">Árlisták</a></li>
    <li><a href="/tamogatas">Ügyfélszolgálat</a></li>
    <li><a href="/gyakori-kerdesek">GYIK</a></li>
    <li><a href="/letoltes">Letöltések</a></li>
  </ul>
</nav>

A felhasználók megtalálhatják az oldalakat a menüben böngészve vagy közvetlenül keresve. A gyors linkek további alternatívát biztosítanak a népszerű tartalmakhoz.

2. Breadcrumb navigáció + oldaltérkép link

<!-- Breadcrumb navigáció -->
<nav aria-label="Útvonal">
  <ol class="breadcrumb">
    <li><a href="/">Kezdőlap</a></li>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/termekek/laptopok">Laptopok</a></li>
    <li aria-current="page">HP Pavilion 15</li>
  </ol>
</nav>

<!-- Oldaltérkép és egyéb navigációs linkek -->
<aside class="navigacios-segitseg">
  <h2>Navigációs segítség</h2>
  <ul>
    <li><a href="/oldalterkep" aria-label="Teljes oldaltérkép megtekintése">Oldaltérkép</a></li>
    <li><a href="/a-z-index">A-Z tartalomjegyzék</a></li>
    <li><a href="/kategoria-lista">Kategóriák listája</a></li>
    <li><a href="/nepszeru-oldalak">Népszerű oldalak</a></li>
  </ul>
</aside>

<!-- Kapcsolódó oldalak -->
<nav aria-label="Kapcsolódó oldalak">
  <h2>Kapcsolódó termékek</h2>
  <ul>
    <li><a href="/termekek/laptopok/dell-inspiron">Dell Inspiron sorozat</a></li>
    <li><a href="/termekek/laptopok/lenovo-thinkpad">Lenovo ThinkPad sorozat</a></li>
    <li><a href="/kiegeszitok/laptop-tasek">Laptop táskák</a></li>
  </ul>
</nav>

A breadcrumb navigáció mutatja az aktuális oldal helyét, az oldaltérkép pedig áttekintést ad a teljes webhelyről. A kapcsolódó oldalak további navigációs lehetőségeket kínálnak.

3. Landmarkok + ugrási linkek

<!-- Ugrási linkek a fő tartalomhoz -->
<div class="skip-links">
  <a href="#fo-tartalom" class="skip-link">Ugrás a fő tartalomhoz</a>
  <a href="#fo-navigacio" class="skip-link">Ugrás a fő navigációhoz</a>
  <a href="#kereses" class="skip-link">Ugrás a kereséshez</a>
  <a href="#lablec" class="skip-link">Ugrás a lábléchez</a>
</div>

<!-- Landmark régiók -->
<header role="banner">
  <h1>Cégem neve</h1>
  <nav id="fo-navigacio" role="navigation" aria-label="Fő navigáció">
    <ul>
      <li><a href="/">Kezdőlap</a></li>
      <li><a href="/termekek">Termékek</a></li>
      <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
    </ul>
  </nav>
</header>

<!-- Keresési terület -->
<aside role="search" id="kereses">
  <h2>Keresés</h2>
  <form action="/kereses" method="get">
    <label for="kereses-mezo">Mit keresel?</label>
    <input type="search" id="kereses-mezo" name="q">
    <button type="submit">Keresés indítása</button>
  </form>
</aside>

<!-- Fő tartalom -->
<main id="fo-tartalom" role="main">
  <h1>Oldal címe</h1>
  <p>Fő tartalom kezdete...</p>
  
  <!-- Oldal belső navigáció -->
  <nav aria-label="Oldal belső navigáció">
    <h2>Ezen az oldalon</h2>
    <ul>
      <li><a href="#bevezetes">Bevezetés</a></li>
      <li><a href="#reszletek">Részletes leírás</a></li>
      <li><a href="#specifikacio">Műszaki adatok</a></li>
      <li><a href="#arak">Árak és csomagok</a></li>
    </ul>
  </nav>
</main>

<!-- Oldalsáv további navigációval -->
<aside role="complementary">
  <h2>További navigáció</h2>
  <nav aria-label="Kategóriák">
    <h3>Termék kategóriák</h3>
    <ul>
      <li><a href="/laptopok">Laptopok</a></li>
      <li><a href="/asztali-gepek">Asztali gépek</a></li>
      <li><a href="/kiegeszitok">Kiegészítők</a></li>
    </ul>
  </nav>
</aside>

<!-- Lábléc -->
<footer id="lablec" role="contentinfo">
  <nav aria-label="Lábléc navigáció">
    <h2>Hasznos linkek</h2>
    <ul>
      <li><a href="/aszf">ÁSZF</a></li>
      <li><a href="/adatvedelmi-tajekoztato">Adatvédelmi tájékoztató</a></li>
      <li><a href="/sugo">Súgó</a></li>
    </ul>
  </nav>
</footer>

<style>
.skip-links {
  position: absolute;
  top: -40px;
  left: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  transition: top 0.3s;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Az ugrási linkek és landmarkok több módon biztosítják a billentyűzetes felhasználóknak, hogy a tartalomhoz juthassanak. A különböző navigációs régiók tisztán elkülönülnek és címkézettek.

4. Szűrők + kategóriás böngészés + címke navigáció

<!-- Szűrési lehetőségek -->
<aside role="search" aria-label="Termék szűrők">
  <h2>Termékek szűrése</h2>
  <form action="/termekek" method="get">
    <fieldset>
      <legend>Ár tartomány</legend>
      <label for="min-ar">Minimum ár:</label>
      <input type="number" id="min-ar" name="min_ar" min="0">
      <label for="max-ar">Maximum ár:</label>
      <input type="number" id="max-ar" name="max_ar">
    </fieldset>
    
    <fieldset>
      <legend>Márka</legend>
      <label><input type="checkbox" name="marka[]" value="hp"> HP</label>
      <label><input type="checkbox" name="marka[]" value="dell"> Dell</label>
      <label><input type="checkbox" name="marka[]" value="lenovo"> Lenovo</label>
    </fieldset>
    
    <button type="submit">Szűrők alkalmazása</button>
  </form>
</aside>

<!-- Kategóriás böngészés -->
<nav aria-label="Termék kategóriák">
  <h2>Böngészés kategóriák szerint</h2>
  <ul>
    <li>
      <a href="/kategoria/szamitastechnika">Számítástechnika</a>
      <ul>
        <li><a href="/kategoria/laptopok">Laptopok</a></li>
        <li><a href="/kategoria/asztali-gepek">Asztali gépek</a></li>
        <li><a href="/kategoria/monitorok">Monitorok</a></li>
      </ul>
    </li>
    <li>
      <a href="/kategoria/kiegeszitok">Kiegészítők</a>
      <ul>
        <li><a href="/kategoria/egerek-billentyzetek">Egerek és billentyűzetek</a></li>
        <li><a href="/kategoria/hangszórok">Hangszórók</a></li>
      </ul>
    </li>
  </ul>
</nav>

<!-- Címke alapú navigáció -->
<nav aria-label="Címkék szerinti böngészés">
  <h2>Népszerű címkék</h2>
  <ul class="cimke-lista">
    <li><a href="/cimke/gaming" class="cimke">Gaming</a></li>
    <li><a href="/cimke/munka" class="cimke">Munka</a></li>
    <li><a href="/cimke/olcso" class="cimke">Olcsó</a></li>
    <li><a href="/cimke/premium" class="cimke">Prémium</a></li>
    <li><a href="/cimke/uj" class="cimke">Új termékek</a></li>
    <li><a href="/cimke/akcios" class="cimke">Akciós</a></li>
  </ul>
</nav>

<!-- Gyors navigáció számokhoz/betűkhöz -->
<nav aria-label="Alfabetikus böngészés">
  <h2>Gyors ugrás</h2>
  <ul class="abc-nav">
    <li><a href="/termekek?kezdobetu=a">A</a></li>
    <li><a href="/termekek?kezdobetu=b">B</a></li>
    <li><a href="/termekek?kezdobetu=c">C</a></li>
    <li><a href="/termekek?kezdobetu=d">D</a></li>
    <!-- ... további betűk ... -->
  </ul>
</nav>

Különböző navigációs módszerek kombinálása: szűrés, kategóriás böngészés, címkék és alfabetikus navigáció. Ez sokféle keresési stratégiát támogat.

Rossz gyakorlatok

Csak egyetlen navigációs módszer

<!-- Rossz: Csak navigációs menü, nincs keresés vagy oldaltérkép -->
<nav>
  <ul>
    <li><a href="/fooldal">Főoldal</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
    <li><a href="/termekek">Termékek</a></li>
  </ul>
</nav>
<!-- Nincs keresés, oldaltérkép vagy egyéb navigációs lehetőség -->

Probléma: Csak a navigációs menü korlátozza a felhasználói lehetőségeket. Nincs alternatív mód az oldalak megtalálására.

Címkézetlen vagy következetlen navigáció

<!-- Rossz: Navigáció aria-label nélkül, nem egyértelmű cél -->
<nav>
  <ul>
    <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
    <li><a href="/rolunk">Rólunk</a></li>
  </ul>
</nav>

<!-- Rossz: Következetlen sorrend különböző oldalakon -->
<!-- 1. oldalon: Főoldal, Termékek, Kapcsolat -->
<!-- 2. oldalon: Termékek, Főoldal, Kapcsolat -->
<!-- 3. oldalon: Kapcsolat, Termékek, Főoldal -->

Probléma: A navigációs elemek tiszta címkék nélkül vagy következetlen sorrendben zavarják a felhasználókat és megnehezítik a tájékozódást.

Nem billentyűzettel elérhető navigációs módszerek

<!-- Rossz: Keresőmező csak egérrel működik -->
<div onclick="openSearch()">Keresés</div>
<input type="text" style="display:none" id="search-box">

<!-- Rossz: Lebegő menü csak hover eseményre -->
<nav>
  <ul>
    <li class="dropdown">
      <span>Termékek</span>
      <ul class="dropdown-menu">
        <li><a href="/laptopok">Laptopok</a></li>
        <li><a href="/asztali-gepek">Asztali gépek</a></li>
      </ul>
    </li>
  </ul>
</nav>
<!-- CSS csak :hover pszeudo-osztályt használ, nincs :focus -->

<!-- Rossz: JavaScript függő navigáció billentyűzet támogatás nélkül -->
<button onclick="showMenu()" onmouseover="showMenu()">Menü</button>
<!-- Nincs billentyűzet eseménykezelő -->

Probléma: A keresőmezők vagy egyéb navigációs módszerek, amelyek csak egér interakciót igényelnek, kizárják a csak billentyűzetet használó felhasználókat.

Elrejtett vagy nehezen megtalálható navigációs lehetőségek

<!-- Rossz: Oldaltérkép link láblécben apró betűvel elrejtve -->
<footer>
  <p style="font-size: 8px; color: #ccc;">
    <a href="/sitemap" style="color: #ccc;">oldaltérkép</a>
  </p>
</footer>

<!-- Rossz: Keresés csak mobilon elérhető -->
<form class="mobile-only-search">
  <input type="search" name="q">
  <button>Keresés</button>
</form>

<!-- Rossz: Navigációs lehetőségek mélyen elásva -->
<div>
  <div>
    <div>
      <div>
        <small><a href="/advanced-search">Részletes keresés</a></small>
      </div>
    </div>
  </div>
</div>

Probléma: A navigációs lehetőségek elrejtése vagy nehezen megtalálható helyre tétele miatt a felhasználók nem tudják kihasználni a többféle navigációs módot.

Nem működő vagy rossz navigációs linkek

<!-- Rossz: Törött linkek a navigációban -->
<nav>
  <ul>
    <li><a href="/old-page-that-no-longer-exists">Régi oldal</a></li>
    <li><a href="">Üres link</a></li>
    <li><a href="#">Holt link</a></li>
  </ul>
</nav>

<!-- Rossz: Keresés nem működik -->
<form action="/not-existing-search">
  <input type="search" name="q">
  <button type="submit">Keresés</button>
</form>

Probléma: A törött vagy nem működő navigációs elemek frusztrálja a felhasználókat és csökkenti a webhely használhatóságát.

Források

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