Accesskey-atributten er et hjælpemiddel til tastaturnavigation. Artiklen beskriver hvorledes du kan aktivere dette hjælpemiddel.
Øverst på denne side ser du en flad navigationsbjælke. Hvis du klikker på det lille enkeltstående A i menuen ændrer menuen udseende. Holder du derefter ALT-tasten nede og taster H (eller h) aktiveres linket yderst til venstre (linket kommer i fokus), og hvis du taster Enter, indlæser du webstedets forside.
Idéen med denne feature er at lave tastaturgenveje til de vigtigste menupunkter til gavn for motorisk handicappede, der har vanskeligt ved at betjene en mus, og for dem, som gerne vil undgå at blive motorisk handicappede og derfor foretrækker at bruge tastaturgenveje, når disse findes.
Og tastaturgenveje findes jo ikke på vore websider. Medmindre vi altså laver noen.
Accesskey-attributten har ligesom
tabindex-attributten kun interesse i forbindelse med
aktive elementer på websiden, det vil sige links og
formularfelter. Det er altså i denne sammenhæng en attribut
til a-markøren, og syntaksen er lige ud af landevejen:
<a href="[url]" title="[linkets titel]"
accesskey="f">Forsiden</a>
– der ser således ud på websiden:
Linket lige herover er godt nok, men det virker ikke helt som det tilsvarende link i menubjælken. (Og her tænker jeg ikke på, at jeg har valgt et andet accesskey-bogstav.)
Der mangler en visuel tilkendegivelse af, at der findes en tastaturgenvej til dette link. Og selvom vi taster ALT-F (eller ALT-f – det er lige fedt) er der ingen øjnefaldende visuel bekræftelse på, at linket er i fokus, og vi derfor skal taste Enter for at aktivere linket.
Den mest oplagte visuelle tilkendegivelse af, at der er tale om en tastaturgenvej er fremhævelse af det bogstav i linkteksten, der svarer til accesskey-bogstavet. Der kan tænkes forskellige visuelle udtryk, alt efter menuens beskaffenhed. Jeg syntes under alle omstændigheder at en understregning bør indgå i det visuelle udtryk, for at skabe mindelsen om Windows' måde at vise tastaturgenveje på. Med en sådan fremhævning vil mit lille eksempel få følgende udseende:
Bemærk, at jeg forsøger at komme igennem disse forklaringer ved at
vælge forskellige url'er og accesskey-bogstaver, jeg ikke
i forvejen har brugt i min menubjælke. Jeg kan jo kun bruge et bogstav
én gang per webside.
Syntaktisk er det sidstnævnte eksempel lavet på følgende måde:
<a href="[url]" class="eksempel" title="Design-sektionen" accesskey="o"> Design-sekti<em>o</em>nen</a>
Det, der er værd at bemærke her, er, at jeg har givet linket et
class name eksempel og at bogstavet o i linkteksten, der svarer
til accesskey-bogstavet, er markeret med em-makøren.
I et par formregelblokke skaber jeg det ønskede visuelle udtryk:
a.eksempel {
text-decoration:none;
}
a.eksempel em {
font-style:normal;
border-bottom:2px solid #257;
}
I den øverste formregelblok fjerner jeg den "naturlige"
understregning af linkteksten og i den anden formregelblok sætter jeg
formreglerne for en kontekstuel selektor, der kun gælder for et em,
der er inde i et link med en class, der er eksempel.
Hvorledes du præcist skal udforme det visuelle udtryk for genvejstasten afhænger naturligvis meget af den sammenhæng – kontekst – den forekommer i. Navigationsbjælken på denne side er grundlæggende den samme som mit eksempel Kvikfix navbar 100% bred i artiklen om Introduktion til stylesheet-formaterede menuer.
For at tydeliggøre genvejstasterne bruger jeg en
understregning, idet jeg sætter text-decoration:underline på det
em-fremhævede bogstav.
Eksemplerne her på siden – fraset navigationsbjælken –
er indrettet
således, at de følger webstandarden for et link: Først skal linket vælges
(selekteres, bringes i fokus), og dernæst skal linket aktiveres (ved at
taste Enter). Bruger du musen, er du ikke i tvivl om, hvornår linket er
i fokus. Ved hjælp af a:hover-egenskaben kolorerer jeg linket
rødt, når musen er over det, og det dermed er linket valgt og i fokus.
Så kræves der kun ét museklik for at aktivere linket.
I de to eksempler, jeg har givet indtil nu, sker der – når du taster ALT-H eller ALT-O – at de respektive links kommer i fokus. Der skal en handling mere til, det vil sige enten et museklik – hvilket vel egentligt er det, vi gerne vil undgå – eller aktivering af tastaturets Enter-tast.
Denne virkemåde er faktisk udmærket i tråd med Windows' bruger-interface, men i modsætning til dette har vi ikke her nogen klar markering af, at elementet er i fokus.
Der er to veje ud af dette dilemma:
I begge tilfælde er vi nødt til at tage noget JavaScript til hjælp.
De events, vi skal have fat i, er onfocus, der indtræder, når et element
selekteres, og onblur, der indtræder, når fokus fjernes fra et element.
Det letteste er at aktivere linket direkte ved hjælp af genvejstasten,
således at ALT-T i nedenstående eksempel straks indlæser forsiden til
JavaScript-sektionen:
<a onfocus="location.href(this.href); return false;" accesskey="s" href="[url]" id="eks03" class="eksempel" title="JavaScript-sektionen"> Java<em>S</em>cript-sektionen</a>
Jeg er ikke tilfreds med denne løsning, eftersom der i Internet
Explorer sker det, at location.href i dette tilfælde tilsyneladende
fortolkes som location.replace. Dermed sættes browserens tilbageknap
ud af kraft, og brugeren vil ikke ved hjælp af denne kunne vende tilbage
til den webside, hvorfra hun aktiverede linket.
Den anden mulighed er at lave en slags mouseovereffekt. Det kompliceres noget af, at vi jo her har flere forskellige hændelser og tilstande at jonglere med. onfocus er ikke det samme som mouseover-hændelsen og ingen af dem er identiske med linkets hover-tilstand.
Der findes faktisk en tilstand, der er svaret på mine bønner,
nemlig a:focus, der nøje svarer til den netop beskrevne
tilstand, det vil sige: linket er valgt, men det er ikke aktiveret,
der er ikke klikket (idet et museklik i virkeligheden en en mousedown
hurtigt efterfulgt af en mouseup).
Hvis du læser denne side med en hvilkensomhelst anden nyere browser
end Internet Explorer version 6 eller lavere, vil du kunne iagttagem at
de 3 links i selv artiklen netop blive røde, når du bruger accesskey-tasten.
Det skyldes, at mit stylesheet for a.eksempel klassen af links i
sin helhed ser således ud:
a.eksempel {
text-decoration:none;
}
#indhold .center a.eksempel:hover {
color:#c00;
}
#indhold .center a.eksempel:focus {
color:#c00;
}
a.eksempel em {
font-style:normal;
border-bottom:2px solid #257;
}
Det er imidlertid ingenting værd, så længe flertallet af vore læsere bruger Internet Explorer, så vi må finde på en anden måde.
Til løsning af det problem har jeg fundet uvurderlig hjælp i en nylig artikel på www.webreference.com, ganske vist om et andet emne, men alligevel. M. C. Mattis artikel Stylish Buttons er en indføring i formatering af formularknapper. Dén artikel indeholder adskilllige gode ideer, hvoraf jeg viderebringer nogle i min artikel Giv dine formularknapper et lag kosmetik.
Problemstillingen her er: Jeg ønsker at bruge tastaturgenveje på en sådan måde, at mine links kommer i fokus, når genvejstasten aktiveres. Det skal tydeligt indikeres visuelt, at elementet faktisk er i fokus. Det er ikke nok med den stiplede kant som nogle browsere måske og måske ikke anbringer omkring det aktive element.
De events der kan komme på tale her er onfocus
og onblur, der fanger de to hændelser: elementet kommer i
fokus, elementet glider ud af fokus.
Løsningen, jeg har fundet i Mattis artikel, har at gøre med at vi kan referere et element af en bestemt klasse (class) via DOM (Dokumentobjektmodellen):
document.getElementById("elementID").className="knap"
– og dermed give elementet et nyt klassenavn. Hvis vi prøver det af på vore menuknapper, kunne det se således ud:
<a class="menuknap" onfocus="this.className='menuknaphover'" onblur="this.className='menuknap'" accesskey="m" href="[url]"><em>M</em>erkur</a>
Jeg har lavet en lille menu, hvori vi kan afprøve denne idé:
Som du ser, virker det som forventet. Men det kræver jo, at jeg har to stylesheet formregelblokke, der formaterer menuens links, nemlig en normaltilstand og en fokustilstand:
#menubar a.menuknap {
color:#1a0080;background:#ccf;
text-decoration:none;
padding:3px 5px 3px 5px;
border-width:1px 1px 1px 0;
border-style:solid;
border-color:black;
line-height:1.5em;
margin:0;
}
#menubar a.menuknaphover {
color:#ccf;background:#1a0080;
text-decoration:none;
padding:3px 5px 3px 5px;
border-width:1px 1px 1px 0;
border-style:solid;
border-color:black;
line-height:1.5em;
margin:0;
}
Jeg foretager mig ikke meget her – jeg bytter kun om på forgrundsfarve og baggrundsfarve.
JavaScript-delen af attributterne skal nu sørge for at indlæse
formdeklarationen menuknaphover, når elementet er i
fokus, og genindlæse formdeklarationen menuknap, når
elementet glider ud af fokus. Det kunne godt gøres ved at give
hvert link en ID og lade onfocus og onblur
udløse en funktion, der så via DOM-referencen ændrede det aktuelle
elements egenskaber. Men som Matti viser i sin artikel, er det meget
nemmere at bruge nøgleordet this, der instantierer
hele DOM-referencen på det aktuelle element.
Der er en betydelig ulempe forbundet med brugen af
accesskey-attributten til at indsætte
tastaturgenveje på en webside. Ulempen er, at browseren
så at sige erobrer tastaturgenvejene fra operativsystemet.
Konkret er det således, at hvis du f.eks. bruger F som genvejstast,
vil brugerne ikke længere kunne bruge ALT-F til at aktivere
Filer-menuen i Windows.
Dette fænomen har medført en temmelig omfattende diskussion i det debatforum, der er knyttet til Stuart Robinsons artikel på www.alistapart.com (Se under overskriften "Herkomst" i kolonnen til højre). Der er mange gode synspunkter både for og imod og mange referencer til websteder, hvor man har anvendt disse eller lignende principper.
Et af de rigtig gode indlæg i ovennævnte debatforum peger på, at vi
bør indrette vore websider således, at dem, der gerne vil bruge tastaturgenveje,
får det valg, mens andre slipper for dem. Det er jeg helt med på.
Indlægget afslører desværre ikke, hvordan det skal ske. Det er jo ikke
nok at ændre stylesheet. Det er ikke formateringen, der fjerner Windows'
tastataturgenveje. Det er forekomsten af accesskey-attributten.
Man kan diskutere for og imod anvendelsen af tastaturgenveje på websider, men beslutter du dig for at bruge teknikken, er det vigtigt, at du
I denne artikel har jeg belyst nogle metoder til at opnå disse mål, når genvejstaster bruges på websider.
Denne side er senest opdateret: 26. November, 2006