Understanding WCAG 2.0

Skip to Content (Press Enter)

H90: Az előírt űrlapvezérlők jelzése

Alkalmazás

Külső címkéket alkalmazó HTML és XHTML vezérlők.

Ez a technika az alábbiakra vonatkozik:

A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések

A HTML és XHTML specifikációk lehetővé teszik mind az implicit mind az explicit címkéket. Ennek ellenére néhány segítő technológia nem képes megfelelően kezelni az implicit címkéket (például, <label>Keresztnév <input type="text" name="firstname"></label>).

  • A JAWS 7.10 a Windows XP-n Internet Explorer 6.0-val és a Firefox 1.5-el került tesztelésre. A program képes volt a szövegmezők explicit és implicit címkéinek értelmezésére mind virtuális PC kurzor mind pedig űrlap olvasási módban. Űrlap módba azonban nem értelmezte a jelölőnégyzetek és rádiómezők implicit címkéit.

  • Window-Eyes 5.5 a Windows XP-n Internet Explorer 6.0-val és Firefox 1.5-el került tesztelésre. A program minden esetben értelmezte az űrlapmezők explicit címkéit. Böngésző módban azonban nem értelmezte az űrlapvezérlők implicit címkéit, de amikor a böngésző mód kikapcsolásra került, vezérlőtől vezérlőig történő navigálás során kiejtette az implicit címkéket.

A felhasználói programok egy eszköz tippet jelentetnek meg abban az esetben, ha az egér egy cím attribútumot tartalmazó beviteli elemre mutat. A cím attribútumok megjelenítésre kerülnek a segítő technológiáknak és számos grafikai böngészőben eszköz tippként kerülnek feltüntetésre. Az eszköz tippek nem nyithatók meg a billentyűzeten keresztül, így ez az információ nem elérhető a billentyűzetet alkalmazó látó felhasználók részére.

Abban az esetben, ha nincs elérhető címke, a JAWS és Window-Eyes kiejti a cím attribútumot, ha az űrlapvezérlő fókuszba kerül.

  • A JAWS 6.0 és modernebb verziói ki tudja mondani mind a címke mind a cím elemeket, ha a két elem különbözik egymástól. Ezt a beállítást azonban csak kevés felhasználó ismeri.

  • A WindowEyes 5.5 ins-E gyorsbillentyűje megjeleníti a kiegészítő információkat beleértve a cím attribútumot, ha az elem fókuszba kerül.

Bizonyos felhasználói programok (elsősorban a Window-Eyes képernyőolvasók) alapértelmezett esetben nem ejtik ki az űrlap címkében szereplő csillag karaktert. A Window-Eyes egyik beállításában a felhasználók módosíthatják ezt a tulajdonságot, bár nem valószínű, hogy sokan megváltoztatják ezt a beállítást.

Leírás

A technika célja az, hogy világosan jelezze a web alkalmazás specifikus űrlapvezérlőjét, vagy a sikeres adatküldéshez szükséges űrlapot. A vezérlő szükségességét jelző szimbólum vagy szöveg algoritmikusan kerül társításra a cím elem által használt mezőhöz, vagy a mezőkészleten keresztül társított vezérlők csoportjához tartozó jelmagyarázathoz. Szimbólum alkalmazása esetén az első használat előtt a felhasználót informálni kell a szimbólum jelentéséről.

Példák

1. példa: Szöveg alkalmazása a kötelező tartalom jelzésére

Az alábbi példában szereplő szövegmező rendelkezik a "Keresztnév (szükséges):" explicit címkével. Az attribútum címke-eleme megegyezik a beviteli elem id attribútummával és a címke szövege jelzi, hogy a vezérlő alkalmazása kötelező.

Példa kód:


<label for="firstname">First name (required):</label> 
<input type="text" name="firstname" id="firstname" />

Megjegyzés: Néhány szerkesztő "req."-nek rövidítheti le az angol "required" (kötelező) szót, de ez jó bizonyíték a rövidítések zavaró jellegére.

2. példa: Csillag használata a kötelező tartalom jelölésére

Az alábbi példában szereplő szövegmező explicit címkéjében szereplő csillag jelzi, hogy a vezérlő kötelező elem. Fontos, hogy a csillag jelentése feltüntetésre kerüljön az űrlap elején. A példában a csillag egy értéktartományon belül helyezkedik el, ami lehetővé teszi a csillag karakter stílusának megváltoztatását. Így a csillag nagyobb lehet az alapértelmezett méreténél, ami a látássérültek számára is megkönnyíti az érzékelését.

Példa kód:


CSS:
.req {font-size: 150%} 
HTML:
<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
<input type="text" name="firstname" id="firstname" />

3. példa: Kép használata a kötelező tartalom jelölésére

Az alábbi példában szereplő szövegmező explicit címkéje egy kép segítségével jelöli a kötelező vezérlőt. Fontos, hogy a kép jelentése feltüntetésre kerüljön az űrlap elején.

Példa kód:


<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label> 
<input type="text" name="firstname" id="firstname" />
...

4. példa: Kötelező tartalom jelölése a rádió gombok vagy jelölőnégyzet vezérlők csoportjainak esetében

A rádió gombok és jelölőnégyzetek más interaktív vezérlőktől eltérő módon kerülnek kezelésre. Az egyéni rádiógombok és jelölőnégyzetek bár nem kötelező elemek, de jelzik, hogy a csoportnak adott válasz kötelező. Az 1. és 3. példákban leírt módszerek a rádiógombok és jelölőnégyzetek esetében is alkalmazhatók, de a kötelező tartalomra vonatkozó jelzést a cím elem helyett a jelmagyarázat elemben kell elhelyezni.

Példa kód:


<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>

Források

A források csak információs célokat szolgálnak, és csak angolul elérhetőek.

Ellenőrzések

Folyamat
  1. Minden egyes kötelező űrlapvezérlő esetében ellenőrizze, hogy az űrlapvezérlő kötelező eleme jelzésre került-e a vezérlő címke vagy jelmagyarázat elemében.

  2. Minden nem-szöveges formában megadott jelzés esetében ellenőrizze, hogy a jelzés jelentése megadásra került-e a vonatkozó űrlapvezérlő előtt.

Elvárható eredmények
  • Minden fenti ellenőrzés igaz.


Teljesítési feltételek: