Techniques for WCAG 2.0

SCR2: Redundáns billentyűzet és egér esemény kezelők alkalmazása

Alkalmazás

Szkript támogatásal rendelkező HTML és XHTML.

Ez a technika az alábbiakra vonatkozik:

2.1.1 teljesítési feltétel (Billentyűzet)
- Hogyan teljesül a 2.1.1 (Billentyűzet)
- A 2.1.1 teljesítési feltétel értelmezése (Billentyűzet)
2.1.3 teljesítési feltétel (Billentyűzet (kivétel nélkül))
- Hogyan teljesül a 2.1.3 (Billentyűzet (kivétel nélkül))
- A 2.1.3 teljesítési feltétel értelmezése (Billentyűzet (kivétel nélkül))

Leírás

A technika célja az, hogy bemutassa azokat az eszköz független eseményeket, amelyekkel az egér vagy fókusz eseményekre reagálva meg lehet változtatni egy dekoratív képet. Ez pontosan az egér mozgásának függvényében a lapon elhelyezkedő dekoratív elemet megváltoztató onmouseover és onmouseout események alkalmazását jelenti. Az elemre eső vagy onnan eltávolított fókusz függvényében az onfocus és onblur események is megváltoztatják a képet.

Az alábbi példában egy dekoratív kép szerepel, amely egy horgony elem előtt helyezkedik el. Amikor a felhasználó az egérrel a horgony elemre mutat, a horgony előtt álló kép megváltozik. Az egér elmozdítása után a kép az eredeti megfelelőjére változik vissza. A billentyűzettel történő fókuszálás esetén is ugyanez a folyamat játszódik le. Fókuszáláskor a kép megváltozik majd a fókusz eltávolítása után a kép az eredeti alakjában tűnik fel ismét. Ezeket a műveleteket a horgonyhoz csatolt onmouseover, onmouseout, onfocus és onblur eseménykezelőkkel lehet megoldani. Az eseménykezelő valójában az updateImage() JavaScript funkció, amely megváltoztatja a kép forrását. Az onmouseover, onmouseout, onfocus, és onblur eseményekre az updateImage() aktivizálódik.

A weblapon minden kép egy saját azonosítóval rendelkezik. Ez az egyedi azonosító, illetve egy Boole érték jelzi egyértelműen az updateImage()-nak azt, hogy melyik képről is van szó (updateImage(imgId, isOver);. Az egérrel történő rámutatás vagy a fókusz elemre irányulása esetén a Boole érték lép működésbe. Az updateImage() az azonosító alapján betölti a képet, majd a Boole érték alapján megváltoztatja az src attribútumot. Fontos, hogy mivel a kép csak dekorációs célokat szolgál az alt attribútum értéke nulla.

Megjegyzés: A technika alkalmazása során ajánlatos hasonló méretű képeket használni, illetve az image elemnek meghatározni a magasság és szélesség attribútumait. Ezzel elkerülhető a lap elrendezésének megváltozása, ami a kép frissítésekor következne be. Az alábbi példában azonos méretű képek szerepelnek.

Példák

1. példa

Példa kód:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Changing Image Source in a Device Independent Manner</title>
 <script type="text/javascript">
 /* This function will change the image src of an image element.
  * param imgId - the id of the image object to change
  * param isOver - true when mouse is over or object has focus,
  *                false when mouse move out or focus is lost
 */
 function updateImage(imgId, isOver) {
   var theImage = document.getElementById(imgId);
   if (theImage != null) { //could use a try/catch block for user agents supporting at least JavaScript 1.4
                           // These browsers support try/catch - NetScape 6, IE 5, Mozilla, Firefox
      if (isOver) {
        theImage.setAttribute("src","yellowplus.gif");
      }
      else {
        theImage.setAttribute("src","greyplus.gif");
      }
   }
 }
 </script>
 </head>
 <body>
 <p>Mouse over or tab to the links below and see the image change.</p>
 <a href="http://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
   onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
 <img src="greyplus.gif" border="0" alt="" id="wai">
   W3C Web Accessibility Initiative</a> &
 <a href="http://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
   onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
   onblur="updateImage('i18n',false);">
   <img src="greyplus.gif" border="0" alt="" id="i18n">
   W3C Internationalization</a>
 </body>
 </html>

Ellenőrzések

Folyamat

Töltse be a weboldalt és ellenőrizze az egér, illetve billentyűzet eseményeket.

Ellenőrizze, hogy a weblap letöltésekor a "szabvány" kép jelenik-e meg.
Egér használat
1. Mutasson az egérrel az eseménykezelőt tartalmazó elemre (ebben a példában egy horgony elemre). Ellenőrizze, hogy a kép a kívánt képre változik-e át.
2. Távolítsa el az egeret az elemről. Ellenőrizze, hogy az eredeti kép jelenik-e meg újra.
Billentyűzet használat
2. A billentyűzettel irányítsa a fókuszt az eseménykezelőt tartalmazó elemre. Ellenőrizze, hogy a kívánt képre változik-e meg az eredeti kép.
3. A billentyűzettel távolítsa el a fókuszt az elemről (irányítsa át egy másik elemre). Ellenőrizze, hogy az eredeti kép jelenik-e meg.
Ellenőrizze, hogy az oldal elrendezését nem befolyásolja-e a kép megváltozása.

Elvárható eredmények

A fenti ellenőrzések minden lépése igaz.