Belgisch kwaliteitslabel voor toegankelijke websites. AnySurfer vervangt BlindSurfer sinds 1 juli 2006.

Zorg ervoor dat alle hyperlinks bereikbaar en activeerbaar zijn met het toetsenbord.

Zelf controleren

Leg de muis aan de kant en probeer of u alle hyperlinks kunt bereiken met de Tabtoets. Houd de Shifttoets ingedrukt terwijl u op Tab drukt om een stap terug te keren. Met de Entertoets activeert u een hyperlink. Wees extra aandachtig bij het testen van de bereikbaarheid van hyperlinks in uitklapmenu's en snelmenu's.

Uitklapmenu's

Het ijkpunt Hypertekst is semantisch gestructureerd verplicht het gebruik van geneste ul tags voor lijsten met meer dan 1 niveau. Dit ijkpunt is ook op uitklapmenu's van toepassing. Als u CSS gebruikt om subniveaus te verbergen in zo'n uitklapmenu, is het vaak niet mogelijk om links in die subniveaus te bereiken met de tabtoets. Dat lost u op door:

• een optioneel stijlblad te voorzien dat alle subniveaus tegelijk weergeeft, zoals in een sitemap. In dit ijkpunt over CSS leest u hoe u zo'n optioneel stijlblad aanbiedt met behulp van een CSS switcher.
• of door de onbereikbare items uit de subnavigatie te herhalen op een onderliggende pagina die wel met het toetsenbord is te activeren. Een voorbeeld vindt u op de website van de Provincie Oost-Vlaanderen.

Snelmenu's

Keuzelijsten met een JavaScript onChange event (zoals in onderstaand voorbeeld) zijn problematisch voor wie met het toetsenbord navigeert. De actie die aan het event gekoppeld is (het laden van een nieuwe pagina), wordt in de meeste browsers al bij de eerste toetsaanslag uitgevoerd (vanaf het ogenblik dat de keuzelijst focus krijgt). Hierdoor is het niet mogelijk om de volledige lijst te doorlopen met de pijltjestoetsen.

Als u hyperlinks in een keuzelijst plaatst, voeg dan steeds een knop toe om de keuze te bevestigen.

Opmerking: in sommige programma's om webpagina's te maken worden snelmenu's "quick menus" of "jump menus" genoemd.

Voorbeeld: taalkeuze

Niet goed

<p><select onchange="parent.location=this.value">
  <option value="">Kies uw taal</option>
  <option value="index_nl.html">Nederlands</option>
  <option value="index_fr.html">Frans</option> 
  <option value="index_en.html">Engels</option>
</select></p>

Goed

<p><select>
  <option value="">Kies uw taal</option>
  <option value="index_nl.html">Nederlands</option>
  <option value="index_fr.html">Frans</option>
  <option value="index_en.html">Engels</option>
</select></p>
<p><input type="submit" value="Kies" /> </p>

Andere aandachtspunten

• Gebruikt u grafische hyperlinks, lees dan ook de richtlijnen over afbeeldingen en grafische tekstdelen.
• Als hyperlinks geactiveerd worden met behulp van JavaScript, gebruik dan uitsluitend apparaatonafhankelijke event handlers. Lees hiervoor ook de richtlijn over JavaScript.
• Het komt wel eens voor dat een Flash-object de linkfocus blijvend opeist. Dat merkt u als het herhaaldelijk op de tabtoets drukken uitsluitend nog hyperlinks binnen het Flash-object doet oplichten, in een eindeloze lus. Het Flash-object kunt u dan enkel nog verlaten door met de muis elders in de pagina te klikken. Dit ongewenste gedrag kunt u meestal verhelpen door geen expliciete tabvolgorde te specifiëren voor hyperlinks die in Flash zijn gedefinieerd.
• Ook serverside image maps vallen onder dit ijkpunt. Het gebruik ervan vereist een manipulatie met de muis en daarom zijn ze niet toegestaan tenzij er een toegankelijk alternatief is voorzien.

Naar boven