Techniques for WCAG 2.0

SCR29: Billentyűzettel elvégezhető műveletek hozzárendelése statikus HTML elemekhez

Alkalmazás

HTML és XHTML, szkript

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))

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

A HTML 4.01 csak az a, area, button, input, object, select, és textarea elemekre határoz meg tabindex attribútumot, amelynek értékét 0 és 32767 között definiálja. A tabindex más elemekkel történő használatát, valamint a -1-es tabindexet csak az Internet Explorer 5.01 és modernebb verziói, a Firefox 1.5 és modernebb verziói, az Opera 9.5 és modernebb verziói, valamint a Camino támogatják. Fontos, hogy a virtuális kurzort alkalmazó képernyőolvasók esetében a szkripttel módosított fókusz előre nem látható viselkedést okoz .

Leírás

A technika célja annak szemléltetése, hogyan lehet a billentyűzeten keresztül hozzáférni olyan felhasználói interfész vezérlőkhöz, amelyek a div vagy span HTML tagekhez hasonló elemeken hajtanak végre műveleteket. A technika azt biztosítja, hogy az elemek a tabindex attribútum beállításával legyenek fókuszálhatók. A fókuszálás a billentyűzetről lesz aktiválható az onclick kezelőhöz kiegészítésként hozzáadott onkeyup vagy onkeypress kezelő segítségével.

Abban az esetben, ha a tabindex attribútuma 0, az elem a billentyűzeten keresztül válik fókuszálhatóvá és bekerül a dokumentum tabulálási rendjébe. Ha a tabindex értéke -1, akkor az elem nem tabulálható. Az element.focus() révén a fókusz algoritmikusan is beállítható.

Mivel a statikus HTML elemeknek nincs társított művelete, ezért a szkripteket nem támogató környezetben nem lehetséges a biztonsági mentések vagy magyarázatok alkalmazása. Ez a technika csak a kliens-oldali szkripteket támogató környezetben használható.

Megjegyzés: Az ilyen jellegű interfész vezérlők még mindig eleget tesznek a 4.1.2 teljesítési feltétel követelményeinek. Név, szerep és állapot információk nélkül a felhasználói interfész vezérlővel együtt alkalmazott technika kimeríti az F59 részben leírt hibát, és nem felel meg a 4.1.2 teljesítési feltétel előírásainak, mivel szkripttel alkalmazott div és span tagekkel hoz létre HTML-ben felhasználói interfész vezérlőt.

Példák

1. példa: JavaScript művelet hozzáadása egy doboz elemhez.

A lapon található doboz egyedi azonosító elemmel és egy 0 értékű tabindex attribútummal rendelkezik. A szkript a dokumentum objektum modellen (DOM) keresztül, illetve az azonosítója alapján találja meg a dobozt és hozzárendeli az onclick, illetve onkeyup kezelőket. Az utóbbi az Enter billentyű lenyomásakor lép akcióba. Fontos, hogy a doboz elemnek a DOM elemben kell lennie ahhoz, hogy a szkript megtalálhassa és módosíthassa. Ez általában megoldható a body elemben található onload eseménnyel aktivált szkript segítségével. A kezelők társítására szolgáló szkript csak abban az esetben működik, ha a felhasználói program támogatja a JavaScript alkalmazását és az engedélyezve van.

Példa kód:


...
<script type="text/javascript">
 // this is the function to perform the action. This simple example toggles a message.
 function doSomething(event) {
   var msg=document.getElementById("message");
   msg.style.display = msg.style.display=="none" ? "" : "none";
   //return false from the function to make certain that the href of the link does not get invoked
   return false;
 }
 // this is the function to perform the action when the Enter key has been pressed.  
 function doSomethingOnEnter(event) {
   var key = 0;
   // Determine the key pressed, depending on whether window.event or the event object is in use
   if (window.event) {
     key = window.event.keyCode;
   } else if (event) {
     key = event.keyCode;
   }
   // Was the Enter key pressed?
   if (key == 13) {
     return doSomething(event);
   } 
   // The event has not been handled, so return true
   return true;
 }
 // This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing 
 // div element. This function must be called after the div element with id="active" has been loaded into the DOM.
 // In this example the setUpActions() function is called from the onload event for the body element.
 function setUpActions() {
   // get the div object
   var active=document.getElementById("active");
   // assign the onclick handler to the object.
   // It is important to return false from the onclick handler to prevent the href attribute
   // from being followed after the function returns.
   active.onclick=doSomething;
   // assign the onkeyup handler to the object.
   active.onkeyup=doSomethingOnEnter;
 }
 </script>
 <body onload="setUpActions();">
 <p>Here is the link to modify with a javascript action:</p>
 <div>
  <span id="active" tabindex="0">Do Something</span>
 </div>
 <div id="message">Hello, world!</div>
...

A Creating Divs with Actions using JavaScript.részben megtalálható a kód egy működő verziója.

Források

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

HTML 4.01 Scripts
HTML 4.01 Giving focus to an element
Accessible Rich Internet Applications (WAI-ARIA) Version 1.0 Global States and Properties
WAI-ARIA Primer, Provision of the keyboard or input focus
Document Object Model (DOM) Technical Reports
Firefox support for ARIA: Accessible Rich Internet Applications
Internet Explorer, HTML and DHTML Reference, tabIndex Property

Ellenőrzések

Folyamat

A szkripteket támogató felhasználói program esetében:

Kattintson az egérrel a vezérlőre.
Ellenőrizze, hogy a szkript helyesen hajtja-e végre a műveletet.
Ellenőrizze, hogy lehetséges-e a billentyűzeten keresztül navigálni és fókuszálni.
Állítsa a billentyűzet fókuszát a vezérlőre.
Ellenőrizze, hogy az ENTER lenyomása aktiválja-e a szkript műveletet.

Elvárható eredmények

Minden fenti ellenőrzés igaz.