Voorbeeld : skip links

Dit voorbeeld illustreert de blogpost Skip links die voor iedereen werken

Hier volgen twee links naar twee paragrafen die zich lager op de pagina bevinden:

Als men deze links gebruikt, hetzij met het toetsenbord hetzij met de muis, dan moeten er twee dingen gebeuren: de pagina scrollt zodat de paragraaf in kwestie verschijnt en de focus verplaatst zich naar deze paragraaf.

Als u Firefox gebruikt, gedragen deze twee links zich op dezelfde manier. Als u een andere browser gebruikt, gedraagt de eerste link zich niet zoals verwacht.

Om het verschil te zien, drukt u op de tabtoets tot u de link 'Naar het vervolg van voorbeeld (1)' bereikt en dan drukt u 'ENTER'. De pagina scrollt en de paragraaf 'Voorbeeld (vervolg 1)' verschijnt. Druk vervolgens nogmaals TAB waardoor u de link 'link' die zich in deze paragraaf bevindt zou moeten bereiken. In Firefox gebeurt dit inderdaad. In andere browsers keert u terug naar de link 'Naar het vervolg van voorbeeld (2)' die zich hierboven bevindt.

Als u Enter drukt op de link 'Naar het vervolg van voorbeeld (2)' scrollt de pagina en verschijnt de paragraaf 'Voorbeeld (vervolg 2)'. Ook verplaatst de focus zich naar het begin van deze paragraaf. De volgende TAB brengt u dus naar de eerste link van deze paragraaf ('andere link'). Dit is het verwachte gedrag.

Code

Wat is het verschil tussen de twee links? Dit is de code van de eerste link, die niet overal goed werkt:

<a href="#vervolg">Naar het vervolg van voorbeeld (1)</a>

De bestemming van de link is een titel van niveau 2 met id="vervolg":

<h2 id="vervolg">Voorbeeld (vervolg 1)</h2>

Wat hebben we gedaan om de tweede link zich zoals gewenst te laten gedragen?

Voeg een attribuut tabindex="-1" toe aan het element dat als bestemming dient voor de link:
```
<h2 id="vervolg" tabindex="-1">Voorbeeld (vervolg 2)</h2>
```
De waarde "-1" van het tabindex-attribuut zorgt ervoor dat het element (hier h2) niet voorkomt in de tabvolgorde, maar het wordt wel mogelijk om er de focus naartoe te brengen.

Het louter toevoegen van dit tabindex-attribuut volstaat voor Chrome, Opera, Internet Explorer en Safari (voor Mac), in elk geval voor hun recente versies.

Verwijs naar de Jquery bibliotheken en voeg een script toe dat de focus() functie gebruikt:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    // voeg een 'click handler' toe voor alle links
    // waarvan het doel zich bevindt op dezelfde pagina (href="#...")		
    $("a[href^='#']").click(function() {
      // vindt het attribuut href van de link,
      // en verwijder het eerste karakter (#)
      // wat de waarde geeft van het id-attribuut van het doel
      $("#"+$(this).attr("href").slice(1)+"")
        // geef de focus aan het element met dit id (voor die browsers die dit zelf niet doen)
        .focus();
    });
  });
</script>

Het toevoegen van Javascript is noodzakelijk om het te laten werken in Safari voor Windows.

Zie het zeer volledige artikel van Terril Thomson over skip links (in het Engels) waarin we deze techniek hebben gevonden. Hij beschrijft daarin ook technieken om de focus en de verplaatsing ervan te benadrukken.

Opmerking over screenreaders

Met JAWS en NVDA werken de links binnen een pagina standaard correct: de focus verplaatst zich naar de bestemming van de link. Het lezen gaat verder op deze plaats en als men op TAB drukt, is er ook geen probleem.
Met Voiceover stelt zich hetzelfde probleem voor de focus van het toetsenbord, maar de voorgestelde oplossing werkt ook hier.

Voorbeeld (vervolg 1)

Een beetje tekst met een link.

Voorbeeld (vervolg 2)

Een beetje tekst met een andere link.