Techniques for WCAG 2.0

ARIA1: Az elérhető gazdag internetes alkalmazások (ARIA) leíró tulajdonságának alkalmazása egy leíró, algoritmikusan meghatározott címke létrehozására

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:

1.3.1 teljesítési feltétel (Információ és relációk/összefüggések)
- Hogyan teljesül az 1.3.1 (Információ és relációk/összefüggések)
- Az 1.3.1 teljesítési feltétel értelmezése (Információ és relációk/összefüggések)
2.4.4 teljesítési feltétel (Hivatkozás célja (kontextusban))
- Hogyan teljesül a 2.4.4 (Hivatkozás célja (kontextusban))
- A 2.4.4 teljesítési feltétel értelmezése (Hivatkozás célja (kontextusban))
2.4.2 teljesítési feltétel (Oldalcím)
- Hogyan teljesül a 2.4.2 (Oldalcím)
- A 2.4.2 teljesítési feltétel értelmezése (Oldalcím)
3.3.2 teljesítési feltétel (Címkék vagy utasítások)
- Hogyan teljesül a 3.3.2 (Címkék vagy utasítások)
- A 3.3.2 teljesítési feltétel értelmezése (Címkék vagy utasítások)

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

2006. októberében a Windows alapon futó Firefox 1.5 és a Window-Eyes 5.5, 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. Ez a technika a Firefox 2.0 frissítéseire támaszkodik, annak érdekében, hogy a describedby attribútum egy elem szerepének a meghatározása nélkül váljon használhatóvá.

Leírás

A technika célja az, hogy bemutassa az ARIA descibedby tulajdonságának segítségével készített leíró információt, amely a felhasználói program által algoritmikusan meghatározott felhasználói interfész vezérlőről szolgáltat adatokat. Az ARIA technika segítségével az elemhez társított algoritmikusan meghatározott információk útján kiegészítő adatok közölhetők az adott elemről. Ezt a kiegészítő információt a felhasználói program jeleníti meg a felhasználónak. Például a describedby tulajdonság olyan információt is megjeleníthet, amely a felhasználói interfész vezérlőt körülvevő tartalomban található, de normális körülmények között a segítő technológiát alkalmazó felhasználó nem észleli azt.

Példák

1. példa: HTML

Ebben a példában a describedby tulajdonság szkriptek segítségével kerül a hozzáadásra a lap felhasználói interfész vezérlőihez. A szkriptek ebben az esetben azért fontosak, mert a "describedby" nem része a HTML-nek és közvetlen hozzáadása megakadályozhatja a kijelölés hitelesítését. A névtartományokat támogató felhasználói programok esetében a setAttributeNS()API alkalmazás segítségével lehet a megfelelő módon programozni a beállítást. Más felhasználói programoknál a setAttribute()API használatával lehet a kívánt állapotot elérni, míg a névtartomány a describedby attribútum kezdetéhez adott statikus szöveg sztring segítségével szimulálható.

Az alábbi példában két tömbváltozat, buttonIds és linkIds, kerülnek elkészítésre. Minden tömbben megtalálhatók a leírásokat tartalmazó elemek azonosítói. A tömbök a describedby tulajdonságot alkalmazó elemek azonosítóin keresztül kerülnek indexelésre. A setDescribedBy()funkciót az ablak onload eseménye aktiválja.

A setDescribedBy()funkció az összes gombot megtalálja a lapon. A funkció meglátogatja az összes gombot, és az azonosítókat indexként használva megkeresi a buttonIds tömbben a társított azonosító értékeket. Ez az id attribútum tartalmazza a gombhoz társított szöveges leírást. Abban az esetben, ha talál egy társított elemet a szkript a setAttrNS()funkció segítségével a gombhoz rendeli a describedby tulajdonságot.

A setDescribedBy()funkció a horgony elemeket is megtalálja a lapon és a velük kapcsolatban is a fent leírt műveletet végzi el. Ebben az esetben a linksId tömböt vizsgálja át és a setAttrNS() funkció segítségével minden egyes hivatkozáshoz hozzárendeli a describedby tulajdonságot.

A setAttrNS() funkció, amennyiben elérhető, az attribútum beállítása érdekében a setAttributeNS() API funkciót aktiválja. Ennek során a States and Properties Module for Accessible Rich Internet Applications (ARIA States and Properties) című részhez, "http://www.w3.org/2005/07/aaa", a megfelelő névtartomány URI-t 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 ARIA-t támogató felhasználói program és/vagy segítő technológia használatakor a kiegészítő leírás a felhasználói interfész vezérlő fókuszba kerülésekor jelenik meg.

Példa kód:


 <head>
 <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
 <title>Demonstration of describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
.left {
  float:left;
  width:400px;
}
.right {
        width:100px;
        text-align:right;
}
 </style>
 <script type="text/javascript">
 //<![CDATA[
 // array entries for each button on the page that associates the button id 
 // with the id of the element containing the text which describes the button
 var buttonIds = new Array();
 buttonIds["fontB"]= "fontDesc";
 buttonIds["colorB"] = "colorDesc";
 buttonIds["customB"] = "customDesc";
 // array entries for each link on the page that associates the link id with
 // the id of the element containing the text which describes the link
 var linkIds = new Array();
 linkIds["iceberg"] = "icebergInfo";
 // function that is run after the page has loaded to set the describedBy
 // property on each of the elements referenced by the array of id values
 function setDescribedBy(){
        if (buttonIds){
                var buttons = document.getElementsByTagName("button");
                if (buttons){
                        var buttonId;
                        for(var i=0; i<buttons.length; i++){
                                buttonId = buttons[i].id;
                                if (buttonId && buttonIds[buttonId]){
                                        setAttrNS(buttons[i], "describedby", buttonIds[buttonId]);
                                }
                        }
                }
        }
        if (linkIds){
                var links = document.getElementsByTagName("a");
                if (links){
                        var linkId;
                        for(var k=0; k<links.length; k++){
                                linkId = links[k].id;
                                if (linkId && linkIds[linkId]){
                                        setAttrNS(links[k], "describedby", linkIds[linkId]);
                                }
                        }
                }
        }
 }
 // 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){
         elemObj.setAttribute("aria-" + theAttr, theValue);
 }
 // simulated action function - currently just displays an alert
 function doAction(theAction){
        alert("Perform the " + theAction + " action");
 }
 window.onload=setDescribedBy;
//]]>
 </script>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications 
 describedby property to provide more detailed information 
 about the button action
 </p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
    <span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
 </p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
    <span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
 </p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
    <span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
 </p>
 </div>
 <p>The link in this paragraph has been updated with the Accessible Rich 
 Internet Applications describedby property to provide more information
 about the link</p>
 <p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span> 
 A bad storm in Alaska last October generated an ocean swell that broke apart 
 a giant iceberg near Antarctica six days later, U.S. researchers reported on Monday. 
 <a href="http://www.sciencemag.com/iceberg.html" id="iceberg">More Info...</a>.
 </p>
 </body>

A describedy tulajdonság működő HTML példája

2. példa: XHTML

Az alábbi példa XHTML kódolással került elkészítésre az application:xhtml+xml MIME típusával. A MIME típust nem támogatja minden felhasználói program. A describedby tulajdonsághoz történő hozzáféréshez egy xml névtartomány kerül megállapításra. A describedby információ közvetlenül az XHTML kijelöléshez kerül hozzáadásra, így ez további szkripteket nem igényel.

Példa kód:


<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 xmlns:waistate="http://www.w3.org/2005/07/aaa" >
 <head>
 <meta http-equiv="content-type" content="application:xhtml+xml; charset=utf-8" />
 <title>Demonstration of describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
 .left {
   float:left;
   width:400px;
 }
 .right {
   width:100px;
   text-align:right;
 }
 </style>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications describedby property 
 to provide more detailed information about the button action</p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
 <span class="right"><button id="fontB" onclick="doAction('Fonts');" waistate:describedby="fontDesc">
 Fonts </button></span></p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
 <span class="right"><button id="colorB" onclick="doAction('Colors');" waistate:describedby="colorDesc">
 Colors </button></span></p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
 <span class="right"><button id="customB" onclick="doAction('Customize');" 
 waistate:describedby="customDesc"> Customize </button></span></p>
 </div>
 <p>The link in the next paragraph has been updated with the Accessible Rich Internet Applications 
 describedby property to provide more information about the link</p>
 <p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span> 
 A bad storm in Alaska last October generated an ocean swell that broke apart a giant 
 iceberg near Antarctica six days later, U.S. researchers reported on Monday. 
 <a href="http://www.sciencemag.com/iceberg.html" id="iceberg" waistate:describedby="icebergInfo">More Info...</a>.
 </p>
 </body>
 </html>

Források

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

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

Ellenőrzések

Folyamat

Töltse le a lapot az ARIA-t támogató felhasználói programsel és/vagy segítő technológiával.
Az ARIA-t támogató felhasználói programsel navigáljon minden describedby tulajdonsággal módosított felhasználói interfész vezérlőhöz és ellenőrizze a megfelelő leírás megjelenítését.

Elvárható eredmények

A 2. pont igaz.