Understanding WCAG 2.0

Skip to Content (Press Enter)

H91: HTML űrlapvezérlők és hivatkozások alkalmazása

Alkalmazás

HTML űrlapvezérlők és hivatkozások

Ez a technika az alábbiakra vonatkozik:

Leírás

A technika célja az, hogy szabványos HTML űrlapvezérlők és hivatkozáselemek útján biztosítsa az interaktív felhasználói interfész elemek billentyűzet műveleteit és ezek együttműködését a segítő technológiákkal.

A HTML űrlapvezérlők és hivatkozások billentyűzet műveleteit a felhasználói programok biztosítják. Ezen kívül a felhasználói programok egy akadálymentesítési csatlakozási felületen keresztül rendelik egymáshoz az űrlapvezérlőket és hivatkozásokat. A segítő technológiák az akadálymentesítési csatlakozási felületen keresztül jutnak hozzá és jelenítik meg az olyan akadálymentesítési információkat, mint a szerep, név, állapot és érték. A szerepet a HTML elem jeleníti meg, a nevet pedig az elemhez társított szöveg adja meg. Az értékhez és állapothoz tartozó elemek szintén különböző mechanizmusokon keresztül jelenítik meg az említett tulajdonságokat.

Bizonyos esetekben a szöveg már társításra került a vezérlővel a kötelező attribútumon keresztül. Az elküld gombok például a gomb elem szövegét, képét vagy alt attribútumát használják névként. Űrlap vezérlők esetében a címke-elemek vagy cím attribútumok a használatosak. A következő táblázatban az szerepel, hogyan kerülnek meghatározásra a HTML hivatkozásokkal és űrlapvezérlőkkel együtt használatos szerep, név, érték és tulajdonság elemek.

HTML elem Szerep Név Érték Tulajdonság
<a> hivatkozás 'cím' attribútum, szöveg az <a> elemen belül vagy képi hivatkozás esetén 'alt' attribútum. Szöveges és képi 'alt' attribútum esetében egymás után kerülnek feltüntetésre. 'href' attribútum
<button> nyomógomb szöveg a <button> elemen belül vagy 'cím' attribútum
<fieldset> csoportosítás <legend> elem
<input type = "button", "submit", vagy "reset"> nyomógomb 'érték' attribútum
<input type = "image"> nyomógomb 'alt' attribútum vagy 'cím' attribútum
<input type = "text"> szerkeszthető szöveg társított <label> elem vagy 'cím' attribútum 'érték' attribútum
<input type = "password"> szerkeszthető szöveg társított <label> elem vagy 'cím' attribútum
<input type="checkbox"> jelölőnégyzet társított <label> elem vagy 'cím' attribútum 'ellenőrzött' érték
<input type="radio"> rádió gomb társított <label> elem vagy 'cím' attribútum 'ellenőrzött' érték
<select> kombó doboz, lista, vagy legördülő lista társított <label> elem vagy 'cím' attribútum <option> elem beállított 'választott' attribútummal
<textarea> szerkeszthető szöveg társított <label> elem vagy 'cím' attribútum szöveg a <textarea> elemen belül

Példák

1. példa: Hivatkozások

A felhasználói programok biztosítják a hivatkozások közötti navigációhoz és a kiválasztásukhoz szükséges mechanizmust. Az alábbi példák mindegyikében a <a href> elemből a "hivatkozás" szerep következik. Fontos, hogy a <a name> tag nem adja meg egy "hivatkozás" szerepét. Az URI értéke a 'href' attribútumban található.

1a. példa

Az 1a példában szereplő hivatkozás szövegében található név ebben az esetben "Example Site".

Példa kód:

<a href="www.example.com">Example Site</a>
                    
1b. példa

Az 1b példában szereplő hivatkozásban lévő kép nevét az 'alt' attribútum adja meg. Az API-k megtekintésére szolgáló néhány eszköz, mint pl. a Microsoft Inspect Objects, nem tárja ezt fel, de a segítő technológiák igen.

Példa kód:

<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
                    
1c. példa

Az 1c példában a név kiválasztásra kerül a hivatkozás többi eleme közül az "Example Text" szöveg olvashatósága érdekében.

Példa kód:

<a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>

2. példa: Gombok

Számos HTML módszer létezik a gombok megalkotására, és ezek mindegyike társítható a "nyomógomb" szereppel.

2a. példa

A 2a példában a szöveg a gomb elemen belül helyezkedik el. Ebben az esetben a név: "save". Érték nem szerepel a példában.

Példa kód:

<button>Save</button>
                    
2b. példa

A 2b példában a "Save", "Submit" és "Reset" nevekhez az 'érték' attribútum tartozik.

Példa kód:

<input type="button" value="Save" /> 
<input type="submit" value="Submit" />  
<input type="reset" value="Reset" />   
                    
2c. példa

A 2c példában a "save" névhez az 'alt' attribútum tartozik.

Példa kód:

<input type="image" src="save.gif" alt="save" /> 
                    
2d. példa

A 2d példában nincs 'alt' attribútum ezért a "save" névhez a cím attribútum került felhasználásra.

Példa kód:

<input type="image" src="save.gif" title="save" />
                    
2e példa

A 2e példában a "save" névhez a beviteli elemek 'alt' attribútuma tartozik. A cím attribútum nem került felhasználásra.

Példa kód:

<input type="image" src="save.gif" alt="save" title="save" />

3. példa:
3a. példa

A 3a példában a beviteli mező a "szerkeszthető szöveg" szereppel bír. A cím elem a 'for' attribútumon keresztül kerül társításra a beviteli elemhez, hivatkozással a beviteli elem azonosító attribútumára. Ebben az esetben a "Type of fruit" név a cím elemből következik. Az értéke a "bananas" érték attribútumból következik.

Példa kód:

<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">

3b. példa

A 3b példában a beviteli mezőnek ugyanaz a szerepe és értéke, mint a 3a példában, de a nevét a cím attribútumból kapja.

Példa kód:

<input id="text_1" type="text" value="bananas" title="Type of fruit">

4. példa: Jelölőnégyzet

A 4. példában a jelölőnégyzet szerep a beviteli elem típus attribútumából kerül megadásra. A címke-eleme a 'for' attribútumon keresztül kerül társításra a beviteli elemhez. A 'for' attribútum a beviteli elem azonosító attribútumára hivatkozik. A "cheese" név ebben az esetben a címke-elemből következik. Állapota, amely a "jelölt" attribútumból következik, lehet jelölt vagy jelöletlen. Az állapotot a vezérlők segítségével a felhasználó tudja megváltoztatni.

Példa kód:

<label for="cb_1">Cheese</label> 
<input id="cb_1" type="checkbox" checked="checked">
                    
5. példa: Rádió gombok

Az 5. példában a "rádió gomb" szerep a beviteli elem típus attribútumából következik. A név a cím elem segítségével határozható meg. A jelölt vagy jelöletlen állapot a jelölt attribútumból következik. Az állapotot a felhasználó tudja megváltoztatni.

Példa kód:

<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
                    
6. példa:
6a példa

A 6a példában a kombó doboz szerep a választás elemből következik. A "Numbers" név a címke-elemből következik. Általános hibaként említhető az, ha a választás nem kap nevet. Az értéket a beállítás elem tartalmazza, amelynek a választott attribútuma a választott állásba került beállításra. Ebben az esetben a "Two" az alapértelmezett érték.

Példa kód:

<label for="s1">Numbers</label>
<select id="s1" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select>
                    
6b példa

A 6b példában szereplő név, szerep, és érték megegyezik a fentiekkel, de a nevet a választás elem cím attribútuma adja meg. Ez a technika akkor használható, ha nem ajánlatos a látható címke használata.

Példa kód:

<select id="s1" title="Numbers" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select>
                    
7. példa: Szövegmező
7a példa

A 7a példában a szerkeszthető szöveg szerep a szövegmező elemből következik. A "Type your speech here" név a címke-elemből kerül megadásra. A szövegmezőben elhelyezkedő tartalom értéke ebben az esetben a: "Four score and seven years ago".

Példa kód:

<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
                    
7b példa

A 7b példában a szerep, név, és érték megegyezik a fentiekkel, de a nevet a 'cím' attribútum adja meg.

Példa kód:

<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
                    
8. példa:
Rádió mezőkészlet

A 8. példában szereplő a rádió mezőkészlet a csoportosítás szereppel rendelkezik. A név a jelmagyarázat elemből kerül megadásra.

Példa kód:

<fieldset>
  <legend>Choose a Color:</legend> 
     <input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br /> 
     <input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br /> 
     <input id="green" type="radio" name="color" value="green" /><label for="green">Green</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. Vizsgálja meg a HTML forráskódot.

  2. Minden hivatkozás- és űrlapelem esetében, a fenti táblázat alapján ellenőrizze a nevet, értéket és tulajdonságot.

Elvárható eredmények
  • A 2. pont igaz.

Teljesítési feltételek: