Terug naar Webrichtlijnen 1 - Overzicht van ijkpunten

IJkpunt 9.3 - Webrichtlijnen 1

Specificeer voor scripts liever logische event handlers dan apparaatafhankelijke event handlers.

Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.

Beschrijving

Een event handler roept een script op als een bepaalde event zich voordoet (bijv. de muis beweegt, een toets wordt ingedrukt, het document wordt geladen, enzovoort). In HTML 4.0 worden event handlers aan elementen gekoppeld via event handler attributen (dit zijn de attributen die beginnen met 'on', zoals in onkeyup).

Wat gebeurt er als het zich voordoen van een event afhangt van het script dat de ontwerper van de pagina heeft gemaakt. Sommige geven puur decoratieve effecten zoals het markeren van een afbeelding of het wijzigen van de kleur van de tekst van een element. Andere leiden tot concretere effecten, zoals het uitvoeren van een berekening, of het geven van informatie aan de gebruiker.

Voordelen

  • Belangrijke functionaliteit wordt niet afhankelijk van specifieke invoerapparatuur.

Criteria voor toetsing

  • Er zijn voor scripts logische event handlers opgegeven
  • Er zijn geen apparaatafhankelijke event handlers gebruikt voor scripts.
  • (Als deze toch zijn gebruikt) zijn er ook logische event handlers opgegeven.

Voorbeelden

Voorbeeld 1

Gebruik event triggers op applicatieniveau in plaats van triggers op niveau van gebruikersinteractie. In HTML 4.0 (en xhtml 1.0) zijn onfocus, onblur (het tegenovergestelde van onfocus) en onselect event attributen op applicatieniveau. Let op dat deze attributen zijn ontworpen als apparaatonafhankelijk, maar dat ze als toetsenbordspecifieke events in huidige browsers worden geïmplementeerd. Lever anders, als u toch apparaatafhankelijke attributen moet gebruiken, meer invoermechanismen (d.w.z. geef twee handlers op voor hetzelfde element):

  • Gebruik onmousedown met onkeydown
  • Gebruik onmouseup met onkeyup
  • Gebruik onclick met onkeypress

* Let op dat er in HTML 4.0 geen toetsenbordequivalent is voor dubbelklikken (ondblclick).

Voorbeeld 2

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. function display_spiek() {
  4. document.getElementById("spiek").src = "spiekbrief.jpg";
  5. document.getElementById("spiek").alt = "Spiekbrief: 1 = A, 2 = C, 3 = B";
  6. }
  7. function hide_spiek() {
  8. document.getElementById("spiek").src = "verborgen.jpg";
  9. document.getElementById("spiek").alt = "Verborgen spiekbrief";
  10. }
  11. // ]]>
  12. </script>
  13. <span tabindex="0" onfocus="display_spiek()" onblur="hide_spiek()"
  14. onmouseover="display_spiek()" onmouseout="hide_spiek()">Spiek hier!</span>
  15. <img src="verborgen.jpg" alt="Verborgen spiekbrief" id="spiek" />

Het is belangrijk dat webpagina's ook werken voor toetsenbordgebruikers. Dit kan worden berijkt door waar nodig elementen tabbaar te maken. Dit is geen probleem voor links of formulierelementen. Echter in het voorbeeld wordt een span element gebruikt. Geef deze het tabindex attribuut mee om het berijkbaar te maken voor het toetsenbord. De onfocus en onblur event handlers zijn apparaat onafhankelijk en kunnen ondermeer met het toetsenbord gebruikt worden.

Een uitzondering voor deze regel is het onclick attribuut. Alle browsers zijn inmiddels zo gemaakt dat onclick ook met het toetsenbord geactiveerd kan worden.

Meer informatie over het gebruik van scripts is te vinden in ijkpunt 6.2 en ijkpunt 6.3.

Definities

Logische event handlers

  • Event handlers die niet afhankelijk zijn van apparaten voor interactie. Voorbeelden zijn @onblur, @onchange, @onfocus, @onload, @onreset, @onselect, @onsubmit, @onunload, etc

Apparaatafhankelijke event handler

  • Voorbeelden zijn: @onclick, @ondblclick, @onkeydown, @onkeypress, @onkeyup, @onmousedown, @onmousemove, @onmouseout, @onmouseover, @onmouseup

Verwijzingen

  • 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.
  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn
  • Delen op Google+