Hoe maak je een goede link?

Een link zoals lees meer of een link om een heel content blok heen komt nog verrassend vaak voor. In dit artikel laat ik je zien hoe je dit op een goede manier kunt oplossen volgens de W​C​A​G richtlijnen, zonder afbreuk te doen aan je design.

Sommige gebruikers navigeren een website op basis van een lijst aan links van een pagina. Dit komt met name voor bij gebruikers van voorlees software. Als je alleen maar een lijst aan links met klik hier hebt zegt dit natuurlijk niks over de bestemming.

Ook een link om een blok met content heen is geen goed idee. Alle content wordt dan opgenomen als link tekst wat natuurlijk ook niet wenselijk is.

Eigenlijk is deze heel eenvoudig. De tekst van een link moet verwoorden waar iemand terecht komt. Laten we in dit artikel het voorbeeld nemen dat we een link willen maken die naar een pagina die over web toegankelijkheid gaat. Een goede link tekst naar deze pagina zou dan zijn: over web toegankelijkheid.

De tekst van een link moet verwoorden waar iemand terecht komt

Tekst alleen aan voorlees software tonen

Wil je een korte link tekst zoals lees meer tonen op de voorkant van je website, maar de link wel omschrijvend genoeg maken voor voorlees software? Dan is is dit zeker mogelijk. Met C​S​S en H​T​M​L kunnen we een gedeelte van de tekst verbergen op de voorkant van de website, maar nog wel beschikbaar houden voor voorlees software.

De C​S​S

Gebruik je net als ik een C​S​S framework? Dan zit hier vaak al een class in die teksten alleen aan voorlees software toont. Op deze website gebruik ik Tailwind. Tailwind komt standaard met de sr-only class.

Schrijf je je eigen C​S​S? Gebruik dan onderstaande C​S​S om een element te tonen op voorlees software, maar te verbergen op de voorkant van je website.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

De H​T​M​L

Om met bovenstaande code een goede link te maken kun je de volgende H​T​M​L gebruiken. 
<a href="over-web-toegankelijkheid.html">
    Meer weten<span class="sr-only"> over web toegankelijkheid</span>
</a>

Het resultaat

Bekijk de Pen Screen reader only text door Rogier (@ikmaakt) op CodePen.

Volledig blok inhoud aanklikbaar maken

Wil je een volledig blok met inhoud aanklikbaar maken zoals bijvoorbeeld een nieuwsbericht in een overzicht? Gebruik dan niet een anchor element (<a>) die je om een heel blok plaatst. De gehele content binnen dit element zal dan namelijk als link tekst worden gebruikt.

Zorg er voor dat je nog steeds een omschrijvende link gebruikt binnen een blok en zorg er voor dat het klikbare gedeelte van deze link het hele blok bedekt. Dit kan op verschillende manieren door bijvoorbeeld de hele link met een position: absolute over een blok te plaatsen.

Pseudo element

Mijn favoriet om een heel blok aan content aanklikbaar te maken is het gebruik van een ::before of ::after pseudo element.

Het principe is dat je het gebied wat je aanklikbaar wilt hebben een position: relative geeft. De ::before of ::after van het <a> element binnen dit gebied postioneer je met position: absolute over het gehele blok. Zo behoud de link de omschrijvende tekst en is het volledige blok aanklikbaar.

Bekijk de Pen Pseudo element to make full block clickable door Rogier (@ikmaakt) op CodePen.

Scroll naar boven