Een klikbare kaart moet ook zonder muis duidelijk zijn

Een mooie kaart met een foto, titel en pijltje lijkt vanzelfsprekend klikbaar. Maar welke bestemming heeft ze? Kun je die zonder muis openen? En wat gebeurt er als er ook een bewaarknop op staat? Begin bij de eenvoudigste oplossing: een gewone link met een duidelijke naam. Breid het klikgebied pas uit wanneer dat de bediening echt helpt.

Maak navigatie herkenbaar als navigatie

Een HTML-link met een href heeft ingebouwd linkgedrag. Je kunt hem focussen en met Enter activeren. W3C adviseert daarom een native link in plaats van een ander element dat je met role="link" probeert na te bouwen. Alleen die rol toevoegen regelt de navigatie en het gebruikelijke browsergedrag niet. Een klikbare div is dus geen handige afkorting wanneer je eigenlijk een link nodig hebt.

Voor een eenvoudige projectkaart is de projecttitel een logisch vertrekpunt. Maak “Project Noord — modulaire beursstand” de link, plaats de korte omschrijving eronder en laat een eventuele pijl decoratief ondersteunen. Zo hoeft de bezoeker niet te raden wat een onbenoemd pictogram doet. Beeld, titel en “Lees meer” hoeven niet ieder een afzonderlijke tabstop naar precies dezelfde bestemming te vormen.

Een begrijpelijke naam, ook buiten het ontwerp

WCAG 2.4.4 vraagt dat het doel uit de linktekst of uit de linktekst met programmatisch bepaalbare context duidelijk wordt. “Lees meer” is dus niet in iedere situatie automatisch fout. Een betekenisvolle naam op zichzelf is vaak wel eenvoudiger te gebruiken, bijvoorbeeld wanneer iemand een lijst met links bekijkt. “Bekijk project Noord” vertelt meer dan zes keer hetzelfde “Lees meer”.

Laat zichtbare tekst en toegankelijke naam dezelfde bedoeling uitdrukken. Voeg niet zonder reden een lange verborgen zin toe die niets meer lijkt op het zichtbare label. In onze ontwerpbrief gebruiken we daarom de projecttitel als herkenbaar ankerpunt. De kaartbeschrijving geeft aanvullende informatie, maar hoeft niet volledig in de linknaam terecht te komen.

Een tweede actie vraagt een andere structuur

Een hele kaart als link kan bruikbaar zijn wanneer ze uitsluitend naar één bestemming verwijst. Plaats daar geen losse knop of tweede link in. Volgens het HTML-inhoudsmodel van een anchor zijn interactieve afstammelingen, een andere anchor en afstammelingen met tabindex niet toegestaan. Dat is een concreet argument om de structuur aan te passen, niet iets wat je met extra ARIA-labels oplost.

Heeft een kaart ook “Bewaren”, behandel dat dan als een zelfstandige actie naast de hoofdlink. Beide kunnen visueel in dezelfde kaart staan zonder dat de knop onderdeel van de link is. Maak de bedoeling expliciet: de titel opent het project, de knop bewaart het. Laat een ontwikkelaar een eventuele vergrote kliklaag zorgvuldig beoordelen; zo’n laag mag tekstselectie en de losse bediening niet onbedoeld afdekken.

Een fictief portfolio opnieuw ingericht

INVOER
Een portfolio toont Noord, Haven en Atelier. Iedere kaart heeft een gelinkte foto, een gelinkte titel, “Lees meer” en een bewaarknop binnen een overkoepelende link.

ONTWERPBESLUIT
Verwijder de overkoepelende link. Gebruik per kaart één titel-link en één zelfstandige bewaarknop. De foto hoeft niet nogmaals dezelfde bestemming aan te bieden. Geef de knop de projectspecifieke naam “Bewaar project Noord”.

VERWACHT RESULTAAT
De focusroute loopt per kaart langs de titel en daarna de bewaarknop. Enter op de titel opent het juiste project. De bewaarknop veroorzaakt geen navigatie. Dit is het gewenste gedrag voor implementatie en test, geen claim dat een bestaande website al zo werkt.

De afweging is bewust. Eén hoofdlink geeft rust, maar een secundaire actie blijft een extra bedieningspunt. Probeer dat niet weg te poetsen door de knop uit de toetsenbordvolgorde te halen. Als het bewaren belangrijk genoeg is om zichtbaar aan te bieden, moet de implementatie ook een bruikbare niet-muisroute hebben. Een ontwerp is pas af wanneer die route is beschreven.

Geef de ontwikkelaar een testbare opdracht

DOEL
Beoordeel mijn kaartcomponent op begrijpelijke navigatie en losse acties.

INVOER
Ik geef de markup, zichtbare labels en bedoelde bestemmingen.

CONTROLE
Inventariseer alle interactieve elementen en hun volgorde. Zoek geneste links of knoppen in links. Vergelijk zichtbare tekst en toegankelijke namen met het bedoelde doel. Geef een voorstel met native elementen en zo weinig mogelijk dubbele navigatie.

UITKOMST
Geef bevinding, voorgestelde wijziging en handmatige test per punt. Claim geen geslaagde toetsenbord- of schermlezertest zonder die daadwerkelijk uit te voeren.

Acceptatiecriteria vóór oplevering

• Tab en Shift+Tab volgen een begrijpelijke volgorde; je ziet steeds welk element focus heeft.
• Iedere hoofdlink heeft een herkenbare naam en opent het bedoelde project.
• De afzonderlijke actie werkt zonder de hoofdlink onbedoeld te activeren.
• Er staan geen links of knoppen genest binnen de hoofdlink.
• Gebruikelijke linkhandelingen, zoals openen in een nieuw tabblad, blijven beschikbaar.
• Controleer de linknamen met een schermlezer en test ook tekstselectie, aanraken en een smalle weergave.

Loop deze lijst op de echte component door, met de gebruikte browser en hulptechnologie genoteerd. Een visueel ontwerp of codecontrole bewijst de werking niet. Deze checks dekken bovendien niet alle toegankelijkheidseisen. Ze geven wel een concreet startpunt: een kaart waarvan bestemming, bediening en losse acties dezelfde heldere logica volgen.