Kennisbank succescriteria: 2.4.4 Linkdoel (in context)

2 van 2 kennisbank succescriteria: 2.4.4 linkdoel (in context)

  • In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Deze afbeeldingen moeten een tekstalternatief hebben.

    Dit zijn bijvoorbeeld:

    • Logo’s die worden gebruikt als link naar een website.
    • Social media iconen die worden gebruikt als link naar een kanaal.
    • Iconen met een scroll-naar-top functionaliteit.

    Voor afbeeldingen die ook als link worden gebruikt, is het belangrijk dat het tekstalternatief het doel van de link beschrijft. Het tekstalternatief is ook direct de linktekst. Zonder tekstalternatief heeft de link geen linktekst.

    Zo is “Scroll naar de bovenkant” een beter tekstalternatief dan “Pijl omhoog” als het gaat om een icoon met een scroll-naar-top functionaliteit.

    Een tekstalternatief voor een <​​​img​​>-element wordt gegeven met het alt-attribuut.

    In de code ziet dat er zo uit: 

    Sectie in thema: Afbeeldingen

    Sectie in doelgroep: Ontwikkelaar, Redacteur

    Sectie in succescriteria: 1.1.1 Niet-tekstuele content, 2.4.4 Linkdoel (in context), 2.5.3 Label in naam, 4.1.2 Naam, rol, waarde

  • Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

    Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

    Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

    In de code ziet dat er zo uit:

    Wat ook kan is het verbergen van een deel van de linktekst met CSS:

    Let op: Linkteksten die worden uitgebreid met behulp van CSS of het aria-label-attribuut zijn alleen zichtbaar voor bezoekers die gebruik maken van een schermlezer.

    Sectie in thema: Navigatie, Tekst

    Sectie in doelgroep: Ontwikkelaar, Redacteur

    Sectie in succescriteria: 2.4.4 Linkdoel (in context)