Kast deg ut i tilgjengelighet

Dag 15: Definere tastatursnarveier

En av de minst kjente egenskapene til HTML er accesskey-atributtet for lenker og skjemaer, som lar webdesigneren definere tastatursnarveier for ofte brukte lenker eller skjemafelter. På Windows, kan du trykke ALT + en aksesstast; på Macintosh, kan du trykke Control + en aksesstast. Hvis aksesstasten er definert på en lenke, vil din nettleser følge lenken; hvis definert på et skjemafelt, vil nettleseren din sette fokus på det feltet. Internet Explorer har støttet aksesstaster siden versjon 4, Netscape siden versjon 6. Eldre nettlesere overser dem enkelt og greit, uten noen skadelig effekt.

Selv om det ikke er noen standarder for hvilke taster som skal bli tildelt hvilke egenskaper, er det her noen ofte brukte tastatursnarveier:

Aksesstast 1

Hjem (forsiden)

Aksesstast 2

Hopp til det viktigste innholdet (hopp over navigasjonsliste-lenken)

Aksesstast 9

Tilbakemelding (kontakt oss)

Hvem har nytte av det?

1. Anne har nytte av det. Når JAWS leser en lenke som definerer en aksesstast, melder den også fra om aksesstasten. For eksempel, lenken <a href="/" accesskey="1">Hjem page</a> vil bli lest av JAWS som «link: Hjem, ALT + 1». Anne kan fokusere på lenken ved å trykke ALT+1, deretter gå til den ved å trykke ENTER.
2. Knut har nytte av det. Fordi Knut ikke kan bruke musen effektivt etter han fikk slag, stoler han på tastaturnavigasjon og tastatursnarveier til å bevege seg rundt på siden. Aksesstaster er en flott måte for ham til å hoppe til vanlige eller ofte brukte lenker. Knut kan skrive ALT+1, og Mozilla følger øyeblikkelig lenken som definerer accesskey="1". (Merk: Mozilla melder ikke fra om aksesstaster, noe som bringer frem spørsmålet om hvordan Knut kan oppdage hva de er. Vi vil diskutere dette i et fremtidig tips.)

Hvordan gjøre det: Hjem-lenken

• Movable Type: Standardmalen har ikke en lenke til hjem-siden, så du burde lage sidenavnet til en lenke, og gi den en aksesstast. Søk i malen din etter <$MTBlogName$>, og endre den til dette:

  <a href="<$MTBlogURL$>" style="color:black; text-decoration:none" accesskey="1"><$MTBlogName$></a>

• Radio: Søk i malen din etter {siteName}. Den vil sannsynligvis være i en lenke, slik som dette:

  <a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none"><%siteName%></a>

  Legg enkelt og greit et accesskey-atributt på lenken, slik:

  <a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none" accesskey="1"><%siteName%></a>

• Blogger: Søk i malen din etter <$BlogTitle$>. Hvis den er pakket inn i en <a>-tagg, legg accesskey="1" atributtet til <a>-taggen, slik som i det ovenstående Radio-eksempelet. Hvis din <$BlogTitle$> not er pakket inn i en <a>-tagg, pakk den inn i en slik som dette (sett inn adressen til din egen side):

  <a href="http://addressen/til/din/hjem/side" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>

Hvordan gjøre det: Hopp over navigasjon-lenken

Har du en lenke til å hoppe over navigasjonslisten? I så fall, gi den accesskey="2".

<a class="skiplink" href="#startcontent" accesskey="2">Hopp over navigasjonen</a>

Hvordan gjøre det: Tilbakemeldingslenken

Har du en lenke til et tilbakemeldingsskjema, eller en lenke til din e-postadresse? I så fall, gi den accesskey="9".

<a href="mailto:meg@mittdomene.com" accesskey="9">Send meg epost</a>

Merk: Radios weblogger har vanligvis en lenke til et tilbakemeldingsskjema (det lille ikonet av en konvolutt), men lenken er laget av en makro, så du er ikke i stand til å legge til en accesskey til den.

Sørg for å inkludere hver accesskey på hver side av nettstedet ditt, gjør disse forandringene i alle dine relevante maler.

Les mer

• Jukka Korpela: Improving accessibility with accesskey in HTML forms and links. Forklarer hvorfor alle mine foreslåtte accesskey-koder er nummere, i stedet for bokstaver.
• Paul Bohman: Access keys, IE6. En del av diskusjonen om accesskey-taster på Web Accessibility Forum Mailing List.