SCR26: Dinamikus tartalom beillesztése a dokumentum objektum modellbe, közvetlenül annak vezérlőjele után
Alkalmazás
HTML és XHTML, szkript
Ez a technika az alábbiakra vonatkozik:
- 2.1.1 teljesítési feltétel (Billentyűzet)
- 2.4.3 teljesítési kritérium (Fókuszok rendezése)
- 2.4.7 teljesítési feltétel (Látható fókusz)
Leírás
A technika célja az, hogy beillesztett felhasználói interfész elemet helyezzen a dokumentum objektum modellbe (DOM) olyan módon, hogy a felhasználói program alapértelmezett viselkedése megfelelő módon állítsa be a tabulálási és a képernyőolvasási rendet. Ez a technika minden olyan rejtett és megjelenített felhasználói interfész elemhez használható, mint például a menük és párbeszéd elemek.
A képernyőolvasó olvasási rendje, amennyiben ez megegyezik az alapértelmezett tabulálási renddel, a dokumentum objektum modellbe ágyazott HTML és XHTML elemek rendjén alapszik. Ez a technika a új tartalmat úgy helyezi el a DOM-ban, hogy az közvetlenül a szkriptet aktiváló elemet követi. A vezérlőjelet tartalmazó elem lehet egy hivatkozás vagy egy gomb, a szkriptet pedig az onclick esemény aktiválja. Ezek az elemek alapvetően fókuszálhatók, az onclick eseményük pedig hardver független. A fókusz mindaddig az aktivált elemen marad, míg az azt követő új tartalom mind a tabulálási mind pedig a képernyőolvasási rendben a következő helyre kerül.
Fontos, hogy ez a technika azonos ütemű frissítésekkel működik. Az eltérő ütemű frissítésekhez (amelyet bizonyos esetekben AJAX-nak neveznek) egy kiegészítő technika is szükséges, amely a segítő technológiát informálja az asszinkronos tartalom beillesztéséről.
Példák
1. példa
A példában a hivatkozásra történő rákattintás után egy menü jelenik meg, amely közvetlenül a hivatkozás után kerül megjelenítésre. A hivatkozás onclick eseménye aktiválja a ShowHide szkriptet az új menü paramétereként pedig egy azonosító kerül továbbításra.
Példa kód:
<a href="#" onclick="ShowHide('foo',this)">Toggle</a>
A ShowHide szkript létrehoz egy dobozt, amely az új menüt tartalmazza, és beleilleszti a hivatkozást. Az utolsó sor a szkript alapvető eleme. Az keresi meg az elem szülőjét, amely a szkriptet aktiválja, és mint új gyermekelemet, hozzárendeli a dobozt. Ennek következtében az új doboz a DOM-ban a hivatkozás mögé kerül. Amikor a felhasználó tabulál, a fókusz a menü első fókuszálható elemére kerül, amely ebben az esetben az általunk készített hivatkozás.
Példa kód:
function ShowHide(id,src)
{
var el = document.getElementById(id);
if (!el)
{
el = document.createElement("div");
el.id = id;
var link = document.createElement("a");
link.href = "javascript:void(0)";
link.appendChild(document.createTextNode("Content"));
el.appendChild(link);
src.parentElement.appendChild(el);
}
else
{
el.style.display = ('none' == el.style.display ? 'block' : 'none');
}
}
A doboz és a hivatkozás menü kinézetét a CSS-en keresztül lehet megoldani.
Ellenőrzések
Folyamat
-
Találja meg az oldal összes olyan tartományát, amelyek nem felugró ablakban megjelenő párbeszéd elemeket aktiválnak.
-
Ellenőrizze, hogy a párbeszédablakokat egy gomb, vagy hivatkozás rákattintás eseménye indítja-e el.
-
A szkript által létrehozott DOM ellenőrzésére alkalmas eszköz segítségével ellenőrizze, hogy a párbeszéd elem a DOM mellett helyezkedik-e el.
Elvárható eredmények
-
A 2. és 3. pontok igazak.