H44: címke-elemek használata szövegcímkék és űrlapvezérlők társítása céljából
Alkalmazás
Külső címkéket használó HTML és XHTML vezérlők
Ez a technika az alábbiakra vonatkozik:
- 1.1.1 teljesítési feltétel (Nem-szöveges tartalom)
- 1.3.1 teljesítési feltétel (Információ és relációk/összefüggések)
- 3.3.2 teljesítési feltétel (Címkék és utasítások)
- 4.1.2 teljesítési feltétel (Név, szerep érték)
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 a
belső és külső címkék alkalmazását. Ennek ellenére
néhány segítő technológia nem képes megfelelően
alkalmazni a belső címkéket (például
<label>First name <input type="text"
name="firstname"></label>).
- A JAWS 7.10 működését tesztelték a Windows XP operációs rendszerrel, valamint az Internet Explorer 6.0 és Firefox 1.5 böngészőkkel. A program képes a szöveges mezők belső és külső címkéinek olvasására mind virtuális PC kurzor mind űrlap olvasó módban. Űrlap módban azonban nem olvassa a jelölőnégyzetek és rádió gombok belső címkéinek a címkéit.
- A Window-Eyes 5.5 működését tesztelték a Windows XP operációs rendszerrel, valamint az Internet Explorer 6.0 és Firefox 1.5 böngészőkkel. A program képes alkalmazni egy külső címkékkel ellátott űrlap címkéit. Böngésző módban nem képes használni a belső címkékkel rendelkező űrlapok címkéit, de kikapcsolt böngésző módban az űrlapok között történő navigálás során képes alkalmazni a belső címkéket.
A felhasználói programok egy eszköz tippet jelenítenek meg az egérrel kijelölt és cím attribútumot tartalmazó beviteli elemek fölött. Számos grafikus böngészőben a segítő technológiák által érzékelt cím attribútumok eszköz tippként jelennek meg. Az eszköz tippek nem nyithatók meg a billentyűzeten keresztül, vagyis ez az információ nem elérhető a billentyűzetet használó látó felhasználók számára.
Címkék hiányában a JAWS és Window-Eyes programok a cím attribútumot alkalmazzák az űrlapvezérlőkre történő fókuszálás esetén.
-
A JAWS 6.0 és későbbi verziói képesek mind a címke mind a cím elemek alkalmazására, ha a két elem különbözik egymástól. Ezt a beállítást azonban csak nagyon kevés felhasználó ismeri.
-
WindowEyes 5.5-ben létezik az ins-E gyorsbillentyű kombináció, amellyel olyan kiegészítő információk jeleníthetők meg, mint a fókuszált elem cím attribútuma.
Leírás
A technika célja az, hogy a címke-elem segítségével külsőleg társítsa az űrlapvezérlőt egy címkével. A címke a for attribútummal kerül csatolásra az adott űrlapvezérlőhöz. A for attribútum értékének meg kell egyeznie az űrlapvezérlő id attribútumával.
Az id attribútumnak megegyezhet az értéke a név attribútummal, de mind a kettőt meg kell határozni. Az id-nek egyedinek kell lennie az adott weboldalon belül.
Ez a technika megfelel az 1.1.1, 1.3.1 és 4.1.2 teljesítési feltételeknek, akár látható a címke-elem, akár nem. Ez utóbbi a CSS használatával elrejthető. A 3.3.2 teljesítési feltétel miatt a címke-elemnek láthatónak kell lennie, mivel ez segíti azokat a felhasználókat, akiknek értelmezniük kell a mező célját.
Fontos, hogy a címkét a
type="checkbox"és a
type="radio" beviteli elemek mögé kell
elhelyezni.
1. megjegyzés: A külsőleg társított címkéket használó elemek:
-
input type="text" -
input type="checkbox" -
input type="radio" -
input type="file" -
input type="password" -
textarea -
select
2. megjegyzés: A címke-elem nem használatos az alábbiakhoz, mert ezekhez az elemekhez a címkék az érték attribútumon (küldés és visszaállítás gombokhoz), az alt attribútumon (kép gombokhoz) , vagy magán a tartalmon (gomb) keresztül kerülnek társításra.
-
Küldés és visszaállítás gombok (
input type="submit"vagyinput 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. példa: Szöveg beviteli mező
A példában szereplő szövegmezőnek van egy "Keresztnév" elnevezésű külső címkéje. A for attribútum címke-eleme megegyezik a beviteli elem id attribútumával.
Példa kód:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
2. példa: Ellenőrző doboz
Példa kód:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
3. példa: Rádió gombok csoportja
Egymáshoz kapcsolódó rádiógombok kis csoportja, amelyben minden elem világos leírással és címkével rendelkezik.
Megjegyzés: Az összetartozó rádió gombok nagyobb csoportjaihoz tartozó világos társítások és utasítások megadása érdekében a H71: Űrlap vezérlők csoportjának a leírása mezőkészlet és jelmagyarázat elemek használatával , című részben megfogalmazottak megfontolása szükséges.
Példa kód:
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>
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
A weboldal szöveg, fájl vagy jelszó, illetve minden szövegmező és választás elemeihez tartozó beviteli eleme estében:
-
Ellenőrizze, hogy a beviteli elem előtt áll-e egy címke-elem, amely azonosítja a vezérlő célját.
-
Ellenőrizze, hogy a címke-elem for attribútuma megegyezik-e a beviteli elem azonosítójával.
-
Ellenőrizze, hogy látható-e a címke-elem.
A weboldal ellenőrződoboz és rádió elemeinek a beviteli elemei esetében:
-
Ellenőrizze, hogy a beviteli elem után áll-e egy címke-elem, amely azonosítja a vezérlő célját.
-
Ellenőrizze, hogy a címke-elem for attribútuma megegyezik-e a beviteli elem azonosítójával.
-
Ellenőrizze, hogy látható-e a címke-elem.
Elvárható eredmények
-
A 1. és 2. pontban szereplő ellenőrzések igazak. A 3.3.2 teljesítési feltétel esetében a 3. pont szintén igaz.