Welkom op de vernieuwde website van AlphamegaHosting.com!

Maak je formulier beter toegankelijk met accesskeys

Jeroen Hoekstra | 2007-07-13 | Programmeren en techniek

Vandaag de dag wordt er veel gesproken over de toegankelijkheid van websites voor mensen met beperkingen, maar hoe zit dat nu bij formulieren? Hoe zou je die toegankelijk kunnen maken? Het antwoord op deze vraag is 'accesskeys'.
Een accesskey is een html-attribuut dat gebruikt kan worden als sneltoets. Je kunt hiermee snel navigeren naar de diverse formuliervelden via het toetsenbord. Deze sneltoetsen zijn dus met name geschikt voor bezoekers die afhankelijk zijn van het toetsenbord. Dit kan zijn doordat ze een handicap hebben of simpelweg niet de beschikking hebben over een muis.

Laten we eens naar een aanmeldformulier kijken. Stel, je wilt het naam- en emailveld op je website snel toegankelijk maken. We gaan eerst kijken hoe de HTML-code er uit zou kunnen zien. Hieronder staat het voorbeeld:

<form action="een_script.cgi" method="post">
Naam: <input type="text" name="naam" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" name="submit" value="Aanmelden" />
</form>

We hebben dus een naam- en email-veld en een knop 'Aanmelden' om het formulier te kunnen verzenden. Willen we deze input-velden toegankelijk maken via het toetsenbord, dan moeten we per veld een accesskey-attribuut toevoegen.

<form action="een_script.cgi" method="post">
Naam: <input type="text" name="naam" accesskey="n" /><br />
Email: <input type="text" name="email" accesskey="e" /><br />
<input type="submit" name="submit" value="Aanmelden" accesskey="s" />
</form>

Wat we nu gedaan hebben is de letter n als sneltoets koppelen aan het naamveld, de letter e hebben we als sneltoets gekoppeld aan het emailveld en de letter s is als sneltoets gekoppeld aan de verzendknop. Om nu toegang te krijgen tot deze velden kun je niet simpelweg op de betreffende letter op het toetsenbord drukken. In de meeste browsers is het een combinatie van een andere toets en de ingestelde accesskey. In Internet Explorer brengt de 'Alt'-toets in combinatie met de betreffende accesskey ons naar het gewenste veld. In FireFox 2 is dit 'Shift Alt' en de accesskey.

Met de Alt- en de n-toets krijgen we in IE dus toegang tot het naamveld en kunnen we beginnen met typen. Nu ontstaat er wel een probleem. In de meeste browsers hebben bepaalde toetscombinaties al een functie. Zo opent in IE (Engelse versie) de toetscombinatie 'Alt f' het 'File'-menu en 'Alt e' het 'Edit-menu'. In ons formulier hebben we ook gebruikgemaakt van de letter e als accesskey om met de toetscombinatie 'Alt e' toegang te krijgen tot het emailveld. Door deze toetscombinatie te gebruiken, verminder je dus de toegankelijkheid van de browser voor mensen die afhankelijk zijn van het toetsenbord. Dit moet je dus zien te voorkomen. Je zou bijvoorbeeld in plaats van letters, cijfers kunnen gebruiken.

Een ander nadeel van accesskeys is dat er geen standaard is over het gebruik hiervan. Het gebruik van accesskeys verschilt dus per website. De één maakt gebruik van letters, de ander van cijfers of ze worden helemaal niet gebruikt. Maak je wel gebruik van sneltoetsen, probeer dan de bezoeker hierop attent te maken. Als ze eerst al moeten uitzoeken welke sneltoetsten er gekoppeld zitten aan de diverse elementen van een website, is het voordeel van tijdwinst al snel weer weg.

Probeer het maar eens uit.

Succes!

Zoek

Doe mee! Word ook WebsiteSupporter!

Ontvang gratis elke week een verbetersuggestie voor je website, inclusief speciaal stappenplan om je site succesvol te maken.

Klik hier om je in te schrijven!

Domeinnaam-check

Domeinnamen v.a. € 1,- p/m. Check of jouw ideale domeinnaam nog vrij is:

www.

Even onthouden

Moet er iets aan je site gebeuren?

En heb je zelf geen tijd, geen zin of geen idee hoe je het moet aanpakken? Laat ons website-klusteam het voor je oplossen!

Klik hier voor meer info. 

Thema van de week:

Hallo Google! Welkom op mijn website!

De scripts van Google die regelmatig langskomen om je site te indexeren zijn natuurlijk ook 'bezoekers' die je het naar de zin moet maken. In het artikel van deze week leer je hoe je die 'crawlers' de juiste info kunt meegeven.

Klik hier voor het artikel.

Informatie

Hopelijk vind je alle informatie die je nodig hebt op deze website. Heb je nog vragen? Klik hier om een bericht te sturen of bel tijdens kantoor-uren met 040-2085353 (NL) of 011/547498 (B).

Ben jij een startende ondernemer?

Dan hebben wij een handig gratis ebook om je op weg te helpen met je online presentatie.

Klik hier om het gratis te downloaden.

Alphamega Hosting heeft een unieke garantie!
Privacy Contact Sitemap Copyright 2012 Alphamega Hosting B.V.