Als een afbeelding en een tekst allebei verwijzen naar dezelfde pagina, combineer ze dan tot één link

Soms wil je dat zowel een afbeelding als een tekst naar dezelfde pagina verwijzen. Bijvoorbeeld bij een nieuwsbericht met een titel en afbeelding, of bij een linktekst gecombineerd met een icoon. Gebruik dan niet twee aparte links, maar combineer ze.

Hoe pas ik dit toe?

Wees alert op situaties waarbij twee links naar dezelfde pagina direct naast elkaar staan. Dit kan bijvoorbeeld voorkomen bij navigatiemenu’s met een icoon vóór de linktekst, en bij nieuwsoverzichten die bestaan uit een afbeelding en een titel per nieuwsbericht. Pas de structuur van de HTML-code aan zodat er maar één link is (het <a>-element van HTML), waar zowel de afbeelding als de tekst in ‘gevat’ zijn. Let op: als je dit doet, zorg dan dat de afbeelding geen alt-tekst heeft, zodat voorleessoftware niet twee keer dezelfde tekst voorleest.

Voorbeelden

Link in navigatiemenu

Het navigatiemenu bevat per menu-item een icoon gecombineerd met een tekst. Beide staan in hetzelfde <a>-element en vormen dus één link. De afbeelding heeft geen alt-tekst (het alt-attribuut is leeg).

<a href="diensten"><img src="diensten.jpg" alt="" />Diensten</a>

Hoe draagt dit bij aan een betere website?

Doordat er geen dubbele links voorkomen wordt de website minder complex voor bezoekers met voorleessoftware, bovendien hoeven zij dan niet elke link twee keer te laten voorlezen. Bezoekers die het toetsenbord gebruiken hoeven niet twee keer op de tabtoets te drukken om naar de volgende link te springen.

Bouwer of redacteur?

In de meeste gevallen is de bouwer verantwoordelijk voor de structuur van de HTML, met name als het gaat om navigatiemenu’s en overzichten. Als een redacteur een afbeelding en tekst plaatst die naar dezelfde pagina moeten verwijzen, moet hij of zij erop letten maar één link toe te voegen waar beide elementen in gevat zijn.

Technische details

Hoort bij