{"id":11,"date":"2009-01-06T09:42:08","date_gmt":"2009-01-06T08:42:08","guid":{"rendered":"https:\/\/dev.frontaal.net\/?p=11"},"modified":"2019-08-29T18:33:47","modified_gmt":"2019-08-29T16:33:47","slug":"zes-tips-voor-gebruiksvriendelijke-links","status":"publish","type":"post","link":"https:\/\/dev.frontaal.net\/en\/200901\/zes-tips-voor-gebruiksvriendelijke-links\/","title":{"rendered":"Zes tips voor gebruiksvriendelijke links"},"content":{"rendered":"

Zonder links zou internet niet bestaan. Links zijn essentieel voor je website. Maar ook voor zoekmachines. En zeker voor bezoekers. En dan niet alleen links naar de website toe, maar ook links op de site zelf. Toch wordt er in de praktijk relatief weinig aandacht besteed aan de gebruiksvriendelijkheid en toegankelijkheid van links, terwijl een simpele verbetering soms een boost voor je site kan betekenen.<\/p>\n

De tips in het kort:<\/p>\n

    \n
  1. Maak van elke link een echte link<\/a><\/li>\n
  2. Geef een link een beschrijvende tekst<\/a><\/li>\n
  3. Zorg dat duidelijk is wat een link is (en wat niet)<\/a><\/li>\n
  4. Maak onderscheid in onbezochte en bezochte links<\/a><\/li>\n
  5. Open links niet in een nieuw venster<\/a><\/li>\n
  6. Gebruik iconen om links te verhelderen<\/a><\/li>\n<\/ol>\n

    <\/p>\n

    1. Maak van elke link een echte link<\/h2>\n

    Wanneer je links hebt waar bezoekers javascript voor nodig hebben om erop te kunnen klikken, dan heb je onechte links. Meestal staat er iets dergelijks in als:<\/p>\n

    <a href="javascript:newwindow()">link<\/a>\n<a href="#" onclick="javascript:popUp('http:\/\/www.example.com')">link<\/a><\/pre>\n
    Die link leidt nergens naartoe wanneer javascript uitstaat. Nou hebben de meeste mensen<\/em> wel javascript aan, maar zoekmachines<\/em> niet. Daarom kunnen veel sites met javascriptmenu\u00e2\u20ac\u2122s een hoge score in zoekmachines bij voorbaat al vergeten; er valt voor een zoekmachine weinig te indexeren. Daarnaast blijven er altijd mensen die bijvoorbeeld vanwege bedrijfsveiligheid javascript niet aan hebben staan (ongeveer 5%<\/a>). En zelfs voor je webstatistiekenpakket kan het een probleem<\/a> zijn. Kortom, zorg dat elke link ook zonder javascript ergens naartoe leidt.<\/strong> (Alternatieve menu’s bouw je met CSS<\/abbr>, zoals wordt uitgelegd in het Listutorial<\/a>. Gevorderde alternatieven zijn de o.a. de Son of Suckerfish dropdowns<\/a> of de UDM4<\/a>.)<\/p>\n
    2. Geef een link een beschrijvende tekst<\/h2>\n
    Uit onderzoek blijkt dat veel bezoekers pagina\u00e2\u20ac\u2122s niet lezen<\/em>, maar door de pagina scannen<\/em><\/a> naar informatie. Bezoekers letten op kopjes, dikgedrukte woorden, lijsten\/opsommingen, maar ook op links<\/strong>. Immers, links zijn veelal bedoeld om aan te geven dat je naar meer informatie kun navigeren.<\/p>\n
    Tot voor kort was \u00c3\u00a9\u00c3\u00a9n van de meestvoorkomende linkteksten: \u00e2\u20ac\u0153klik hier\u00e2\u20ac\u009d. Wanneer je weet dat mensen de pagina niet lezen, maar scannen naar woorden en zinsdelen die aangeven dat er bepaalde informatie volgt, dan wordt duidelijk dat \u00e2\u20ac\u02dcklik hier\u00e2\u20ac\u2122 de bezoeker weinig zegt. Men moet dan alsnog de context lezen om te begrijpen waar de link naartoe leidt. Bovendien is de ‘klik hier’-zin tekstueel gezien veelal overbodig; het is vaak voldoende om een woord of zinsdeel uit de voorgaande zin te linken.
    \n\"Niet
    \nIn bovenstaande afbeelding had men makkelijk kunnen volstaan door alles te verwijderen behalve de kopjes en vervolgens een link te maken van ‘Lenen via internet’ en ‘Muziek lenen’. Niet alleen is meteen duidelijk wat het onderwerp van de link is, de extra regels ‘klik hier voor meer informatie’ zijn ook nog duidelijk overbodig.<\/p>\n
    3. Zorg dat duidelijk is wat een link is (en wat niet)<\/h2>\n
    Links zijn vaak onderstreept. Maar op sommige sites wordt daarnaast onderstreping gebruikt om tekstkopjes te maken, of om een bepaald tekstdeel nadruk te geven. Bij teksten op papier is onderstreping daar erg geschikt voor, maar op internet valt zo moeilijker te onderscheiden wat een link is en wat niet.<\/p>\n
    Voorbeeld:
    \nDit is onderstreepte tekst<\/span> en dit is een     link naar de homepage<\/a>.<\/p>\n
    Onderstreep dus nooit in internetteksten, tenzij het een link is<\/strong>. Het W3C<\/abbr><\/a> heeft niet voor niks het underline-element afgekeurd, zoals ook valt te lezen in mijn artikel over achterhaalde elementen<\/a>.<\/p>\n
    Hoewel links dus vaak onderstreept zijn, kiezen sommige sites ervoor de onderstreping van links juist weg te halen. Dat maakt links moeilijker te herkennen. In dat geval is het belangrijk dat je links op andere manieren goed zichtbaar maakt, bijvoorbeeld door ze zowel een andere kleur mee te geven, als door ze dikgedrukt te maken. Let er dan wel goed op dat die links niet lijken op andere elementen in de tekst die geen<\/em> links zijn.<\/p>\n
    4. Maak onderscheid in onbezochte en bezochte links<\/h2>\n
    Zeker wanneer je een grote website hebt, is het handig als bezoekers ziet welke pagina\u00e2\u20ac\u2122s ze al wel hebben bezocht en welke nog niet. Hoe frustrerend is het als je op een site naar informatie zoekt en je meerdere malen op dezelfde pagina terecht komt, terwijl je daar al bent geweest? Voorkom zulke ergernissen op je eigen site en geef bezochte links een ander kleurtje mee<\/a>. Hiervoor gebruik je de link-pseudo-classes<\/a> a:link<\/code> en a:visited<\/code>.<\/p>\n
    Je kunt je pagina n\u00c3\u00b3g gebruiksvriendelijker maken door links op te lichten wanneer je muis er overheen gaat (a:hover<\/code>), door links op te lichten als je met de tabknop erop staat (a:focus<\/code>) en door links op te lichten wanneer je erop klikt (a:active<\/code>). Tip: let in je CSS<\/abbr> op de volgorde van de link-states<\/a>.<\/p>\n
    5. Open links niet in een nieuw venster<\/h2>\n
    Sites openen links in een nieuw venster meestal om twee redenen:<\/p>\n