13. Scripts en applets

Informatie icoon Uitleg

We bekijken hier één aspect van ijkpunt 6.3, namelijk of een webpagina bruikbaar is, als JavaScript uitstaat of niet wordt ondersteund.

Door middel van JavaScript is het mogelijk om webpagina's dynamischer, soms gebruiksvriendelijker en fraaier te maken. Denk bijvoorbeeld aan uitklapmenu's, controle van de invoer van formulieren of pop-up vensters. Soms wordt JavaScript ook gebruikt om extra content te tonen aan de gebruiker. Bijvoorbeeld als een bezoeker met de muis over een afbeelding gaat en er extra uitleg verschijnt binnen een door JavaScript gecreëerd kader. Zo zijn er vele mogelijkheden van JavaScript om informatie over te brengen of extra functionaliteit aan te bieden.

Voor mensen met een functiebeperking is het echter belangrijk dat de informatie en functionaliteit die geboden wordt door middel van JavaScript ook beschikbaar is als JavaScript niet ondersteund wordt of uitgezet is, of dat er een alternatief wordt geleverd die dezelfde informatie en functionaliteit aanbiedt. Sommige mensen met een functiebeperking maken namelijk gebruik van hulpsoftware (denk aan aangepaste browsers en screenreaders) die geen JavaScript-ondersteuning biedt.

Voorbeeld icoon Voorbeelden

Voorbeeld 1: Inhoud

Er zijn webpagina's die voor het tonen van de inhoud geheel of gedeeltelijk afhankelijk zijn van JavaScript. Zo komt het voor dat als JavaScript niet ondersteund wordt een lege pagina te zien is, terwijl in een browser met JavaScript ondersteuning alle informatie wel wordt getoond.
Het komt ook voor dat bepaalde delen van een webpagina blanco zijn, omdat daar bijvoorbeeld inhoud met behulp van JavaScript wordt gegenereerd. Denk bijvoorbeeld aan roterende banners, waarbij door middel van JavaScript één banner uit een verzameling banners wordt gekozen. Zonder JavaScript kan het dan zijn dat er helemaal geen banners te zien zijn.
Ook kan het hele navigatiemenu opgebouwd zijn met behulp van JavaScript. In dat geval kun je helemaal niet door de website navigeren als JavaScript niet ondersteund wordt.

Voor al deze gevallen kan een toegankelijke oplossing verzonnen worden, maar dat valt buiten het bereik van deze voorbeelden.

Hieronder staan twee screenshots. De eerste toont een webpagina zoals die getoond wordt met JavaScript-ondersteuning. De tweede afbeelding laat de pagina zien als JavaScript niet ondersteund wordt. U ziet dat er dan helemaal niets te zien is.

Screenshot: met JavaScript ondersteuning wordt alle informatie getoond
Screenshot: zonder JavaScript ondersteuning is de pagina leeg

Hieronder staan nog twee screenshots. De eerste toont een webpagina zoals die getoond wordt met JavaScript-ondersteuning. De tweede afbeelding laat de pagina zien als JavaScript niet ondersteund wordt. U ziet dat er dan delen van de inhoud wegvallen, die met rode kaders zijn aangegeven.

Screenshot: met JavaScript ondersteuning wordt alle informatie getoond
Screenshot: zonder JavaScript ondersteuning zijn delen van de pagina leeg en ontbreekt dus informatie

Voorbeeld 2: Formulieren

Op veel websites wordt JavaScript gebruikt bij formulieren. Het kan dan gebruikt worden om te controleren of alle verplichte informatie ook daadwerkelijk is ingevuld, of om de gegevens van het formulier te versturen. We concentreren ons hier op het laatste.

De gegevens van een formulier kunnen op verschillende manieren verstuurd worden. De standaard manier is om gebruik te maken van een submit-knop. Deze is onafhankelijk van JavaScript en werkt dus altijd. Maar, deze knop is vrij saai of misschien wel te groot. Daarom wordt vaak gekozen om geen submit-knop te gebruiken, maar een afbeelding die als link wordt gebruikt of een standaard link om de gegevens van het formulier te versturen. Het voordeel van de afbeelding is dat je er van kunt maken wat je wilt en het voordeel van de link is dat het bijvoorbeeld minder ruimte in beslag neemt. Er is alleen één probleem met deze oplossingen en dat is dat ze alleen werken als JavaScript ondersteund wordt.

Als er dus een formulier op een pagina staat en de gegevens worden verstuurd door op een link te klikken, dan weet u zeker dat het afhankelijk is van JavaScript. Als een afbeelding gebruikt wordt is de kans ook groot dat er JavaScript gebruikt is.

In de afbeelding hieronder is een voorbeeld te zien van een zoekformulier waarbij een afbeelding (driehoekje) gebruikt is het formulier te versturen. Deze afbeelding wordt als link gebruikt en is afhankelijk van JavaScript. Dit laatste is ook te zien in de statusbar (links onderin de afbeelding).

Screenshot: zoekformulier is afhankelijk van JavaScript

Voorbeeld 3: Menu's

Op steeds meer websites zijn zogenaamde uitklapmenu's te zien. Bij deze menu's zijn de hoofdmenu-items continu zichtbaar, en worden submenu-items getoond als met de muisaanwijzer over een hoofdmenu-item wordt gegaan. Als de muisaanwijzer van het hoofdmenu-item of een van de submenu-items afgaat, verdwijnt het submenu vervolgens weer. Zo'n uitklapmenu is afhankelijk van zowel style sheets (CSS) als van JavaScript om te functioneren. Als JavaScript dus niet ondersteund wordt of uitstaat, werken de uitklapmenu's niet. Er zal dan voor een alternatief moeten worden gezorgd, zodat bezoekers van de website toch naar de subonderdelen kunnen navigeren. Dit probleem kan onder andere worden opgelost als de hoofdmenu-items hyperlinks vormen naar pagina's waarop de links van het uitklapmenu getoond worden. Wordt er geen alternatief geboden, dan is de website dus niet toegankelijk.

Hieronder twee screenshots om bovenstaande te illustreren. In de eerste afbeelding is een webpagina te zien met een uitklapmenu waarbij JavaScript ondersteund wordt. In de tweede afbeelding is het alternatief te zien als JavaScript niet ondersteund worden. In dat geval werken de hoofdmenu-items namelijk als link naar een pagina waarin alle links van het uitklapmenu te vinden zijn. Op deze manier zijn toch alle onderdelen van het uitklapmenu bereikbaar.

Screenshot: pagina met uitklapmenu zichtbaar (JavaScript ondersteuning)

Screenshot: pagina met de links van het uitklapmenu (geen JavaScript ondersteuning)

Voorbeeld 4: Links

JavaScript kan ook in links gebruikt worden. Het script bepaalt dan naar welke pagina genavigeerd wordt. Of het script zorgt er voor dat de pagina in een nieuw venster wordt geopend. In beide gevallen werkt de link niet als JavaScript niet ondersteund wordt of uitstaat. Daarmee is de doelpagina van de link dus niet bereikbaar, tenzij er voor een alternatief wordt gezorgd wat wel werkt als JavaScript uitstaat.

Hieronder staat een screenshot van een deel van een pagina waar JavaScript gebruikt wordt in een link (zie ook de statusbar linksonder in de afbeelding). JavaScript zorgt er voor dat de doelpagina geladen wordt. Zonder JavaScript werkt deze link niet en is de doelpagina niet bereikbaar.

Screenshot: links die afhankelijk zijn van JavaScript

Testen met toolbar icoon Testen met de toolbar

Om te testen of alle informatie op een webpagina nog te lezen is en of alle functionaliteit nog werkt zonder JavaScript, zetten we eerst de ondersteuning voor JavaScript uit in de browser met behulp van de toolbar. Met tool '6a. JavaScript in- / uitschakelen' kunt u JavaScript aan- en uitzetten. Als het vinkje ervoor staat betekent het dat JavaScript aanstaat. Zorg er dus voor dat het vinkje er niet staat voordat u gaat testen.

Op het moment dat u JavaScript uitschakelt, wordt de pagina die open stond herladen. U ziet dus direct resultaat. Als u nog niet op de website bent die u wilt controleren, open dan een pagina van de website die u wilt controleren. Controleer vervolgens op verschillende pagina's of alle informatie nog leesbaar en alle functionaliteit nog bruikbaar is en of er voor een alternatief is gezorgd wat wel werkt.

Bekijk de volgende zaken op iedere pagina die u wilt controleren:

  • Ontbreekt er informatie op de pagina (zie voorbeeld 1)?;
  • Is het nog mogelijk om formulieren te versturen (zie voorbeeld 2)?;
  • Werken de menu's nog en zo nee, is er een alternatief (zie voorbeeld 3)?;
  • Werken alle links nog (zie voorbeeld 4)?.

Checklist icoon Checklist

Met behulp van bovenstaande opdrachten kunt u nu de vragen op de checklist beantwoorden. Als er informatie op de pagina ontbreekt beantwoordt u de eerste vraag met 'nee'. Mocht alle informatie nog te zien zijn, beantwoord u de vraag met 'ja'. Als u het moeilijk vindt om te bepalen of alle informatie nog aanwezig is, kunt u de vraag ook beantwoorden met 'weet niet'.

Als het niet mogelijk is om formulieren te versturen, beantwoordt u de tweede vraag met 'nee'. Als het wel mogelijk is om formulieren te versturen beantwoord u de vraag met 'ja'. Als er geen formulieren op de website staan die u aan het controleren bent, beantwoord u de vraag met 'niet van toepassing'. Vindt u deze vraag te moeilijk om te beantwoorden kunt u ook 'weet niet' invullen.

Als de menu's niet werken en als er niet voor een alternatief is gezorgd, beantwoordt u de derde vraag met 'nee'. Werken de menu's wel of is er wel voor een alternatief gezorgd, beantwoordt u de vraag met 'ja'. Mochten er geen uitklapmenu's gebruikt worden op de website dan kunt u de vraag beantwoorden met 'niet van toepassing'. Vindt u het moeilijk om deze vraag goed te kunnen beantwoorden kunt u 'weet niet' invullen.

Als er links zijn die afhankelijk zijn van JavaScript en dus niet werken, beantwoord dan de vierde vraag met 'nee'. Mochten alle links wel werken, beantwoordt dan de vraag met 'ja'. Mocht er geen JavaScript gebruikt zijn bij links, beantwoordt dan de vraag met 'niet van toepassing'. Mocht u het moeilijk vinden om deze vraag te beantwoorden vul dan 'weet niet' in.