SCR37: Eszközfüggetlen párbeszédablakok kialakítása
Alkalmazás
Szkriptet alkalmazó HTML és XHTML.
Ez a technika az alábbiakra vonatkozik:
Leírás
A webszerkesztők gyakran alkalmaznak olyan párbeszédablakokat, amelyek nem a böngésző által biztosított felugró ablakokban jelennek meg. Ehhez a megoldáshoz általában a párbeszéd tartalmát egy olyan dobozban helyezik el, amelyet abszolút módon pozícionálnak a CSS stíluslapon. A megjelenítés rendjét a z-index értékével határozzák meg.
A hozzáférés biztosításához a párbeszédeknek az alábbi előírásokat kell teljesíteniük.
-
A párbeszédet aktiváló szkriptet egy hivatkozásnak vagy gomb
onclickeseményének kell vezérelnie. -
A párbeszédet tartalmazó dobozt közvetlenül az őt vezérlő elem mögé kell elhelyezni a dokumentum objektum modellben (DOM). A fókuszt a vezérlő elem fogja megtartani és a tartalom az előbbiek szerinti elhelyezése fogja biztosítani a tartalom megfelelő elhelyezkedését a képernyőolvasó olvasási sorrendjében, illetve a tabulálási rendben. A párbeszéd vizuális megjelenése abszolút módon bárhol pozícionálásra kerülhet a lapon. Ezt úgy is meg lehet oldani, hogy a párbeszéd a HTML-ben kerül megszerkesztésre és CSS-el kerül rejtésre, mint a lenti példában, vagy egy szkript segítségével közvetlenül az őt aktiváló elem mögé is beillesztésre kerülhet.
-
A párbeszéd dobozon belül elhelyezkedő HTML-nek meg kell felelnie a tartalom többi részére is vonatkozó akadálymentesítési szabványoknak.
A párbeszédablak a fókusznak, illetve a hivatkozás aktivitásának megfelelő nyitása és csukása szintén egy szép, de nem kötelező megoldás.
Példák
1. példa: A párbeszédet nyitó választó gomb
Az alábbi példában a HTML tartalmazza a vezérlőelemet, ebben az esetben egy gombot, és egy doboz szolgál a párbeszéd kereteként.
A vezérlőelem jelen esetben egy gomb, a szkriptet pedig az onclick esemény aktiválja. Ez utóbbi küldi a megfelelő eseményt az operációs rendszernek és így a segítő technológia is észleli a DOM megváltozását.
Az alábbi példában szereplő párbeszédben szereplő küldés és törlés gombok egyszerűen elrejtik a párbeszédet tartalmazó dobozt.
Példa kód:
...
<button onclick="TogglePopup(event,true)"
name="pop0001">Options</button>
<div class="popover" id="pop0001">
<h3>Edit Sort Information</h3>
<form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
<fieldset>
<legend>Sort Order</legend>
<input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
<input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
</fieldset>
<div class="buttons">
<input type="submit" value="OK" />
<input type="reset" value="Cancel" />
</div>
</form>
</div>
...
A doboz, fejléc és űrlap elemek CSS-el kerültek megformázásra.
Példa kód:
...
a { color:blue; }
a.clickPopup img { border:none; width:0; }
div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
...
A felugró doboz megjelenítését és eltüntetését a szkript szabályozza.
Példa kód:
...
function TogglePopup(evt,show)
{
HarmonizeEvent(evt);
var src = evt.target;
if ("click" == evt.type)
{
evt.returnValue = false;
}
var popID = src.getAttribute("name");
if (popID)
{
var popup = document.getElementById(popID);
if (popup)
{
if (true == show)
{
popup.style.display = "block";
}
else if (false == show)
{
popup.style.display = "none";
}
else
{
popup.style.display = "block" == popup.style.display ? "none" : "block";
}
if ("block" == popup.style.display)
{
//window.alert(document.documentElement.scrollHeight);
popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
}
}
}
}
function SubmitForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
function ResetForm(elem)
{
elem.parentNode.style.display='none';
return false;
}
...
Az An options button that opens a dialog című részben megtekinthető egy működő példa.
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
-
W4A Paper: Accessibility for Simple to Moderate-Complexity DHTML Web Sites by Cynthia C. Shelly and George Young, Microsoft Corporation. (PDF formátum)
-
Microsoft Developer Network Whitepaper: Writing Accessible Web Applications by Cynthia C. Shelly and George Young. (Microsoft Word formátum)
-
Microsoft Active Accessibility 2.0 SDK. Inspect32.exe és más MSAA eszközöket is tartalmaz.
-
Microsoft Internet Explorer Developer Toolbar.. Lehetővé teszi a szkripttel generált DOM és a Microsoft Internet Explorer vizsgálatát.
-
Firebug. Lehetővé teszi a Firefoxban szkripttel generált DOM vizsgálatát.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Találja meg a lapon az összes nem felugró ablakban megjelenő párbeszédet.
-
Ellenőrizze, hogy a párbeszéd megnyitható-e a billentyűzettel történő kijelöléssel, illetve az enter gomb megnyomásával.
-
Ellenőrizze, hogy a megnyitott párbeszéd a tabulálási rend következő helyét foglalja-e el.
-
Ellenőrizze, hogy a párbeszédek a gombokra, vagy hivatkozásokra történő kattintáskor indulnak-e el.
-
A DOM ellenőrzésére használt szkript alapú eszköz esetén ellenőrizze, hogy a párbeszéd a DOM mellett található-e.
Elvárható eredmények
-
A 2., 3., 4., és 5. ellenőrzés igazak.