Succescriterium 2.4.4 Linkdoel (in context)

Niveau A

Lees de officiële tekst van succescriterium 2.4.4 Linkdoel (in context)

• De inhoudsopgave

  Word exporteert de inhoudsopgave op zichzelf goed: de titel krijgt een H1, de opgave een TOC-tag, elke regel een TOCI-tag en elke verwijzing een Link-tag. Twee dingen ontbreken.

  De links hebben geen alternatieve beschrijving. Klik met de rechtermuisknop op een Link-tag, kies Eigenschappen en vul op het tabblad Code een duidelijke beschrijving in. Herhaal dat voor elke link in de inhoudsopgave.

  Achter elke link staat een lege Span-tag. Die zijn in één keer weg te halen, maar pas nadat de lege inhoud erin is gemarkeerd:

  1. Klik met de rechtermuisknop op de lege inhoud en kies “Code wijzigen in artefact”. Doe dat voor elke lege Span.
  2. Vergeet het lege object in de laatste TOCI-tag niet, en de lege paragraaf daaronder.
  3. Selecteer daarna de Part-tag van de inhoudsopgave.
  4. Kies in het menu van de toegankelijkheidstags de optie “Lege codes verwijderen”.

  Die laatste stap werkt alleen op tags die écht leeg zijn. Staat er nog inhoud in die niet als artefact is gemarkeerd, dan blijft de tag staan.

  Thema’s

  PDF

  Doelgroepen

  Auditeur Documentmaker

  Wie het raakt

  Je bent blind Je ziet slecht

  Hulpmiddelen

  Schermlezer Voorleessoftware

  Open dit onderwerp op een eigen pagina

• Links

  Links worden bij de export uit Word vrijwel altijd goed overgenomen. Eén ding komt niet mee: de alternatieve beschrijving. Die vertelt de lezer waar de link naartoe gaat, en die moet je in Acrobat met de hand toevoegen.

  Ga als volgt te werk, per link:

  1. Zoek de Link-tag op in het zijpaneel Toegankelijkheidstags.
  2. Klik erop met de rechtermuisknop en kies Eigenschappen.
  3. Vul op het tabblad Code het veld “Alternatieve beschrijving voor koppelingen” in.
  4. Klik op Sluiten.

  Beschrijf het doel van de link en niet het adres. “Jaarverslag 2025, pdf” zegt iets; “https://voorbeeld.nl/jv25.pdf” wordt letter voor letter voorgelezen en zegt niets.

  Dit geldt voor alle links in het document, ook die in de inhoudsopgave en in de voetnoten.

  Thema’s

  PDF

  Doelgroepen

  Auditeur Documentmaker

  Wie het raakt

  Je bent blind Je ziet slecht

  Hulpmiddelen

  Schermlezer Voorleessoftware

  Open dit onderwerp op een eigen pagina

• Afbeelding als link

  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:

  <a href="categorie/spel.html">
    <img src="spel.jpg" alt="Ga naar de categorie spelletjes">
  </a>

  Thema’s

  Afbeeldingen

  Doelgroepen

  Auditeur Ontwikkelaar Redacteur

  Open dit onderwerp op een eigen pagina

• Linktekst

  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. Dit kan bijvoorbeeld door het verbergen van een deel van de linktekst met CSS.

  In de code zit dat er zo uit:

  <a href="info.html">Lees meer <span class="sr-only"> over digitale toegankelijkheid</span></a>

  .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
  }

  De linktekst kan eventueel in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

  In de code ziet dat er zo uit:

  <a href="info.html" aria-label="Lees meer over digitale toegankelijkheid">Lees meer</a>
  
  <a href="info.html" title="Lees meer over digitale toegankelijkheid">Lees meer</a>

  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.

  Thema’s

  Navigatie Tekst

  Doelgroepen

  Auditeur Documentmaker Ontwikkelaar Redacteur

  Wie het raakt

  Je leest moeilijk Nederlands

  Open dit onderwerp op een eigen pagina