19. Hyperlinks: verbindingen leggen

19.1 Korte geschiedenis van de hyperlink (mag je overslaan hoor)

Het World Wide Web is in 1989 'uitgevonden' door Tim Berners-Lee. In feite koppelde hij 2 systemen aan elkaar:

• Het internet, namelijk het netwerk van computers die op afstand met elkaar konden communiceren.
• Het systeem van hyperlinken, namelijk dat je aan een stukje tekst een link kon koppelen naar een ander stukje tekst.

Het internet bestond al sinds de jaren 60. Ook het idee van hyperlinks bestond al heel lang. In 1945 schreef Vannevar Bush het verhaal 'As We May Think'. Daarin beschreef hij een systeem, Memex, waarin informatie aan elkaar gekoppeld was. Het is in deze tijd wel interessant wat hij aan ideeën hierover opperde. Enkele citaten uit zijn artikel.

"When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass. It can be in only one place, unless duplicates are used; one has to have rules as to which path will locate it, and the rules are cumbersome."

Gegevens zijn verzameld in logische categorieën. Zo werkte het tot in de jaren '80, toen we kennis nog steeds uit encyclopedieën haalden.

Maar Vannevar concludeerde al dat die methode van gegevens ordenen niet past bij hoe ons brein werkt:

"The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain."

Hij stelde zich een apparaat voor, dat hij Memex noemde, waarbij je via 'links' informatie die gerelateerd was, aan elkaar kon koppelen. Dit was in 1945!

"Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client's interest. The physician, puzzled by a patient's reactions, strikes the trail established in studying an earlier similar case, and runs rapidly through analogous case histories, with side references to the classics for the pertinent anatomy and histology."

Vannevar beschrijft dus eigenlijk het internet zoals wij dat nu kennen!

In 1965 verwoordde Ted Nelson dit principe met de term 'hyperlink', hierbij verwijzend naar de Memex van Vannevar Bush.

De term internet stamt ook uit de jaren '60. Er bestonden al computers, maar men wilde een systeem dat bleef werken als de hoofdcomputer door bijvoorbeeld een vijandige aanval zou worden uitgeschakeld. Men wilde een systeem van verschillende computers die onafhankelijk van elkaar konden doorwerken. Een van die systemen die ontwikkeld werd, was Arpanet, een systeem ontwikkeld door het Amerikaanse leger. Zo ontstond het internet.

Tim Berners-Lee koppelde dus de beide systemen – internet en hyperlinken – aan elkaar, en noemde dit het World Wide Web (www). Tegenwoordig noemen we het world wide web weer gewoon het internet.

19.2 Verbindingen maken

Wat we doen met links is het verbinden van content aan elkaar. Niets anders dan het oorspronkelijke idee van Vannevar. Een link hoort volgens Vannevar te staan op de plek waarbij de lezer de associatie heeft. Dus geen links onderaan een tekst, maar gewoon in de lopende tekst.

Veel sites hebben nog veel te leren van dit hele oude idee. Sommige sites zijn nog opgebouwd als 'categorieën', opgeslagen in een grote bak met gegevens, die los van elkaar bestaan. Een goede website koppelt de informatie aan elkaar, door te linken tussen de verschillende pagina's op de site zelf en te linken naar pagina's op andere sites. Een website denkt dus niet in categorieën, maar in associatie.

Het redactieproces is meestal niet ingesteld op verbindingen maken. Vaak is een redacteur enkel met een tekst bezig. En te weinig met het doel van de tekst, met de wijze waarop de lezer associeert en links verwacht naar gerelateerde content.

Verbindingen maken in je content is een van de belangrijkste taken van jou als webredacteur.

19.3 Soorten links

Er zijn verschillende soorten links, die elk zijn eigen richtlijnen kent:

1. Link op een tekst versus een afbeelding
2. Link naar een webpagina versus naar iets anders, namelijk een bestand of e-mailadres
3. Link binnen een pagina (ankerlink), naar een andere pagina op de site (interne link) of naar een andere site (externe link).

In dit hoofdstuk bespreken we deze soorten links.

19.4 Kenmerken van een goede linktekst

• De linktekst is betekenisvol.
  De tekst geeft een goed idee van de inhoud waar de link naartoe linkt.
• De linktekst is kort.
  Een link is makkelijk scanbaar.
• De link is op de plek waar de lezer is.
  Bespreek je iets, plaats dan gelijk de link op de plek waar je het bespreekt. Dat is dus in de lopende tekst. Zet links niet buiten de context, bijvoorbeeld door ze onder de tekst te plaatsen.

19.5 Betekenisvolle linktekst

Een linktekst is betekenisvol en begrijpelijk. Dat is belangrijk voor zowel de scannende lezer als voor mensen die blind zijn en de tekst opgelezen krijgen (of in braille uitgevoerd).

Bekijk onderstaand voorbeeld eens: steeds is het woord 'website' gelinkt. Gebruikers van screenreaders krijgen bij het bekijken van de links alleen maar te horen 'website website website website'.

Deze links in deze tekst zijn wel eenvoudig toegankelijk en betekenisvol te maken:

Voorbeeld herschrijven link

Als voorbeeld onderstaande tekst:

De laatste zin is onnodig, de link kan al in de tekst zelf geplaatst worden:

19.6 Maak de linktekst kort

Een linktekst is bij voorkeur kort, alhoewel de link nog wel betekenisvol moet zijn.

Gebruikers van een screenreader vragen vaak een linklijst op, een lijst met alle links op een pagina op om zo de pagina snel te scannen. Voor hen is een korte linktekst fijn.

Ook voor Google zijn linkteksten belangrijk (geven extra waarde aan de pagina waarnaar toe gelinkt wordt). Een linktekst die kort is, maakt het Google makkelijker om de juiste betekenisvolle woorden te koppelen aan deze pagina.

19.7 Plaats de link op de plek waar de lezer is

In het voorbeeld hieronder staan de links onder de tekst, terwijl het voor de lezer makkelijker is als de links direct in de tekst staan.

De herschreven versie:

19.8 Geen link? Niet onderstrepen.

Een tekst die onderstreept is, is een link. Dat verwachten mensen die een onderstreepte tekst zien.

Onderstreep dus geen tekst als het geen link is.

19.9 Links naar externe sites, bestanden en e-mailadressen

Externe sites

Een link naar een externe site wordt vaak aangegeven met zo'n icoontje, zie afbeelding hieronder. Maar dat hoeft niet meer. Voor de bezoeker van je site maakt het niet uit of de link intern of extern is. Ook hoef je het webadres niet te laten zien.

Hieronder een voorbeeld zoals het niet moet:

De herschreven versie ziet er zo uit:

Linken naar bestanden

Meld in de link naar een bestand altijd het formaat (bijvoorbeeld pdf) en de grootte.

Als je linkt naar bijvoorbeeld een pdf-bestand, dan opent de browser een pdf-reader in de browser of buiten de browser. In beide gevallen is het een andere lay-out dan de browser en dit kan verwarrend zijn. Vandaar dat je altijd duidelijk laat zien - in de linktekst - dat je linkt naar een bestand. Het openen van een bestand in een nieuw venster mag wel (zie ook verder).

Ook is de grootte van belang. Als bezoeker wil je wel voor je klikt weten of het een bestand van 20 MB ... Meld daarom ook in de linktekst de grootte van het bestand.

Niet goed zijn de volgende links (gaan allemaal naar pdf-bestanden):

In het voorbeeld hieronder gaat het wel goed: het formaat pdf en de grootte van het bestand staan vermeld in de linktekst.

Links naar e-mailadressen

Laat altijd het mailadres zien in de link, dan is het voor de bezoeker geen verrassing dat hij naar zijn e-mailprogramma gaat.

19.10 Links op de pagina zelf: ankerlinks

Dit e-book bevat bovenaan een inhoudsopgave van de pagina. Deze inhoudsopgave bestaat uit ankerlinks; klikken op een link brengt je bij content op dezelfde pagina. Een inhoudsopgave is handig als je een lange pagina hebt. Zo kun je bezoekers een indruk geven van de inhoud van de pagina en maak je het navigeren makkelijker.

Belangrijk is dat de inhoudsopgave er ook echt zo uitziet. In onderstaand voorbeeld is dat niet zo. De links rechts van de afbeelding zijn interne links, maar qua opmaak zouden het net zo goed links naar andere pagina's kunnen zijn.

Zet er een kopje 'Inhoudsopgave' of 'Inhoud' bij, zodat duidelijk is dat het een intern menu is.

Je kunt ook vanaf een andere pagina direct verwijzen naar een ankerlink. Zo link je naar een specifieke plek op de pagina. Dat lijkt handig, maar dat is het zeker niet altijd. Het kan verwarrend zijn voor de bezoeker dat hij bij het klikken op een link midden op een pagina komt, zonder menu of header in beeld die duidelijk maakt waar hij is.

19.11 Open geen nieuwe vensters (tenzij ...)

De discussie wel/niet openen in een nieuw venster sleept zich al een paar jaren voort.

Het is beter om links niet in een nieuwe venster of tab te openen:

• Uit principe niet. Jouw bezoeker bepaalt zelf hoe hij de link wil openen, niet jij als afzender. Dat is een elementair uitgangspunt op het web: de gebruiker bepaalt hoe hij de content ziet en gebruikt, niet jij als afzender.
• Het is niet gebruiksvriendelijk. Als jouw link in een nieuw venster/tab is geopend en de gebruiker wil weer terug, dan zal hij vaak de terugknop van de browser gebruiken. Maar die werkt dan niet meer. Breaking the back-button is een van de hoofdzonden in gebruiksvriendelijkheid.
• Het is niet handig voor gebruikers van schermlezers en vergrotingssoftware. Zij zien vaak niet dat een nieuw venster/tab geopend is.

Nog aan het twijfelen of zoek je nog goede argumenten om je collega's te overtuigen? Lees dan dit artikel: Link Targets and 3.2.5

Soms kan het wel een goede keuze zijn om een link in een nieuw venster/tab te openen:

• links naar downloads, zoals pdf-bestanden
• links in een proces dat niet onderbroken mag worden, zoals de algemene voorwaarden in een formulier

Open je een link in een nieuwe tab of venster: voeg dan altijd het attribuut rel="noopener" toe. Via JavaScript kan een kwaadwillende via de nieuwe tab toegang krijgen tot de verwijzende pagina. Dit gebeurt via zogenaamde XSS scripting (zoals cross-site scripting).

Vraag je webbouwer om dit automatisch toe te voegen als je kiest om een link in een nieuw venster te openen.

In de code ziet dat er zo uit:

<a href="URL" target="_blank" rel="noopener">voorwaarden.pdf (pdf, 12 MB)<a>

19.12 Aanklikbare afbeeldingen

Banners, social-media-icoontjes of advertenties zijn vaak aanklikbare afbeeldingen. Voor zowel zoekmachines als blinde gebruikers is het belangrijk dat duidelijk is waar de link naartoe gaat. Voeg daarom een betekenisvolle alt-tekst toe, die aangeeft wat de bestemming van de afbeelding is.

Bijvoorbeeld een Facebook-icon:

De juiste bijbehorende code is:

Je hoeft niet in de alt-tekst 'link naar' op te nemen, in screenreaders wordt dit bij een link al automatisch opgelezen.

Een title-attribuut gebruik je niet. Een title-attribuut bij afbeeldingen en links is nooit nodig. Dus deze code is NIET goed:

19.13 Skiplink: dé link voor gebruikers die navigeren met het toetsenbord

Speciaal voor mensen die navigeren met het toetsenbord, zoals blinden, is er de skiplink. Zo'n skiplink is niet direct zichtbaar en wordt pas zichtbaar bij het tabben door de site.

Eerst iets over hoe mensen navigeren zonder muis. Er zijn mensen die niet met de muis kunnen of willen navigeren, zoals blinden en mensen met problemen met het gebruik van de muis. Zij navigeren met het toetsenbord. Zij gebruiken de tab-toets. Met 'TAB' spring je naar de volgende link op de pagina, met Shift-TAB naar de vorige. De link waar de TAB op staat krijgt een kader, de zogenaamde 'focus rectangle'.

Een skiplink is een verborgen link. Deze link linkt naar de hoofdinhoud van je pagina en helpt zo om het menu en header over te slaan (vandaar 'skip'). Je ziet hem niet als je de website bekijkt, maar bij het tabben wordt deze wel zichtbaar.

Voor mensen die navigeren met het toetsenbord is deze link heel handig. En het toevoegen van de link is voor de webbouwer heel makkelijk. Dus: altijd gebruiken!

19.14 Vormgeving linktekst

Het is ook belangrijk dat de link die opgenomen is in een lopende tekst visueel goed te onderscheiden is van andere content.

De regels hiervoor zijn:

• Voldoende contrast tussen de link en de omringende tekst
  De kleur van de linktekst is duidelijk anders dan de gewone tekst. Uitgedrukt in technische termen: de linktekst heeft een contrastwaarde van minimaal 3,0 met gewone tekst. (WCAG-eis)
• Linkkleur is anders dan de kleur van koppen
• Link wijkt af in vorm van omringende tekst
  De link heeft ook een afwijkende vorm, meestal doordat deze onderstreept is, want dan zien mensen dat het een link is. Die onderstreping mag ook alleen bij mouse-over.