Sådan kan du bruge accesskey-attributten

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.

Attributten

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:

Forsiden

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.

Visning af tastaturgenvejene

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:

Design-sektionen

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.

Konteksten

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.

Aktivering af elementet

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:

  1. ændre linkets karakter, når det er i fokus, således, at det er klart, at der er i fokus på samme måde, som ved en mouseover, eller
  2. aktivere linket, i samme øjeblik, det er i fokus.

I begge tilfælde er vi nødt til at tage noget JavaScript til hjælp.

Scripting af genvejstaster

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:

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.

Hvad er problemet?

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.

Betænkeligheder

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.

Konklusion

Man kan diskutere for og imod anvendelsen af tastaturgenveje på websider, men beslutter du dig for at bruge teknikken, er det vigtigt, at du

  1. Klart og tydeligt signalerer, at genvejstasterne findes,
  2. klart og tydeligt signalerer, hvilke links, der har en genvejstast
  3. klart og tydeligt signalerer, hvilket bogsstav, der skal tastes
  4. klart og tydeligt markerer, når et link er i fokus.

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: 25. November, 2006