Navigatie

De navigatie is een belangrijk onderdeel van een website. Door te zorgen dat alle bezoekers goed over een website kunnen navigeren, krijgen ze toegang tot alle beschikbare informatie.

Een gestructureerde en consequente paginaopbouw en skiplinks zorgen dat bezoekers zonder veel moeite over de pagina kunnen navigeren. Duidelijke links voorkomen verwarring.

  • Sommige bezoekers hebben moeite met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller. Bied daarom meer dan één manier om een pagina op een website te vinden. Bijvoorbeeld door ook een zoekfunctie aan te bieden, of pagina met een sitemap.

    Dit is niet nodig voor pagina’s die deel uitmaken van een proces, zoals een bestelproces.

  • Op veel websites staan blokken die op iedere pagina terugkomen. Bijvoorbeeld het logo, de navigatie, het zoekveld, enz. Bezoekers die gebruik maken van hulptechnologieën, zoals voorleessoftware of een brailleleesregel, en bezoekers die met het toetsenbord navigeren moeten, iedere keer als ze op een pagina komen, bovenaan de pagina beginnen. De inhoud wordt steeds volledig voorgelezen voordat zij uitkomen bij de inhoud op de pagina. Het navigeren duurt zo erg lang. Zorg daarom dat bezoekers herhalende blokken kunnen overslaan. Bijvoorbeeld door bovenaan elke pagina een skiplink toe te voegen die direct naar de hoofdinhoud verwijst, of door een skiplink toe te voegen van het begin van een blok met herhalende inhoud naar het einde van het blok.

    Dit kan op twee manieren worden opgelost:

    1. Voeg skiplinks toe.
    2. Groepeer onderdelen in de code.

    Herhalende blokken overslaan kan met skiplinks. Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee geef je bezoekers de mogelijkheid om sneller bij de inhoud te komen. Skiplinks zijn doorgaans niet zichtbaar, maar worden ze pas zichtbaar als er met het toetsenbord door de pagina wordt genavigeerd.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Skiplinks horen het eerste element op een pagina te zijn. Zet ze dus bovenaan in de code en gebruik het op iedere pagina waarop herhalende blokken staan.

    Groepeer onderdelen in de code

    Herhalende blokken overslaan kan ook door deze onderdelen te groeperen in de code. Hiervoor bestaan meerdere technieken. Door deze onderdelen te groeperen kunnen bezoekers die gebruik maken van hulptechnologieën gemakkelijk over de pagina navigeren. Deze bezoekers kunnen bijvoorbeeld een lijst van alle koppen gebruiken of direct naar een oriëntatiepunt navigeren.

    • Gebruik een kop-element aan het begin van alle blokken op een pagina.
    • Gebruik ARIA landmark-elementen zoals <header>, <main> en <footer> maar ook bijvoorbeeld de navigatie en de zoekfunctie.

    Dit moet wel op iedere pagina op dezelfde manier toegepast worden.

    Let op: Dit is een effectieve manier om blokken met content over te slaan voor bezoekers die gebruik maken van hulptechnologieën. Bezoekers die over de pagina navigeren met alleen het toetsenbord kunnen hier geen voordeel uit halen.

    Zorg ook dat alle <iframe>-elementen een naam hebben zodat ze gemakkelijk overgeslagen kunnen worden. Gebruik hiervoor het title-attribuut.

  • Door een goede paginatitel te gebruiken kunnen bezoekers gemakkelijk een pagina terugvinden. De titel van een pagina wordt getoond in het venster van de browser of in het tabblad van de pagina. Voor bezoekers die gebruik maken van hulptechnologieën is een duidelijke en beschrijvende titel ook belangrijk. Deze informatie wordt aan hen als eerste gepresenteerd bij het openen van een pagina. Met een paginatitel die het onderwerp of doel van de pagina beschrijft, kunnen zij zich snel oriënteren over de inhoud van de pagina.

    Houd een paginatitel altijd nuttig en zo beknopt als mogelijk. Een titel hoort uniek te zijn en te vernieuwen als de URL van de pagina verandert.

    De paginatitel kan vaak per pagina in het CMS ingesteld worden.

    Gebruik het title-element in de <head> in de code om de paginatitel in te stellen.

    In de code ziet dat er zo uit:

    				
    					
    				
    			
  • Voor de oriëntatie op een pagina is het prettig om de vaste pagina-onderdelen telkens in dezelfde volgorde te tonen. Dit helpt alle bezoekers met het navigeren over de website en het vinden van informatie op een pagina. Het is belangrijk voor de toegankelijkheid van de website dat deze volgorde niet alleen in de vormgeving hetzelfde blijft, maar ook in de broncode.

    Per pagina mogen wel onderdelen worden weggelaten of worden toegevoegd.

  • Schrijf een linktekst waaruit het doel van de link duidelijk is af te leiden. Linkteksten die duidelijk beschrijven waar ze naartoe verwijzen kunnen beter worden gebruikt door bezoekers die gebruik maken van hulptechnologieën zoals voorleessoftware of een brailleleesregel. Het helpt bezoekers om over de website te navigeren. Bezoekers die gebruik maken van hulptechnologieën kunnen een lijst van links op de pagina gebruiken.

    Een duidelijke link beschrijft nauwkeurig en zo beknopt mogelijk wat het doel is van de link. Wees daarom voorzichtig met links met de inhoud “klik hier” of “lees meer”. Zonder de omliggende tekst is het niet duidelijk waar de link naar verwijst. Een te lange linktekst is ook niet handig voor bezoekers die gebruik maken van hulptechnologieën.

    In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Geef afbeeldingen die ook een link zijn een tekstueel alternatief dat beschrijft waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei dezelfde link, dan is het beter om deze te combineren tot één link. Voor bezoekers die gebruik maken van hulptechnologieën kan het storend zijn als dezelfde link twee keer direct na elkaar voorkomt.

    Een link mag nooit leeg zijn. Een lege link is visueel misschien niet waar te nemen maar hulptechnologieën en toetsenbordnavigatie komen deze link wel tegen.

    Als het niet mogelijk is om een duidelijke linktekst te geven aan een link, dan zijn er nog een paar andere opties:

    • Zorg dat het doel van de link duidelijk wordt uit de direct omringende tekst van de link:
    				
    					
    				
    			
    • Gebruik CSS om een deel van de linktekst te verbergen:
    				
    					
    				
    			
    				
    					
    				
    			
    • Gebruik ARIA-attributen om het doel van de link te beschrijven:
    				
    					
    				
    			

    Als CSS wordt gebruikt om een deel van de linktekst te verbergen of als ARIA-attributen worden gebruikt om het doel van de link te beschrijven dan kunnen alleen bezoekers die gebruik maken van hulptechnologieën de hele linktekst waarnemen.

    Let op: De hele zichtbare tekst moet zijn opgenomen in de toegankelijke naam.

  • In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Dit kunnen afbeeldingen zijn die verwijzen naar een andere pagina of website, maar ook afbeeldingen die een actie op de pagina uitvoeren.

    Deze afbeeldingen moeten een tekstueel alternatief hebben dat het doel van de link beschrijft, of die beschrijft wat er gebeurd als op de afbeelding wordt geklikt. Voorleessoftware gebruikt het tekstuele alternatief namelijk als linktekst. Daarom is het belangrijker om het doel van de link te beschrijven, in plaats van wat er op de afbeelding te zien is.

    Als er ook tekst staat op een functionele afbeelding, dan moeten de tekst op de afbeelding én het doel van de link allebei in het tekstueel alternatief worden vermeld. Hierdoor kunnen bezoekers die met spraakherkenning werken de link ook makkelijk bereiken.

    Zo is ‘Ga naar Twitter.com’ een beter tekstueel alternatief dan ‘Kleine witte vogel op een lichtblauwe achtergrond’ als het gaat om een afbeelding die wordt gebruikt als link naar een Twitter.com.

    				
    					
    				
    			

E-mail ons

info@wcag.nl

Bel ons

085 - 80 81 814

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.1 Tekstalternatieven
      • 1.1.1 Niet-tekstuele content
  • Principe 2. Bedienbaar
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.1 Blokken omzeilen
      • 2.4.2 Paginatitel
      • 2.4.4 Linkdoel (in context)
      • 2.4.5 Meerdere manieren
    • Richtlijn 2.5 Input Modaliteiten
      • 2.5.3 Label in naam
  • Principe 3. Begrijpelijk
    • Richtlijn 3.2 Voorspelbaar
      • 3.2.3 Consistente navigatie
  • Principe 4. Robuust
    • Richtlijn 4.1 Compatibel
      • 4.1.2 Naam, rol, waarde