SCR31: A fókuszált elem háttér és szegély színének megváltoztatása szkript segítségével
Alkalmazás
HTML és XHTML, CSS, szkript
Ez a technika az alábbiakra vonatkozik:
A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések
Ez a technika csak olyan felhasználói programokkal,
beleértve a Microsoft Internet Explorert is,
használható, amelyek nem támogatják a
:focus pszeudo osztályt, de támogatják a
szkripteket.
Leírás
A technika célja az, hogy lehetővé tegye a szerkesztő részére a CSS-el együtt alkalmazott JavaScript használatát, annak érdekében, hogy az alapértelmezett módnál láthatóbbá tegye a fókusz jelzését. Abban az esetben, ha egy elem a fókuszba kerül, ennek hangsúlyozására az elem háttere vagy szegélye megváltoztatja a színét. A fókusz elmozdításakor visszaállnak az eredeti színek. Ezt a technika minden olyan HTML alapú felhasználói program esetében használható, amely támogatja a szkripteket és a CSS-t. Ebben az esetben a :focus pszeudo osztály támogatottságát nem kell figyelembe venni.
Példák
1. példa
Az alábbi példában a hivatkozás fókuszba kerülésekor annak háttere sárga színűre változik. A fókusz elmozdításakor a sárga színezés is megszűnik. Fontos, hogy abban az esetben, ha a hivatkozásnak van egy háttérszíne, inkább azt kell használni, mint a szkriptben szereplő "" jelet.
Példa kód:
...
<script>
function toggleFocus(el)
{
el.style.backgroundColor = el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
}
</script>
...
<a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>
...
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Tabuláljon rá az oldal minden egyes elemére.
-
Ellenőrizze, hogy a fókusz indikátora látható-e.
Elvárható eredmények
-
A 2. pont igaz.