Understanding WCAG 2.0

Skip to Content (Press Enter)

F68: A 4.1.2 teljesítési feltételhez tartozó hiba, amelyet az algoritmikusan nem meghatározható címke és felhasználói interfész vezérlők társítása okoz

Alkalmazás

Látható címkéket alkalmazó HTML és XHTML vezérlők

Ez a hiba az alábbiakra vonatkozik:

Leírás

Ez a hiba akkor következik be, amikor egy vizuálisan megjelenített címkéket használó űrlaphoz a címkék nem kerülnek egyértelműen társításra.

1. megjegyzés: Határozottan társított címkékkel működő elemek:

  • input type="text"

  • input type="checkbox"

  • input type="radio"

  • input type="file"

  • input type="password"

  • textarea

  • select

2. megjegyzés: Az alábbiakhoz nem használható címke, mert ezekhez a címkék az érték (küldés vagy törlés gombok), vagy alt (kép gombok) attribútumon , illetve magán az elemek tartalmán (gomb) keresztül kerülnek hozzárendelésre.

  • Küldés és törlés gombok (input type="submit" or input type="reset")

  • Kép gombok (input type="image")

  • Rejtett beviteli mezők (input type="hidden")

  • Szkript gombok (gomb elemek vagy <input type="button">)

Példák

1. hiba példa:

Az alábbi példában szereplő űrlap vezérlőihez vizuálisan megjelenített címkék tartoznak, de a vezérlőkhöz nem került címke elem társításra. Az alábbi példakód hibás, mivel a segítő technológiák nem lesznek képesek meghatározni a vezérlőkhöz tartozó címkéket.

Példa kód:


<form>
 First name: 
 <input type="text" name="firstname">
 <br />
 Last name: 
 <input type="text" name="lastname">
 <br />
 I have a dog <input type="checkbox" name="pet" value="dog" />
 I have a cat <input type="checkbox" name="pet" value="cat" />
</form>

2. hiba példa:

A segítő technológiák nem képesek egyértelműen meghatározni az alábbi kódban szereplő szövegbeviteli vezérlőkhöz társított neveket.

Példa kód:


<form action="..." method="post">
<p>
<label>
   First Name
   <input type="text" name="firstname">
</label>
<label>
   <input type="text" name="lastname">
   Last Name
</label>
</p>
</form>

Példa kód:


<form action="..." method="post"> 
<p> 
<label>First Name </label>
<input type="text" name="firstname"> 
<label>Last Name</label> 
<input type="text" name="lastname"> 
</p> 
</form>

3. hiba példa:

Az alábbi példában szereplő szöveges keresődoboznak nincs neve. A szükséges név akár a cím attribútumon, vagy a CSS-el elrejtett cím elemen keresztül is megadható.

Példa kód:


<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">

Ellenőrzések

Folyamat

A weboldalon szereplő minden rádió, jelölőnégyzet, fájl, jelszó típusú beviteli elemek, illetve szövegmezők és kiválasztó elemek esetében:

  1. Ellenőrizze, hogy a vizuális megjelenítéshez társításra kerül-e a vezérlő célját meghatározó szöveges címke.

  2. Ellenőrizze, hogy a címke elem megfelelően társítja-e a szöveget a beviteli elemhez.

Elvárható eredmények
  • Amennyiben a 1. pont igaz és a 2. pont hamis, akkor a hiba bekövetkezik és a tartalom nem felel meg a teljesítési feltétel követelményeinek.