1.3.1 - Információ és kapcsolatok

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.1 (Info and Relationships) előírja, hogy a prezentáció által közvetített információk, struktúra és kapcsolatok programozottan meghatározhatók legyenek. Ez azt jelenti, hogy a tartalom szervezési módját – mint például címsorok, listák, táblázatok és űrlap címkék – úgy kell kódolni, hogy a kisegítő technológiák (mint a képernyőolvasók) megérthessék és közvetíthessék a struktúrát a felhasználók számára.

A cél az, hogy biztosítsa, hogy azok a felhasználók, akik kisegítő technológiákra támaszkodnak, zavar nélkül érzékelni tudják a tartalom szervezését és jelentését, lehetővé téve a jobb navigációt és megértést.

Kiket érint

Ez a szabványpont elsősorban a vak és gyengénlátó felhasználókat segíti, akik képernyőolvasót vagy más kisegítő technológiát használnak. Emellett hasznos lehet olyan esetekben is, amikor:

világos és következetes struktúrára van szükség – például kognitív fogyatékossággal élők számára,
fontos szempont a javított szemantikai jelölés, amely elősegíti a keresőoptimalizálást (SEO) és a jobb mobilos használhatóságot.

Tesztelés

Íme néhány gyakorlati módszer az 1.3.1 megfelelőség tesztelésére:

Használj képernyőolvasót (NVDA, JAWS, VoiceOver) a címsorok, listák és táblázatok navigálásához. Ellenőrizd, hogy a struktúra helyesen kerül-e bejelentésre
Vizsgáld meg a HTML szemantikus elemeket (pl. <h1>, <ul>, <table>, <label>) a helyes használat ellenőrzéséhez
Ellenőrizd az űrlap vezérlőket, hogy minden input mezőhöz tartozzon kapcsolódó címke vagy hozzáférhető név
Validáld az oldalt automatizált eszközökkel, mint az axe DevTools vagy axe Linter, hogy megtaláld a hiányzó szemantikus elemeket
Használd a böngésző fejlesztői eszközeit az ARIA szerepek és tulajdonságok helyes alkalmazásának ellenőrzéséhez, amikor a natív HTML elemek nem elegendőek

Jó gyakorlatok

Íme néhány valós példa:

Megfelelő címsor struktúra

<h1>Fő oldal címe</h1>
<h2>Szakasz címe</h2>
<h3>Alszakasz címe</h3>
<!-- A címsorok világos hierarchiát mutatnak -->

Listák használata csoportosított elemekhez

<ul>
  <li>Elem 1</li>
  <li>Elem 2</li>
  <li>Elem 3</li>
</ul>
<!-- A képernyőolvasók listaként jelentik be -->

Űrlap mezők címkékkel

<label for="email">E-mail cím:</label>
<input type="email" id="email" name="email" />
<!-- A címke programozottan társítva van -->

<!-- Alternatív megoldás implicit címkével -->
<label>
  Telefonszám:
  <input type="tel" name="phone" />
</label>

Táblázatok megfelelő fejlécekkel

<table>
  <caption>Termékek árai</caption>
  <thead>
    <tr>
      <th scope="col">Termék</th>
      <th scope="col">Ár</th>
      <th scope="col">Készlet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>3000 Ft</td>
      <td>5 db</td>
    </tr>
  </tbody>
</table>
<!-- A fejlécek azonosítják az oszlopokat a képernyőolvasók számára -->

Komplex űrlap struktúra

<fieldset>
  <legend>Személyes adatok</legend>
  
  <label for="firstname">Keresztnév:</label>
  <input type="text" id="firstname" name="firstname" required>
  
  <label for="lastname">Vezetéknév:</label>
  <input type="text" id="lastname" name="lastname" required>
</fieldset>

<fieldset>
  <legend>Kapcsolattartási preferenciák</legend>
  
  <input type="radio" id="email-pref" name="contact" value="email">
  <label for="email-pref">E-mail</label>
  
  <input type="radio" id="phone-pref" name="contact" value="phone">
  <label for="phone-pref">Telefon</label>
</fieldset>

Rossz gyakorlatok

Kerülendő gyakori hibák:

Csak vizuális formázás használata címsorokhoz

<div style="font-weight:bold; font-size:20px;">Szakasz címe</div>
<p>Ez a szöveg látszólag címsor, de szemantikusan nem az.</p>

Probléma: A képernyőolvasók nem ismerik fel címsorként, mert nincs szemantikus jelölés.

Hiányzó címkék űrlap mezőkön

<input type="text" placeholder="Név" />
<input type="email" placeholder="E-mail cím" />
<input type="tel" placeholder="Telefonszám" />

Probléma: Nincs programozottan társított címke, csak placeholder, ami eltűnik begépeléskor.

Adatok táblázatban fejléc nélkül

<table>
  <tr>
    <td>Kovács János</td>
    <td>kovacs@email.com</td>
    <td>06-30-123-4567</td>
  </tr>
  <tr>
    <td>Nagy Anna</td>
    <td>anna@email.com</td>
    <td>06-20-987-6543</td>
  </tr>
</table>

Probléma: A képernyőolvasók nem tudják megmondani, hogy az egyes oszlopok mit jelentenek.

Kapcsolat nélküli elemek csoportosítása

<label for="street">Utca:</label>
<input type="text" id="street" name="street">

<label for="city">Város:</label>
<input type="text" id="city" name="city">

<label for="zip">Irányítószám:</label>
<input type="text" id="zip" name="zip">

Probléma: Nem világos, hogy ezek mind egy címhez tartoznak – nincs programozott kapcsolat a mezők között.

Források

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