Understanding WCAG 2.0

Skip to Content (Press Enter)

ARIA4: Űrlapmezők kötelezőként történő algoritmikus azonosítása ARIA segítségével

Alkalmazás

Szkripteket és ARIA-t alkalmazó HTML és XHTML.

Szerkesztői megjegyzés: Ez a technika akkor lesz alkalmazható, amikor az ARIA specifikációk bekerülnek a W3C ajánlások közé.

Ez a technika az alábbiakra vonatkozik:

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

2007 januárjában a Windows alapon futó Firefox 1.5 és a Window-Eyes 5.5, valamint részlegesen a JAWS 8.0, illetve az említett programok modernebb verziói támogatták az ARIA-t. A további felhasználói programokat és segítő technológiákat érintő támogatás kifejlesztése folyamatban van. Mivel még nem minden technológia támogatja az ARIA-t ezért kötelező mezők megjelöléséhez más elégséges technikák is szükségesek. Ez a technika a Firefox 2.0 frissítéseire támaszkodik, annak érdekében, hogy egy elem szerepének meghatározása nélkül használhatóvá váljon a kötelező attribútum.

Leírás

A technika annak a demonstrálására szolgál, hogy az ARIA segítségével miként lehet algoritmikusan azonosítani a felhasználói bevitelt, vagy a kiválasztást igénylő űrlap elemeket. Az ARIA alkalmazásával kiegészítő információkkal láthatók el az algoritmikusan meghatározott elemek. A segítő technológiát alkalmazó felhasználónak ezután a felhasználói program biztosítja ezt a kiegészítő információt.

Példák

1. példa

Az alábbi példa szkript segítségével határozza meg az űrlapelem kötelező állapotát. A névtartományokat támogató felhasználói programok esetében a kötelező állapot a setAttributeNS()(API) alkalmazás segítségével rendelhető az elemhez. Más felhasználói programoknál a setAttribute()API használatával lehet a kötelező állapotot beállítani, míg a névtartomány a kötelező attribútum kezdetéhez adott statikus szöveg sztring segítségével szimulálható.

Az alsó példában egy tömbváltozat, requiredIds, került elkészítésre a kötelezőként megjelölt elemek azonosítóival. A setRequired() funkciót az ablak onload eseménye aktiválja.

A setRequired() funkció megvizsgálja a rendelkezésre álló azonosítókat, kikeresi az elemeket és a setAttrNS()funkcióval igazra állítja a kötelező állapotot.

A setAttrNS() funkció, amennyiben elérhető, a setAttributeNS() API funkciót aktiválja az attribútum beállítása érdekében. Ennek során a States and Properties Module for Accessible Rich Internet Applications (ARIA States and Properties) című részhez a megfelelő névtartomány URI-t, http://www.w3.org/2005/07/aaa, alkalmazza. Abban az esetben, ha a felhasználói program nem rendelkezik a setAttributeNS() API-val, akkor a szükséges attribútum névhez az "aaa:" statikus szimulált névtartomány kerül hozzáadásra, és a setAttribute() API segítségével kerül beállításra.

Az oldal Firefox 2.0 vagy Window-Eyes 5.5, illetve ezek modernebb változataival történő letöltése esetén a Window-Eyes a beviteli mező címkéjének értelmezésekor kiejti a "kötelező" szót.

Példa kód:


<head>
 <script type="text/javascript">
 //<![CDATA[
 
 // array or ids on the required fields on this page
 var requiredIds = new Array( "firstName", "lastName");
 
 // function that is run after the page has loaded to set the required role on each of the 
 //elements in requiredIds array of id values
 function setRequired(){
        if (requiredIds){
                var field;
                for (var i = 0; i< requiredIds.length; i++){
                        field = document.getElementById(requiredIds[i]);
                        setAttrNS(field, "required", "true");
                }
        }
 }
 
 // method to set the attribute values based on the capability of the browser.  
 // Use setAttributeNS if it is available,
 // otherwise append a namespace indicator string to the attribute and set its value.
 function setAttrNS(elemObj, theAttr, theValue){
        if (typeof document.documentElement.setAttributeNS != 'undefined') {
                elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
        }else{
                elemObj.setAttribute("aaa:" + theAttr, theValue);
        }
 }
 window.onload=setRequired;
//]]>
 </script>
 </head>
 <body>
 <p>Please enter the following data.  Required fields have been programmatically identified 
 as required and  marked with an asterisk (*) following the field label.</p>
 <form action="submit.php">
 <p>
 <label for="firstName">First Name *: </label><input type="text" name="firstName" 
    id="firstName" value="" />
 <label for="lastName">Last Name *: </label><input type="text" name="lastName" 
    id="lastName"  value="" />
 </p>
 </form>
 </body>

Források

(jelenleg nincsenek)

Ellenőrzések

Folyamat
  1. Töltse le az oldalt az ARIA-t támogató felhasználói programsel és/vagy segítő technológiával.

  2. Navigáljon minden kötelező űrlapelemhez és ellenőrizze, hogy a "kötelező" tulajdonság hallhatóan is megnevezésre kerül.

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

Teljesítési feltételek: