SCR35: A műveletek billentyűzettel elérhetővé tétele a horgonyok és gombok onclick eseményének segítségével
Alkalmazás
HTML-el és XHTML-el alkalmazott szkriptek.
Ez a technika az alábbiakra vonatkozik:
- 2.1.1 teljesítési feltétel (Billentyűzet)
- 2.1.3 teljesítési feltétel (Billentyűzet (kivétel nélkül))
Leírás
A technika célja annak bemutatása, hogyan lehet egy billentyűzettel aktiválható vezérlő segítségével a billentyűzettel is kezelhetővé tenni a szkript funkciót. A szkript műveletek billentyűzettel történő aktiválhatósága érdekében a szkripteket "alapértelmezetten is működtethető" HTML elemekhez (hivatkozások és gombok) társítják. Ezeknek az elemeknek hardver független az onclick eseménye. Annak ellenére, hogy az "onclick" inkább az egérre jellemző eseménynek tűnik, ez tulajdonképpen a hivatkozások vagy gombok alapértelmezett eseménye. Az alapértelmezett esemény akkor következik be, amikor a felhasználó az egérrel az elemre kattint, vagy ha a felhasználó az elemre fókuszál és lenyomja az enter vagy space billentyűket, illetve ha az elem az akadálymentesítési API-n keresztül aktiválásra kerül.
Mivel ez a technika a kliens-oldali szkripteken
alapszik, ezért a szkripteket nem alkalmazó környezetben
tanácsos valamilyen magyarázatot, vagy támogatást
biztosítani. A JavaScriptet aktiváló horgony elemek
alkalmazása esetén a magyarázatot a href
attribútumon keresztül lehet megadni. Gombok alkalmazása
esetén ugyanez egy űrlapon keresztül biztosítható.
Példák
1. példa
Egy szkripttel együttműködő hivatkozásnak nincs olyan változata, amely a szkripteket nem támogató böngészőkkel is működik. Ez a technika csak akkor használható, ha a szkript az akadálymentesítés által támogatott technológiaként kerül alkalmazásra.
Még abban az esetben is, ha a szerkesztő nem akarja navigálhatóvá tenni a hivatkozást, a helyes működés elérése érdekében, akkor is alkalmaznia kell az <a> tagen a href attribútumot. Ebben az esetben általában a "#" karakter határozható meg a hivatkozás céljaként, de bármi más is alkalmas erre a célra. Ezt követően a hivatkozás nem lesz navigálható.
A doStuff() eseménykezelő funkció végén található "hibás visszajelzés" közli a böngészővel, hogy ne navigáljon az URI-ra. Ennek hiányában, a szkript futása után, az oldal frissítésre kerül.
Példa kód:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="#" onclick="return doStuff();">do stuff</a>
2. példa
A hivatkozás szkriptet működtet, de a szkript hiányában egy másik lapra navigál. Ez a módszer a szkripteket nem alkalmazó oldalakon használható, de csak abban az esetben, ha a navigáció célja a szkripttel megegyező funkciójú. Ez a példa megegyezik az 1-es pontban leírtakkal, azzal a kivétellel, hogy ebben az esetben a href attribútum a dostuff.htm című oldalra mutat. A dostuff.com-nak a szkripttel megegyező funkciót kell betöltenie. A doStuff() eseménykezelő funkció végén található "hibás visszajelzés" közli a böngészővel, hogy ne navigáljon az URI-ra. Ennek hiányában a szkript futása után a böngésző a dostuff.htm oldalra navigál.
Példa kód:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="dostuff.htm" onclick="return doStuff();">do stuff</a>
A Creating Action Links using JavaScript. című részben megtekinthető a kód egy működő példája.
3. példa
A példában egy gomb szerepel, amelyik egy szkriptet üzemeltet és egy szkript nélküli felhasználói űrlaphoz vezet vissza. Ez a módszer csak a szkripteket nem használó oldalak esetében használható, és csak abban az esetben, ha az űrlap a szkripttel megegyező funkcióval bír. Az űrlap elküldését az onsubmit="return false;" parancs akadályozza meg.
Példa kód:
<script>
function doStuff()
{
//do stuff
}
</script>
<form action="doStuff.aspx" onsubmit="return false;">
<input type="submit" value="Do Stuff" onclick="doStuff();" />
</form>
A Creating Action Buttons using JavaScriptt. című részben megtalálható a kód egyik működő példája.
4. példa
A szkriptet futató gomb az input
type="image" paranccsal kerül alkalmazásra.
Fontos, hogy az input elemhez egy cím attribútum
hozzáadása szükséges, amely a kép szövegalternatíváját
biztosítja. Ez a módszer csak akkor alkalmazható, ha a
szkript támogatott.
Példa kód:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<input type="image" src="stuff.gif" title="Do stuff" onclick="return doStuff();" />
5. példa
A szkriptet futató gomb az input
type="submit", input type="reset"
vagy input type="button" parancsokkal
kerül alkalmazásra. Ez a módszer csak akkor
alkalmazható, ha a szkript támogatott.
Példa kód:
<input type="submit" onclick="return doStuff();" value=?Do Stuff? />
6. példa
A szkriptet futató gomb
button?/button paranccsal
kerül alkalmazásra. Ez a módszer akkor értékes igazán,
ha a gomb kinézetét fokozottabban kívánja a szerkesztő
emelni. A példában szereplő gomb egyaránt tartalmaz
képet és némi szöveget. Ez a módszer csak akkor
alkalmazható, ha a szkript támogatott.
Példa kód:
<button onclick="return doStuff();">
<img src="stuff.gif" alt="stuff icon">
Do Stuff
</button>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
- G90: Billentyűzet által kiváltott eseménykezelők biztosítása
- G108: Jelölő funkciók használata a név és szerep megmutatásához, a felhasználó által beállítható tulajdonságok közvetlen elvégzésének engedélyezése, valamint értesítés biztosítása a változásokról
- H91: HTML űrlap vezérlők és hivatkozások alkalmazása
- SCR20: A billentyűzet és más hardver specifikus funkciók használata
- SCR24: Új ablak megnyitása a felhasználói kérésre történő progresszív fejlesztéssel
- F42: Az 1.3.1 és 2.1.1 teljesítési feltételekhez tartozó hiba, amelyet a hivatkozásokat szimuláló de algoritmikusan nem meghatározható szkriptek okoznak
- F59: A 4.1.2 teljesítési feltételhez tartozó hiba, amelyet a HTML felhasználói interfész vezérlőhöz szükséges doboz vagy értéktartomány létrehozására alkalmazott szkript okoz
Ellenőrzések
Folyamat
Minden hivatkozáshoz, gombhoz vagy beviteli elemhez társított szkript művelet esetében:
-
A szkripteket támogató felhasználói programok esetében
-
Kattintson az egérrel a vezérlőre.
-
Ellenőrizze, hogy a szkript művelet tökéletesen működik-e.
-
Abban az esetben, ha a vezérlő egy horgony elem ellenőrizze, hogy a horgony href attribútumában található URI nem került aktiválásra.
-
Ellenőrizze, hogy a billentyűzeten keresztül navigálható és fókuszálható-e a vezérlő.
-
Állítsa a billentyűzet fókuszát a vezérlőre.
-
Ellenőrizze, hogy az ENTER gomb megnyomása aktiválja-e a szkript műveletet.
-
Abban az esetben, ha a vezérlő egy horgony elem ellenőrizze, hogy a horgony href attribútumában található URI nem került aktiválásra.
-
- A szkripteket nem támogató felhasználói program
esetében.
- Kattintson az egérrel a vezérlőre.
- Abban az esetben, ha a vezérlő egy horgony elem ellenőrizze, hogy a horgony href attribútumában található URI aktiválásra került.
- Ellenőrizze, hogy a billentyűzeten keresztül navigálható és fókuszálható-e a vezérlő.
- Állítsa a billentyűzet fókuszát a vezérlőre.
- Abban az esetben, ha a vezérlő egy horgony elem ellenőrizze, hogy az ENTER gomb megnyomása aktiválja-e a horgony elem href attribútumában lévő URI-t.
Elvárható eredmények
-
Minden fenti ellenőrzés igaz.