Om maar meteen met de deur in huis te vallen even een vraag: Waarvoor gebruik je het alt-attribuut en waarvoor het title-attribuut?

Is het juist als ik denk dat een groot aantal lezers nu denkt “Is er überhaupt verschil dan tussen deze twee?” of “Ja, die zijn toch voor de tooltips in je browser”? Ik ben bang van wel en eerlijk gezegd vind ik dat niet eens vreemd. Het title-attribuut zie je niet vaak en is daarom erg onbekend. Daarbij geven browsers beide attributen inderdaad vaak weer als een tooltip, maar dat wil nog niet zeggen dat ze daar ook voor bedoeld zijn. Waar deze attributen wel voor bedoeld zijn zal ik in dit artikel proberen duidelijk te maken. Ook zal ik kort nog even stilstaan bij het (nog) minder bekende longdesc-attribuut.

Het alt-attribuut

Om te kijken naar een goede beschrijving van het alt-attribuut kunnen we denk ik het beste de definitie van het W3C erbij halen. Die is als volgt:

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text

Juist, een attribuut voor user agents die afbeeldingen niet kunnen zien. En dus niet voor het weergeven van tooltips. Een alt-attribuut gebruik je voor als een user agent (bijvoorbeeld een tekstbrowser) een afbeelding niet kan laten zien. In plaats daarvan wordt dan de alternatieve tekst getoond.

Omdat een afbeelding duizend keer meer zegt dan woorden alleen staat hieronder een voorbeeld met een foto van de Mount Everest en de bijbehorende HTML-code.

<img src="mount-everest.jpg" 
 alt="Uitzicht op de Mount Everest">

Een goede omschrijving van deze foto zou kunnen zijn: "Uitzicht op de Mount Everest". Aan de inhoud van het alt-attribuut moet je kunnen ‘raden’ wat op de afbeelding te zien is. Teksten als “foto” of “gele bullet” geven totaal geen meerwaarde en kun je dan ook beter weglaten. Als je een img-element gebruikt voor afbeeldingen die puur alleen bijdragen aan de lay-out (een headerafbeelding of bullet bijvoorbeeld) laat het alt-attribuut dan gewoon leeg. Beter geen informatie dan onzinnige informatie. Uiteraard zou het nog beter zijn als je dit soort afbeeldingen via CSS verwerkt.

Het title-attribuut

Ook hier weer de definitie van het W3C voor het title-attribuut.

This attribute offers advisory information about the element for which it is set.

Dit klinkt iets vager, en dat is denk ik ook de reden waarom we dit attribuut zelden tot nooit zien. Een tweede reden is dat het geen verplicht attribuut is. Het title-attribuut gebruik je namelijk alleen om meer informatie te geven over het huidige element. Vaak zien we dit attribuut aan een link hangen. Je kunt dan het title-attribuut gebruiken om meer informatie te geven over de pagina waar je naar linkt. Als de link goed is zou deze grotendeels overeen moeten komen met de tekst van de link, maar je zou ervoor kunnen kiezen om wat extra data hierin toe te voegen, zoals de auteur of de datum van een bepaald artikel. Een goed title-attribuut zou dus informatie moeten bevatten die beschrijvend is, maar niet per se essentieel. Dit is duidelijk een (of misschien wel het) verschil met het alt-attribuut. Om ook dit attribuut te verduidelijken hieronder een voorbeeld:

<a href="http://www.naarvoren.nl/artikel/alt_title/"
 title="Link naar: Wanneer alt, wanneer title?, geschreven door Arjan Snaterse">Wanneer alt, wanneer title?</a>

Het title en alt attribuut samen

Kan dat ook? Jazeker. Uiteraard kan dit alleen bij het img-element, aangezien volgens de HTML-specificaties het alt-attribuut alleen bij het img-element gebruikt mag worden. Maar wat is het nut dan om deze twee samen te gebruiken? Nou, om heel eerlijk te zijn niet heel veel. Maar het kan best zijn dat je in je website foto's gebruikt waar copyright op zit. Het title-attribuut biedt dan een gelegenheid om deze copyrights te vermelden. Een copyright zegt natuurlijk weinig over de foto zelf, dus is het alt-attribuut hier niet geschikt voor. Voor de volledigheid ook voor de combinatie tussen deze twee attributen een voorbeeld en de HTML-code.

<img src="skyline-new-york.jpg" 
 alt="Skyline van New York" 
 title="Skyline van New York, copyright Jan Bakker 2007">

Het longdesc-attribuut

Ja, dan is er ook nog het longdesc-attribuut. Een grote kans dat helemaal niemand dit kent en eerlijk gezegd kom ik de longdesc ook nooit tegen. Maar dit attribuut is bedoeld om wat langere beschrijvingen kwijt te kunnen voor een bepaald element. Ook hiervan de definitie van het W3C.

This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute.

Hier staan twee dingen. We beginnen met het tweede: het moet een aanvulling zijn op het alt-attribuut. Waar je qua ruimte met het alt-attribuut niet uitkomt kun je het longdesc-attribuut gebruiken. In de eerste zin wordt duidelijk dat het longdesc-attribuut een link naar de beschrijving bevat. Hier kun je dus veel meer informatie kwijt dan in het alt-attribuut, die volgens het draft document “Test Suite for WCAG 2.0” maar 100 karakters mag bevatten.

Ter verduidelijking geef ik ook bij dit attribuut even een voorbeeld en de HTML-code.

<img src="muiderslot.jpg" 
 alt="Muiderslot: kasteel en rijksmuseum" 
 title="Het kasteel en rijksmuseum Muiderslot, copyright Piet Janssen, foto genomen op 2 januari 1998" 
 longdesc="muiderslot-longdesc.html">

In het bestand muiderslot-longdesc.html komt dan de volgende tekst te staan:

Een voordeel van het longdesc-attribuut is dat je kopteksten en andere HTML-elementen kan gebruiken. Dit is in een alt- of title-attribuut niet mogelijk.

Als je dit zo leest lijkt het een ideaal attribuut, maar er zijn zeker ook nadelen. Grote nadelen. Het probleem met het longdesc-attribuut is namelijk dat het slecht ondersteund wordt door de huidige browsers. Alleen Mozilla (Firefox, Netscape, Mozilla) browsers kunnen goed omgaan met dit attribuut. Als alternatief hiervoor ontstond het concept d-links. D-links is eigenlijk niets meer dan een link naar een pagina met meer informatie over de afbeelding. Maar omdat door het gebruik hiervan een beetje de boot wordt gemist, wordt dit dan ook ten zeerste afgeraden in de webrichtlijnen van de overheid.

Zoekmachines

Nu we vooral de HTML-kant van het verhaal bekeken hebben is het wellicht ook interessant om eens te kijken wat zoekmachines met deze attributen doen. Het voordeel van het alt-attribuut is denk ik vrij bekend. Als je dit attribuut goed gebruikt heeft dit voordelen voor zowel het zoeken naar plaatjes als ondersteuning van de teksten eromheen. Over het title-attribuut is wat minder bekend. Maar als we daarvoor wat research doen komen we erachter dat zoekmachines hier niets mee doen.

Dan blijft er nog het longdesc-attribuut over. Dat is een link naar een ander HTML-bestand en een goede SEO’er ziet hier uiteraard meteen kansen. Maar als we bijvoorbeeld een spider als Xenu zijn werk laten doen komen we erachter dat de documenten in het longdesc-attribuut niet gevolgd worden. Ook na een echte test bleek het HTML-bestand met de lange beschrijving niet geïndexeerd te worden. Misschien is het jammer, maar aan de andere kant ook zeer begrijpelijk, aangezien dit dan wel een heel makkelijke manier van spam zou worden.

Conclusie

Ik hoop dat na het lezen van dit artikel je meer te weten bent gekomen over het gebruik van het alt-, title- en longdesc-attribuut. Het belangrijkste blijft dat je een goede tekst voor het alt-attribuut schrijft en eventueel een aanvullend title-attribuut. En het longdesc-attribuut? Tsja… Laten we dat wat mij betreft voorlopig maar gewoon vergeten.

• Home
• Artikelen
• Colofon