NN Dag 15

Dag 15: Definere snøggtastar

Ein av dei minst kjende eigenskapane til HTML er accesskey-attributtet for lenkjer og skjema, som tillet vevutviklaren å definera tastatursnarvegar for hyppig brukte lenkjer eller skjemafelt. I Windows kan ein trykkja ALT + ein snøggtast; på Macintosh kan ein trykkja Control + ein snøggtast. Om snøggtasten er definert for ei lenkje så vil vevlesaren fylgja lenkja, om den er definert for eit skjemafelt så vil vevlesaren setja fokus på det feltet. Internet Explorer har støtta snøggtastar sidan versjon 4 og Netscape sidan versjon 6. Eldre vevlesarar overser dei, utan nokon skadeleg verknad.

Sjølv om det ikkje er nokon standard for kva for tastar som skal bli tildelt kva for eigenskapar, er det her gjeve nokre vanlege brukte snøggtastar:

Tilgangstast 1

Heim (framsida)

Tilgangstas 2

Hopp til hovedinnhald (hopp over navigasjonsmenylenkja)

Tilgangstast 9

Tilbakemelding (Kontakt oss)

Who benefits?

1. Jackie benefits. When JAWS reads a link that defines an accesskey, it announces the access key as well. For example, the link <a href="/" accesskey="1">Home page</a> would be read by JAWS as "link: Home page, ALT + 1". Jackie can focus on the link by pressing ALT+1, then follow it by pressing ENTER.
2. Bill benefits. Since Bill can not use a mouse effectively since his stroke, he relies on keyboard navigation and keyboard shortcuts to move around the page. Access keys are an excellent way for him to jump to common or frequently-used links. Bill can type ALT+1, and Mozilla immediately follows the link that defines accesskey="1". (Note: Mozilla does not announce access keys, which raises the question of how Bill would discover what they are. We will discuss this in a future tip.)

How to do it: home page link

Movable Type: The default template does not have a link to the home page, so you should make your site name into a link, and give it an accesskey. Search your template for <$MTBlogName$>, and change it to this:

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

Radio: search your template for {siteName}. It will probably be in a link, something like this:

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

Simply add an accesskey attribute to the link, like this:

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

Blogger: search your template for <$BlogTitle$>. If it's enclosed in an <a> tag, add the accesskey="1" attribute to the <a> tag, like the above Radio example. If your <$BlogTitle$> is not enclosed in an <a> tag, enclose it in one like this (insert your own home page address):

<a href="http://address/of/your/home/page" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>

How to do it: skip navigation link

Do you have a link to skip over your navigation bar? If so, give it an accesskey="2".

<a class="skiplink" href="#startcontent" accesskey="2">Skip over navigation</a>

How to do it: feedback link

Do you have a link to a feeback form, or a link to your email address? If so, give it an accesskey="9".

<a href="mailto:me@mydomain.com" accesskey="9">Email me</a>

Note: Radio weblogs generally have a link to a feedback form (the little envelope icon), but the link is generated by a macro, so you will not be able to add an accesskey to it.

Be sure to include each accesskey on each page of your web site; make these changes to all your relevant templates.

Further reading

• Jukka Korpela: Improving accessibility with accesskey in HTML forms and links. Explains why all my suggested accesskey codes are numbers, instead of letters.
• Paul Bohman: Access keys, IE6. Part of a discussion of accesskey on the Web Accessibility Forum Mailing List.