Skip links die voor iedereen werken

Bart Simons op 07/01/2014 - 6 reacties

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 link 'ga naar de inhoud' op een pagina van de AnySurfer-website

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:

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

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.

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.

Reacties

Jan! schreef 5 jaar geleden

Als ik de tweede voorbeeldlink volg (hetzij via de muis, hetzij via het toetsenbord) en daarna wil teruggaan (hetzij via de knop op de taakbalk, hetzij via sneltoetsen) kom ik niet terug uit bij de link. Dat vind ik zeer verwarrend.

Bij de eerste link werkt de terug-functionaliteit wel zoals ik verwacht.

(Getest in Firefox, Safari en Chromium op de Mac.)

Gijs Veyfeyken schreef 5 jaar geleden

@Jan!, bedankt om dit op te merken. De back-button werkt inderdaad niet meer zoals verwacht. Daar waren we niet van bewust. We gaan wat opzoekwerk doen om te kijken of we dit kunnen verhelpen. Suggesties zijn uiteraard welkom.

Bart De Clercq schreef 4 jaar geleden

@Jan!

We hebben dit ondertussen aangepast met hulp van de mensen van WebAIM. Zij hebben, na jouw vraag door te sturen, hun site aangepast.

Hierna hebben wij dit gedaan. Je kan in onze broncode kijken, voor het sluiten van de body tag staat het script.

Jan! schreef 4 jaar geleden

Gijs, Bart, bedankt voor de opvolging.

Het resultaat nu is nog altijd verwarrend: als ik nu terugga, wordt "#topnavcontent" gefocust. Zonder script is er helemaal geen probleem, en kom ik netjes uit op precies dezelfde plaats als voorheen. (Gemeten in pixels, "document.documentElement.scrollLeft" en "scrollTop".)

Is het niet nuttiger om het ongewenste gedrag van de browsers in kwestie aan te kaarten in plaats van JavaScript-workarounds te verzinnen? Zoals blijkt, brengen die weer nieuwe problemen mee. (Die ongetwijfeld op te lossen zijn, maar toch.) Oorzaken aanpakken in plaats van symptomen bestrijden, met het risico dat het vechten tegen de bierkaai vol windmolens is.

Gijs Veyfeyken schreef 4 jaar geleden

@Jan!, we zijn uiteraard ook voorstander van een oplossing bij de bron. Ik denk eerlijk gezegd dat dit probleem wel gekend is maar gewoon nog steeds niet is aangepakt. Ik zal eens kijken of ik een bug-rapport kan terugvinden en één indienen als dit nog niet gedocumenteerd is. Je mag gerust meezoeken :-)

Gijs Veyfeyken schreef 4 jaar geleden

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>