2.4.6 - Fejlécek és címkék

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.6 (Headings and Labels) előírja, hogy a címsorok és címkék leírják a hozzájuk tartozó tartalom vagy felhasználói felület komponensek témáját vagy célját. Ez minden címsorra, űrlap címkére, gombra, linkre és egyéb UI elemre vonatkozik, amelyek segítik a felhasználókat a tartalom vagy funkcionalitás megértésében.

Mire vonatkozik: Minden címsorra, űrlap címkére, gombra, linkre és egyéb felhasználói felület elemre, amelyek útmutatást adnak a tartalomban vagy funkcionalitásban.

Cél: Megkönnyíteni a felhasználók számára:

Különösen a segítő technológiát használóknak
Az oldal megértését és navigálását
Tiszta, értelmes leírások biztosítását
Gyors információszerzést és zavar csökkentését

Kiket érint

Elsődleges felhasználók: Kognitív fogyatékossággal élők, képernyőolvasó felhasználók, csak billentyűzetet használók és gyengénlátó felhasználók nagyban profitálnak a leíró címsorokból és címkékből. A tiszta címkék csökkentik a kognitív terhelést és segítik megérteni az oldal struktúráját és funkcióit.

Másodlagos előnyök: Mindenki profitál a jól szervezett, tiszta címkékkel ellátott tartalomból, mivel javítja a használhatóságot és a navigációs hatékonyságot.

Tesztelés

Képernyőolvasó áttekintés: Használj képernyőolvasót (NVDA, JAWS, VoiceOver) az oldalon való navigáláshoz és hallgasd meg a címsorokat, címkéket és gombokat. Ellenőrizd, hogy egyértelműen leírják céljukat
Billentyűzetes navigáció: Tabulálj az interaktív elemek között és ellenőrizd, hogy a címkék és gomb nevek értelmesek kontextus nélkül is
Automatizált eszközök: Használj akadálymentességi tesztelő eszközöket, mint az axe DevTools vagy axe Linter a hiányzó vagy nem egyértelmű vezérlő címkék felderítésére
Kód áttekintés: Vizsgáld meg a HTML-t, hogy a <h1>-<h6> elemek címsorokhoz legyenek használva és az űrlap vezérlők rendelkezzenek kapcsolódó <label> elemekkel vagy elérhető nevekkel
Felhasználói tesztelés: Figyeld meg fogyatékossággal élő felhasználókat az oldalon navigálva, hogy azonosítsd a nem egyértelmű címsorok vagy címkék okozta zavarokat

Jó gyakorlatok

1. Egyértelmű címsorok tartalmi szakaszokhoz

<!-- Jó: Tiszta, leíró címsorok -->
<h1>Felhasználói fiók kezelése</h1>

<h2>Személyes adatok</h2>
<p>Itt módosíthatod személyes információidat és kapcsolati adataidat.</p>

<h2>Biztonsági beállítások</h2>
<p>Jelszó megváltoztatása és kétfaktoros hitelesítés beállítása.</p>

<h2>Értesítési preferenciák</h2>
<p>E-mail és push értesítések testreszabása.</p>

<h2>Rendelési előzmények</h2>
<p>Korábbi rendelések megtekintése és követése.</p>

<!-- Jó: Blog bejegyzések címsorai -->
<article>
  <h1>Webes akadálymentesség alapjai kezdőknek</h1>
  <h2>Mi az akadálymentesség?</h2>
  <h2>WCAG irányelvek áttekintése</h2>
  <h3>Észlelhető tartalom</h3>
  <h3>Működtethető felület</h3>
  <h3>Érthető információ</h3>
  <h3>Robusztus kód</h3>
  <h2>Gyakorlati tippek a megvalósításhoz</h2>
</article>

A címsorok egyértelműen jelzik a szakasz témáját. A felhasználók könnyen megértik az oldal struktúráját és gyorsan megtalálják a keresett információt.

2. Megfelelően címkézett űrlap mezők

<!-- Jó: Explicit címkék űrlap mezőkhöz -->
<form>
  <fieldset>
    <legend>Személyes adatok</legend>
    
    <label for="teljes-nev">Teljes név *</label>
    <input type="text" id="teljes-nev" name="teljes_nev" required 
           aria-describedby="nev-help">
    <div id="nev-help" class="help-text">Vezetéknév és keresztnév</div>
    
    <label for="email-cim">E-mail cím *</label>
    <input type="email" id="email-cim" name="email" required
           aria-describedby="email-help">
    <div id="email-help" class="help-text">pl. nev@domain.hu</div>
    
    <label for="telefonszam">Telefonszám</label>
    <input type="tel" id="telefonszam" name="telefon"
           placeholder="+36 30 123 4567"
           aria-describedby="telefon-help">
    <div id="telefon-help" class="help-text">Opcionális, értesítések esetén</div>
  </fieldset>
  
  <fieldset>
    <legend>Lakcím</legend>
    
    <label for="iranyitoszam">Irányítószám *</label>
    <input type="text" id="iranyitoszam" name="zip" required
           pattern="[0-9]{4}" maxlength="4">
    
    <label for="varos">Város *</label>
    <input type="text" id="varos" name="city" required>
    
    <label for="utca-hazszam">Utca és házszám *</label>
    <input type="text" id="utca-hazszam" name="address" required>
  </fieldset>
  
  <fieldset>
    <legend>Értesítési beállítások</legend>
    
    <label>
      <input type="checkbox" name="newsletter" value="yes">
      Hírlevél feliratkozás
    </label>
    
    <label>
      <input type="checkbox" name="sms_notifications" value="yes">
      SMS értesítések
    </label>
  </fieldset>
  
  <button type="submit">Regisztráció véglegesítése</button>
</form>

A címkék explicit módon leírják minden beviteli mező célját. A fieldset és legend elemek csoportosítják a kapcsolódó mezőket, a segítő szövegek további kontextust adnak.

3. Gombok leíró szöveggel

<!-- Jó: Egyértelmű gomb szövegek -->
<div class="termek-kartya">
  <h3>iPhone 15 Pro</h3>
  <p>Ár: 449.990 Ft</p>
  <button type="button" onclick="kosarbaRak('iphone-15-pro')">
    Kosárba helyezés
  </button>
  <button type="button" onclick="kedvencekhez('iphone-15-pro')">
    Kedvencekhez adás
  </button>
  <a href="/termekek/iphone-15-pro" class="button">
    Részletek megtekintése
  </a>
</div>

<!-- Jó: Űrlap gombok -->
<form>
  <!-- űrlap mezők -->
  <div class="gomb-csoport">
    <button type="submit">Rendelés elküldése</button>
    <button type="button" onclick="mentesVazlat()">
      Mentés vázlatként
    </button>
    <button type="reset">Űrlap kiürítése</button>
    <a href="/kosár" class="button button-secondary">
      Vissza a kosárhoz
    </a>
  </div>
</form>

<!-- Jó: Navigációs gombok -->
<nav class="pagination" aria-label="Oldal navigáció">
  <a href="/termekek?oldal=1" aria-label="Első oldal">
    « Első
  </a>
  <a href="/termekek?oldal=4" aria-label="Előző oldal">
    ‹ Előző
  </a>
  <span aria-current="page">5. oldal</span>
  <a href="/termekek?oldal=6" aria-label="Következő oldal">
    Következő ›
  </a>
  <a href="/termekek?oldal=10" aria-label="Utolsó oldal">
    Utolsó »
  </a>
</nav>

<!-- Jó: Műveleti gombok kontextussal -->
<table>
  <caption>Felhasználók listája</caption>
  <thead>
    <tr>
      <th>Név</th>
      <th>E-mail</th>
      <th>Műveletek</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kiss János</td>
      <td>janos@example.com</td>
      <td>
        <button type="button" 
                aria-label="Kiss János szerkesztése"
                onclick="szerkesztes('user123')">
          Szerkesztés
        </button>
        <button type="button" 
                aria-label="Kiss János törlése"
                onclick="torles('user123')">
          Törlés
        </button>
      </td>
    </tr>
  </tbody>
</table>

A gomb szövegek egyértelműen meghatározzák az elvégzendő műveletet. Az ARIA címkék további kontextust biztosítanak ismétlődő gombok esetén.

4. ARIA címkék használata nem megfelelő látható szöveg esetén

<!-- Jó: ARIA címke ikonos gomboknál -->
<div class="modal">
  <div class="modal-header">
    <h2 id="modal-title">Megerősítés szükséges</h2>
    <button type="button" 
            class="close-button"
            aria-label="Ablak bezárása"
            onclick="modalBezaras()">
      ×
    </button>
  </div>
  <div class="modal-content">
    <p>Biztosan törölni szeretnéd ezt az elemet?</p>
    <button type="button" onclick="torles()">Igen, törlés</button>
    <button type="button" onclick="modalBezaras()">Mégse</button>
  </div>
</div>

<!-- Jó: Ikon gombok leíró címkékkel -->
<div class="audio-player">
  <button type="button" 
          aria-label="Lejátszás/szünet"
          onclick="togglePlay()">
    <span aria-hidden="true">⏯️</span>
  </button>
  <button type="button" 
          aria-label="Előző szám"
          onclick="previousTrack()">
    <span aria-hidden="true">⏮️</span>
  </button>
  <button type="button" 
          aria-label="Következő szám"
          onclick="nextTrack()">
    <span aria-hidden="true">⏭️</span>
  </button>
  <button type="button" 
          aria-label="Hangerő némítása"
          onclick="toggleMute()">
    <span aria-hidden="true">🔊</span>
  </button>
</div>

<!-- Jó: Komplex UI elemek aria-labelledby-jal -->
<div class="product-card">
  <h3 id="product-name">Vezeték nélküli fejhallgató</h3>
  <p id="product-price">29.990 Ft</p>
  <p id="product-rating">4.5 csillag (128 értékelés)</p>
  <button type="button" 
          aria-labelledby="product-name product-price"
          onclick="kosarbaRak('headphones-123')">
    Kosárba
  </button>
  <a href="/termekek/fejhallgato-123" 
     aria-labelledby="product-name">
    További részletek
  </a>
</div>

<!-- Jó: Keresési mezők és szűrők -->
<form role="search">
  <div class="search-group">
    <label for="search-query" class="sr-only">Keresési kifejezés</label>
    <input type="search" 
           id="search-query" 
           name="q" 
           placeholder="Termékek keresése..."
           aria-describedby="search-help">
    <div id="search-help" class="sr-only">
      Írj be legalább 3 karaktert a kereséshez
    </div>
    <button type="submit" aria-label="Keresés indítása">
      <span aria-hidden="true">🔍</span>
    </button>
  </div>
  
  <div class="filters">
    <label for="category-filter">Kategória</label>
    <select id="category-filter" name="category">
      <option value="">Minden kategória</option>
      <option value="electronics">Elektronika</option>
      <option value="clothing">Ruházat</option>
    </select>
    
    <label for="price-range">Ár tartomány</label>
    <select id="price-range" name="price">
      <option value="">Bármilyen ár</option>
      <option value="0-10000">0 - 10.000 Ft</option>
      <option value="10000-50000">10.000 - 50.000 Ft</option>
    </select>
  </div>
</form>

A látható „×” vagy emoji nem leíró, ezért az aria-label biztosítja az egyértelműséget a segítő technológia felhasználók számára. Az aria-labelledby összekapcsolja a gombokat a kapcsolódó tartalommal.

Rossz gyakorlatok

Nem leíró címsorok

<!-- Rossz: Általános, nem informatív címsorok -->
<h2>1. szakasz</h2>
<h2>Beállítások</h2>
<h2>Információ</h2>
<h2>További</h2>

<!-- Rossz: Technikai vagy kódszerű címsorok -->
<h1>Page_001</h1>
<h2>Section_A</h2>
<h2>DIV_Container_2</h2>

Probléma: Az „1. szakasz” vagy „Beállítások” nem írja le a tartalmat, megzavarva a képernyőolvasó felhasználókat, akik a címsorokon keresztül navigálnak.

Hiányzó űrlap címkék

<!-- Rossz: Címke nélküli beviteli mezők -->
<input type="text" name="username" placeholder="Felhasználónév">
<input type="password" name="password">
<input type="email" name="email">

<!-- Rossz: Címke rossz helyen vagy nem kapcsolódik -->
<p>Név:</p>
<input type="text" name="name">

<label>E-mail cím</label>
<input type="email" name="email"> <!-- nincs for/id kapcsolat -->

Probléma: Címke nélkül a felhasználók nem tudják meghatározni a beviteli mező célját. A placeholder nem helyettesíti a címkét.

Gombok homályos szöveggel

<!-- Rossz: Nem informatív gomb szövegek -->
<button>Kattints ide</button>
<button>OK</button>
<button>Tovább</button>
<button>Itt</button>
<button>Igen</button>

<!-- Rossz: Ismétlődő gomb szövegek kontextus nélkül -->
<table>
  <tr>
    <td>Termék A</td>
    <td><button>Szerkesztés</button></td>
  </tr>
  <tr>
    <td>Termék B</td>
    <td><button>Szerkesztés</button></td>
  </tr>
</table>

Probléma: A „Kattints ide” nem közli, mit csinál a gomb, így a navigáció nem egyértelmű. Az ismétlődő „Szerkesztés” gombok nem megkülönböztethetők.

Dekoratív ikonok elérhető név nélkül

<!-- Rossz: Csak ikon gomb kontextus nélkül -->
<button><i class="icon-close"></i></button>
<button><img src="edit.png" alt=""></button>
<button>🗑️</button>

<!-- Rossz: Font ikon címke nélkül -->
<button class="btn-icon">
  <i class="fa fa-trash"></i>
</button>

<!-- Rossz: SVG ikon hozzáférhető név nélkül -->
<button>
  <svg width="24" height="24">
    <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862..."></path>
  </svg>
</button>

Probléma: A képernyőolvasók csak „gomb”-ot hallanak kontextus nélkül, mivel az ikonok nem rendelkeznek elérhető névvel.

Félrevezető vagy pontatlan címkék

<!-- Rossz: Félrevezető gomb szöveg -->
<button onclick="deleteAccount()">Fiók mentése</button>
<button onclick="logout()">Bejelentkezés</button>

<!-- Rossz: Nem egyező címke és funkció -->
<label for="phone">E-mail cím</label>
<input type="tel" id="phone" name="phone">

<!-- Rossz: Zavaró vagy technikai címkék -->
<h2>_tmp_section_header_001</h2>
<button id="btn_submit_form_ajax_call">BTN_SUBMIT</button>
<label for="input_field_user_data_email">USER_EMAIL_FIELD</label>

Probléma: A félrevezető címkék megtörik a felhasználók bizalmát és váratlan működést okoznak. A technikai nevek nem érthetők a végfelhasználók számára.

Hiányzó vagy rossz címsor hierarchia

<!-- Rossz: Rossz címsor sorrend -->
<h1>Főcím</h1>
<h3>Alcím</h3> <!-- h2 kimaradt -->
<h2>Másik szakasz</h2> <!-- rossz sorrend -->

<!-- Rossz: Stílusozáshoz használt címsorok -->
<h1>Nagy szöveg</h1>
<p>Ez valójában nem főcím, csak nagy betűk kellenek.</p>
<h4>Kicsi szöveg</h4>
<p>Ez sem alcím, csak kisebb betűk.</p>

<!-- Rossz: Üres vagy dummy címsorok -->
<h2>&nbsp;</h2>
<h2>Lorem ipsum</h2>
<h2>Cím helye</h2>

Probléma: A rossz címsor hierarchia megzavarja a képernyőolvasó felhasználókat, akik a címsorok alapján navigálnak és értelmezik az oldal struktúráját.

Források

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