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.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
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.
-
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.