Webpagina's gebruiken koppelingen om bezoekers naar nieuwe of aanvullende inhoud te sturen. Koppelingen kunnen in tekst en afbeeldingen zitten. Koppelingen zijn krachtige navigatietools en moeten op de juiste manier gestructureerd worden voor de beste ervaring.

De Web Content Accessibility-richtlijnen (WCAG) zijn specifieke vereisten om ervoor te zorgen dat inhoud voor iedereen toegankelijk is. Volgens de WCAG 2.2 AA-richtlijnen moeten koppelingen het doel van de koppeling vastleggen zodat bezoekers kunnen beslissen of ze de koppeling willen volgen. Koppelingen hebben waarneembare tekst nodig die bezoekers laat zien waar de koppeling ze naartoe stuurt.

Wat wordt er bedoeld met waarneembare?

Koppelingen bevatten meestal twee items:

  • URL: Webadres waar de bezoekers heen worden gestuurd wanneer ze de koppeling selecteren
  • Tekstweergave: Zichtbare tekst die bezoekers laat zien wat ze kunnen verwachten als ze de koppeling selecteren

Neem deze koppeling naar best practices als voorbeeld: Best practices voor koppelingen. In de HTML-broncode ziet de koppeling aanbevolen procedures er als volgt uit:<a href="#best-practices">Best practices for links</a>

Wanneer de tekstweergave, of de tekst tussen de <a> tags ontbreekt, mist de koppeling waarneembare tekst. Waarneembare tekst is de tekstweergave die het doel van de koppeling aan je bezoekers laat zien.

Het is een klein probleem als koppelingen geen waarneembare tekst hebben. Los kleine problemen op voor een betere ervaring. Als koppelingen tekst missen of er sprake is van vage tekst, kan het lastig worden om te navigeren en kan dit frustraties opleveren voor mensen met een beperking.

Hoe mensen met een beperking koppelingen gebruiken die naar de onderzijde van de pagina sturen

Met Ally kun je bepalen wanneer er koppelingen zijn met ontbrekende tekst, en wordt er uitgelegd hoe je deze kunt repareren. Ally doorloopt deze controles:

  • Is er tekst tussen de hyperlink <a> tags?
  • Is de tekst tussen de <a> tags verborgen?
  • Hebben afbeeldingen die als koppelingen worden gebruikt alternatieve beschrijvingen?

Als de koppeling niet door een van de controles heen komt, markeert Ally de koppeling als een probleem.

Gebruik Ally om koppelingen met ontbrekende tekst te vinden

Gebruik het Toegankelijkheidsrapport om toegankelijkheidsproblemen op je site te ontdekken en te herstellen. Gebruik de koppeling die voor het rapport is opgegeven en meld je aan. Open het rapport en bekijk de lijst met problemen in de tabel Toegankelijkheidsproblemen.

De tabel Toegankelijkheidsproblemen bevindt zich op de tabbladen Overzicht en Domein. Start op het tabblad Domein om problemen van een specifiek domein te bekijken.

Koppelingen zonder waarneembare tekst worden gemarkeerd als een klein probleem. Gebruik het tabblad Klein probleem in de tabel Toegankelijkheidsproblemen om de lijst met kleine problemen weer te geven. Selecteer de problemen met koppelingen zonder waarneembare tekst.

Als je begint op het tabblad Overzicht selecteer je het probleem en vervolgens het domein met het probleem.

Uit de lijst met problemen in het domein, selecteer je de score-indicator naast een item met het probleem. Het feedbackvenster van de inhoudseditor wordt geopend.

Geef een voorbeeld weer van de koppelingen met ontbrekende tekst

Het feedbackvenster van Ally geeft je een voorbeeld van de inhoud, gedetailleerde feedback en ondersteuning om je toegankelijkheidsproblemen op te lossen. Gebruik het voorbeeld om de koppelingen met ontbrekende tekst te zien.

In het voorbeeld worden markeringen weergegeven waar specifieke toegankelijkheidsproblemen in het document te vinden zijn. De markeringen geven één probleemtype per melding weer. Als er bijvoorbeeld problemen zijn met koppelingen met ontbrekende tekst wordt iedere instantie met dat specifieke probleem gemarkeerd in het voorbeeld.

Voorbeeldtools

Gebruik de voorbeeldtools om de problemen in je document te bekijken.

  • Navigeer per pagina door het voorbeeld.
  • Bekijk hoe vaak een specifiek probleem voorkomt.
  • Navigeer tussen de probleemmarkeringen.
  • Geef de markeringen weer of verberg ze.
  • Zoom de voorbeeldinhoud in of uit.
  • Als het probleem zich in een bijgevoegd document voordoet, download dan het oorspronkelijke bestand.

Volg de stappen van Ally om koppelingstekst toe te voegen

Ally gaat ervan uit dat je basiskennis hebt van HTML en van het gebruik van het Content Management System (CMS). Als je de stappen wilt volgen, moet je weten hoe je een webpagina in de HTML of broncode in je CMS kunt bewerken.

Naast het voorbeeld biedt Ally tevens stapsgewijze instructies over hoe je het probleem kunt oplossen. Ally organiseert deze feedback in een beslisboom. Lees de instructies en reageer op de vragen. Lees meer over het probleem, waarom het van belang is, en hoe je het kunt verhelpen.

Selecteer Problemen met koppelingstekst oplossen om de stappen te volgen.

Manieren om tekst aan koppelingen toe te voegen

Er zijn verschillende manieren om problemen met koppelingstekst op je webpagina's op te lossen.

  • HTML: In de stappen van Ally wordt uitgelegd hoe je koppelingstekst vindt en oplost in HTML. Het komt erop neer dat je de webpagina met de koppeling moet vinden. Bewerk de pagina. In de HTML-code voeg je tekst toe tussen de <a> tags. Sla de pagina op.
  • RTE: Sommige CMS’en hebben een Rich Text Editor (RTE) die je gebruikersvriendelijke manieren kan bieden voor het repareren van koppelingen. Zoek de koppeling op de webpagina. Selecteer de koppeling en gebruik de CMS-tools om tekst toe te voegen. Sla de pagina op.

Ga naar w3schools voor meer informatie over HTML en CSS

Best practices voor koppelingen

  • Koppelingstekst moet zinvol zijn. Vertel je bezoekers waar ze naar toe gaan. Beschrijf wat de gebruiker kan verwachten wanneer ze op de koppeling klikken.
    • Gebruik geen tekst zoals ‘klik hier’ en ‘zie meer’. Deze zinnen laten bezoekers niet zien wat ze kunnen verwachten wanneer ze de koppeling selecteren. Sommige ondersteunende technologieën hebben een tool die alleen de koppelingen op de pagina vermeldt. Dit soort zinnen hebben dan geen betekenis wanneer ze uit de context van de pagina worden gehaald en in een lijst worden weergegeven.
    • Gebruik geen URL's als zichtbare koppelingstekst. Een URL is mogelijk niet beschrijvend. Daarbij komt dat schermlezers elke letter van een URL lezen, wat frustrerend kan zijn voor die bezoekers.
  • Koppelingstekst moet uniek zijn. Elke koppeling moet uniek zijn ten opzichte van de andere koppelingen op de pagina. Als koppelingstekst herhaald wordt, kan dit verwarrend zijn wanneer de koppeling uit de context van de pagina wordt gehaald en wordt weergegeven in een lijst met koppelingen.
  • Koppelingen moeten visueel opvallen. Het moet duidelijk zijn dat het om een koppeling gaat. Als je de stijl van de koppeling niet mooi vindt, kun je de sjabloon bijwerken.

    • Maak onderscheid tussen koppelingen en omringende tekst op een manier die niet alleen van kleur afhankelijk is. WCAG 2.1 - 1.4.1

      Het uiterlijk van de koppeling wordt vaak gedefinieerd in de stijlgids van een site en kan een afspiegeling zijn van de huisstijl. Raadpleeg de stijlgids en beheerder van je site voordat je wijzigingen doorvoert.

  • Vertel het aan gebruikers als de koppeling in een nieuw venster wordt geopend. Het openen van koppelingen in een nieuw venster kan desoriënterend zijn. Vertel het aan gebruikers als ze naar een nieuw venster of tabblad gestuurd worden.
  • Gebruik geen afbeelding om iets aan te geven dat je in de HTML kunt maken. Gebruik bijvoorbeeld geen afbeelding van een knop in plaats van een werkelijke knop. Gebruik geen afbeelding van een tabel in plaats van een tabel die in de bron-HTML-code is gemaakt.

Hoe mensen met een beperking koppelingen gebruiken

Goede koppelingen die een koppeling en zinvolle koppelingstekst bevatten, zorgen voor een veel betere ervaring voor iedereen. Op de juiste manier samengestelde koppelingen zijn krachtige navigatietools en maken duidelijk wat van ze verwacht kan worden. Juiste koppelingen zijn echter essentieel voor bezoekers met een visuele beperking.

Koppelingen met een unieke en zinvolle tekst kunnen zorgen voor snelle navigatie voor veel gebruikers.

  • Gebruikers van een schermlezer hoeven niet naar de hele pagina te luisteren. In plaats daarvan kunnen ze naar een lijst met koppelingen luisteren en hiermee werken.
  • Gebruikers van spraakherkenning gebruiken koppelingen door hardop de koppeling te zeggen die ze willen selecteren.

Koppelingen die op de juiste manier zijn samengesteld, zijn voor veel gebruikers gemakkelijker te zien en te gebruiken.

  • Gebruikers die alleen toetsenborden hebben en mogelijk geen muis kunnen gebruiken, kunnen met hun toetsenbord naar elementen op de pagina navigeren, zoals koppelingen.
  • Gebruikers met kleurenblindheid zien mogelijk geen kleurvariatie, maar kunnen wel een onderstreepte koppeling zien.