Client-side scripts als uitbreiding op een link

Als een link een scriptfunctie uitvoert die naar een URL leidt, maak deze URL dan ook benaderbaar voor bezoekers zonder scriptondersteuning.

Uitleg van deze richtlijn

Vaak treft men links aan die scripts aanspreken in de volgende vormen, bijvoorbeeld om een venster te openen met een bepaalde pagina.

Voorbeelden van links die een scriptfunctie foutief aanspreken (HTML)

  1. <a href="#" onclick="window.open('http://domein.nl/pagina', '_blank');">

Zoek-spiders en browsers die client-side scripts niet ondersteunen, verwachten een URL in het href attribuut. Dergelijke links leiden tot ontoegankelijkheid. Er is echter een eenvoudig alternatief beschikbaar.

Links die een scriptfunctie correct aanspreken (HTML)

  1. <a href="http://domein.nl/pagina" onclick="window.open(this.href, '_blank'); return false;" onkeypress="window.open(this.href, '_blank'); return false;">

Nu komt er wel een URL voor in het href attribuut. Zoek-spiders en browsers die geen client-side scripts ondersteunen, volgen deze URL en negeren de scriptregel die ze niet begrijpen. Browsers die wel client-side scripts ondersteunen, voeren de functie uit en openen de URL in een nieuw venster. Nog eenvoudiger in gebruik is om de functie onder te brengen in een externe scriptbestand en vervolgens aan te roepen met een class of id attribuut:

<a href="http://domein.nl/pagina" class="helptekst">.

Deze oplossing is ” vooral voor redacteuren ” niet alleen het meest eenvoudig in gebruik, maar ook semantisch gezien beter en verdient dus de voorkeur.[r5]

Lees ook over de richtlijnen voor Links en nieuwe vensters.

In de meeste moderne browsers wordt het onclick attribuut (onclick event) geïnterpreteerd als een actie die de bezoeker uitvoert, om de link waarop het attribuut staat te volgen. Dit kan een muisklik inhouden, maar ook een toetsklik. Bezoekers die afhankelijk zijn van het navigeren via het toetsenbord kunnen dus ook gebruik maken van deze scriptfunctionaliteit. Als deze bezoeker een browser gebruikt die dit niet ondersteunt, kan hij de link toch volgen, zij het zonder de aanvullende functionaliteit.

Voorbeeld: een uitklapmenu

Deze uitbreiding van de functionaliteit van links is ideaal voor een uitklapmenu waarvan de hoofdlink nergens naartoe hoeft te leiden, maar juist bij een muisklik moet uitklappen in een submenu.

  1. <a href="http://domein.nl/pagina" onclick="openSubmenu(); return false;">

Bij ondersteuning voor scripts zal het volgen van de link worden geannuleerd. In plaats daarvan wordt de functie uitgevoerd die het submenu opent. Als scripts echter niet worden ondersteund, volgt de browser gewoon de URL in het href attribuut.

Als deze URL een van de locaties is waarnaar in het submenu wordt verwezen en als op deze locatie het submenu uitgeklapt te vinden is, is er een zeer toegankelijk navigatiemenu gecreëerd.

Gerelateerde richtlijnen

  • R-pd.1.2: Bouw websites volgens het principe van gelaagd bouwen.
  • R-pd.1.3: Maak de functie van de website niet afhankelijk van optionele technologie, zoals CSS en client-side script: optionele technologie dient de informatie op de site en het gebruik ervan te complementeren en niet de toegang ertoe te belemmeren wanneer deze technologie niet ondersteund wordt.
  • R-pd.2.9: Bouw een website volgens de Web Content Accessibility Guidelines (WCAG  1.0) van het W3C.
  • R-pd.8.6: Bij het gebruik van client-side script in combinatie met een link: indien de link nergens naartoe leidt, confronteer de bezoeker zonder ondersteuning voor client-side script dan niet met een niet-werkende link.
  • R-pd.8.7: Bij het gebruik van client-side script in combinatie met een link: indien noodzakelijk, gebruik client-side script als een uitbreiding op server-side functies.

Bijbehorende ijkpunten normdocument

  • IJkpunt 6.3: Zorg ervoor dat pagina's bruikbaar zijn, als scripts, applets of andere programma-objecten uitstaan of niet worden ondersteund. Als dit niet mogelijk is, lever dan equivalente informatie op een alternatieve toegankelijke pagina.