1.3.3 - Érzékszervi jellemzők

Kategória: 1. Érzékelhető (Perceivable) Irányelv: 1.3. Adaptálhatóság Szint: A

Röviden a szabványpontról

A WCAG 1.3.3 (Sensory Characteristics) előírja, hogy a tartalom megértéséhez vagy működtetéséhez adott utasítások ne támaszkodjanak kizárólag érzékszervi jellemzőkre, mint például alakra, méretre, vizuális helyzetre, tájolásra vagy hangra. Ez minden olyan tartalomra vonatkozik, ahol utasítások vannak megadva (pl. „kattints a piros gombra”, „nyomd meg a bal felső billentyűt”, vagy „hallgasd meg a sípolást”).

A cél az, hogy biztosítsa, hogy azok a felhasználók, akik nem tudják érzékelni ezeket az érzékszervi jelzéseket – mint például látás-, kognitív vagy mozgásfogyatékossággal élő felhasználók – még mindig meg tudják érteni és működtetni a tartalmat.

Kiket érint

Ez a szabványpont elsősorban azokat a felhasználókat érinti, akiknek látásproblémái, színvaksága, kognitív fogyatékossága vagy mozgáskorlátozottsága van, és nem tudják érzékelni vagy értelmezni az érzékszervi jelzéseket, mint a szín, alak vagy hang egymagában. De hasznos lehet akkor is, ha:

Kihívást jelentő környezetben használják (erős napfény, zajos helyek)
Kisegítő technológiákat használnak, mint a képernyőolvasók

Tesztelés

A kritérium megfelelőségének teszteléséhez próbáld ki a következőket:

Nézd át az összes utasítást a felhasználói felületen és tartalomban. Ellenőrizd, hogy van-e olyan, amely csak érzékszervi jellemzőkre támaszkodik (pl. „kattints a zöld körre”)
Használj képernyőolvasót annak ellenőrzésére, hogy az utasítások érthetők-e vizuális vagy hallható jelzések nélkül
Teszteld színvakság szimulátorral, hogy a színalapú utasítások érthetők-e
Csak billentyűzetes navigációs teszt: Győződj meg róla, hogy az utasítások működtethetők anélkül, hogy csak a térbeli tájolásra támaszkodnának
Kérdezd meg a fogyatékossággal élő felhasználókat, vagy használj akadálymentességi tesztelő eszközöket annak megerősítésére, hogy az utasítások érzékelhetők érzékszervi jelzések nélkül

Jó gyakorlatok

Íme néhány gyakorlati forgatókönyv és HTML példa annak biztosítására, hogy az utasítások ne támaszkodjanak kizárólag érzékszervi jellemzőkre:

Színnel és alakkal azonosított gombok

<!-- JÓ: szöveges címke hozzáadása az egyértelműség érdekében -->
<button id="submit-btn" style="background-color: red;">Küldés</button>
<p>Kattints a "Küldés" gombra (piros) az űrlap elküldéséhez.</p>

<!-- Még jobb: ikon és szöveg kombinációja -->
<button id="save-btn">
  <span style="color: green;" aria-hidden ="true">✓</span> Mentés
</button>
<p>Kattints a "Mentés" gombra a változások elmentéséhez.</p>

Pozícióra támaszkodó utasítások

<!-- JÓ: explicit címkék hozzáadása -->
<p>Nyomd meg az "Első" gombot az indításhoz.</p>
<button id="first-btn">Első</button>
<button id="second-btn">Második</button>

<!-- Még jobb: megfelelő labeling és grouping -->
<fieldset>
  <legend>Művelet választása</legend>
  <button id="start-btn">Indítás</button>
  <button id="stop-btn">Leállítás</button>
</fieldset>
<p>Kattints az "Indítás" gombra a folyamat elkezdéséhez.</p>

Hang jelzések

<!-- JÓ: vizuális és szöveges alternatívák biztosítása -->
<div class="notification">
  <p>Amikor hallod a sípolást vagy látod a zöld jelzőfényt, folytathatsz.</p>
  <div id="status-light" class="indicator" aria-live="polite">
    <span id="status-text">Várakozás...</span>
  </div>
</div>

<script>
// Amikor a folyamat kész
function processComplete() {
  document.getElementById('status-light').style.backgroundColor = 'green';
  document.getElementById('status-text').textContent = 'Kész! Folytathatsz.';
  // Hang lejátszása (opcionális)
  playBeep();
}
</script>

Alak vagy méret jelzések

<!-- JÓ: szöveges címke hozzáadása -->
<p>Kattints a "Folytatás" gombra (nagy kék kör) a továbblépéshez.</p>
<button id="continue-btn" aria-label="Folytatás" class="large-round-button">
  Folytatás
</button>

<!-- Alternatív megoldás: értelmes szöveggel -->
<div class="action-buttons">
  <button class="primary-action">Következő lépés</button>
  <button class="secondary-action">Vissza</button>
</div>
<p>Kattints a "Következő lépés" gombra a folytatáshoz.</p>

Űrlap mezők megkülönböztetése

<!-- JÓ: címkék és leírások kombinációja -->
<form>
  <div>
    <label for="required-field">Név (kötelező)</label>
    <input type="text" id="required-field" required aria-describedby="req-desc">
    <span id="req-desc" class="required-indicator">* Ez a mező kötelező</span>
  </div>
  
  <div>
    <label for="optional-field">Megjegyzés (opcionális)</label>
    <textarea id="optional-field" aria-describedby="opt-desc"></textarea>
    <span id="opt-desc">Ez a mező nem kötelező</span>
  </div>
</form>

Rossz gyakorlatok

Csak színre támaszkodó utasítások

<button style="background-color: red;">Küldés</button>
<p>Kattints a piros gombra az elküldéshez.</p>

Probléma: Színvak felhasználók nem tudják megkülönböztetni a gombot.

Csak térbeli helyzetre támaszkodó utasítások

<p>Nyomd meg a jobb oldali gombot.</p>
<button>Mégse</button>
<button>OK</button>

Probléma: Képernyőolvasók nem közvetítik a térbeli elhelyezkedést.

Csak hangra támaszkodó jelzések

<p>Hallgasd meg a sípolást a folytatáshoz.</p>

Probléma: Siket felhasználók nem hallják a hangjelzést.

Csak alakra vagy méretre támaszkodó utasítások

<p>Kattints a nagy körre a folytatáshoz.</p>
<div style="width: 100px; height: 100px; border-radius: 50%; background: blue;"></div>

Probléma: Képernyőolvasók nem közvetítik a vizuális alakzatokat.

Források

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