Skip links die voor iedereen werken

Update op 22 september 2016 : het probleem is nu opgelost in de meeste browsers maar bestaat nog in Edge en IE11.

Links binnen een pagina werken niet in alle browsers zoals verwacht. We hebben het over links van het type <a href="#inhoud">Ga naar de inhoud</a> die we bijvoorbeeld gebruiken als skip link.

Skip links zijn nuttig voor personen die zonder muis surfen omdat ze toelaten direct naar de inhoud te gaan. Zonder skip link moet men eerst alle links van de navigatie doorlopen met de tabtoets van het toetsenbord, voordat men de inhoudelijke links bereikt.

Links binnen een pagina worden ook gebruikt om een inhoudsopgave te maken op een wat langere pagina (zoals deze handleiding over de toegankelijkheid van Word-documenten), of in mini-sites waar alle inhoud zich bevindt op één lange pagina. Dit Nielsen Norman Group artikel gaat uitgebreid in op de afwegingen om al dan niet zulke "binnen pagina links" te gebruiken.

Dit soort links is het meest nuttig voor toetsenbordgebruikers (zonder muis). Helaas is het ook voor deze gebruikers dat deze links niet altijd werken. Gelukkig is de oplossing niet moeilijk.

In dit voorbeeld staan twee links naar twee paragrafen die zich lager op de pagina bevinden:

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

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"><code class="language-markup">Voorbeeld (vervolg 1)

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"><code class="language-markup">Voorbeeld (vervolg 2)

  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.

Conclusie

Links binnen een pagina werken niet altijd correct met het toetsenbord. Om ze overal te laten werken moet u het attribuut tabindex="-1" gebruiken op de bestemming van de link, en een beetje Javascript toevoegen. Dit is heel belangrijk voor wie zonder muis surft. Denk hier dus aan als u een inhoudsopgave of skip links maakt.