Title of alt attribuut gebruiken bij afbeeldingen?

Title of alt attribuut gebruiken?

Het gebruik van alt en title attributen (tags) verbetert de toegankelijkheid van je website. Welke tag moet je nu eigenlijk gebruiken, en wat is het verschil tussen de title en de alt attribuut?

Interpretatie van het alt- en title-attribuut

De twee grootste en meest gebruikte internet browsers, Firefox en Internet Explorer, gaan beiden verschillend om met de tags. Beide browsers geven de attributen vaak weer als een tooltip. Dat wil echter niet zeggen dat ze daar allebei voor bedoeld zijn.

Tooltip

Mozilla Firefox interpreteert de tags zoals het zou moeten. Hij geeft bij de alt tag de omschrijving behorende bij de betreffende afbeelding weer, en gebruikt de title tag om een zogenaamde tooltip te geven. Tooltips zijn blokjes met extra informatie die opduiken als de gebruiker met zijn muis over een image of trefwoord gaat. Internet Explorer doet dit alleen met de alt tag.

Het alt attribuut

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

Voorbeeld voor het juiste gebruik van de alt attribuut

Neem een foto van Lieke van Lexmond. Een omschrijving van deze foto zou kunnen zijn: “Foto van Lieke van Lexmond”.

De inhoud van het alt attribuut moet weergeven wat er op de afbeelding te zien is. Een alt tekst als “mooie vrouw” of “GTST actrice” is nietszeggend en die moet je dus ook vermijden.

De juiste HTML code voor deze foto van Lieke zou dus zijn:
Foto van Lieke van Lexmond

Het title attribuut

De title tag is (nog) geen “verplicht” attribuut. (Het alt attribuut is verplicht sinds HTML 4)
Het title attribuut gebruik je om meer informatie te geven over het element waaraan het gekoppeld is. De title tag hangt zodoende dan ook vaak aan een hyperlink. Je gebruikt hem dan om info te geven over de pagina waar je naartoe linkt.

Vaak komt deze grotendeels overeen met de anchortekst van de link, maar het is natuurlijk ook een goede manier om wat extra info in je title tag te stoppen. Denk hierbij aan de schrijver van een bepaald artikel, of de actie die je onderneemt. Een title attribuut bevat dus omschrijvende info. Dit is feitelijk het grote verschil met het alt attribuut.

Voorbeeld voor het juiste gebruik van de title attribuut

Hier een voorbeeld van het juiste gebruik van de title-tag. Je hebt een link gemaakt gekoppeld aan een interessant artikel over het verschil tussen alt en title attributen. De anchortekst van je link zou dan kunnen zijn: “Title of alt ?. Welk attribuut moet je gebruiken?”.

De HTML code inclusief title attribuut voor deze link zou dus zijn:
Title of alt ?. Welk attribuut moet je gebruiken?

Een voorbeeld van het gebruik van het title attribuut in een e-mail link:
Mail voor Lieke

Title en alt attributen samen gebruiken?

Bij een afbeelding kun je beide attributen tegelijkertijd gebruiken. Maar in de meeste gevallen is het eigenlijk overbodig.
Het kan nuttig zijn in het geval dat je bijvoorbeeld op je website foto’s gebruikt waar copyright op zit. Deze copyrights kun je dan eenvoudig vermelden in het title attribuut. Een copyright vermelding zegt natuurlijk weinig over de foto zelf, dus moet je het alt attribuut hier niet voor gebruiken.

De HTML code voor zo’n link is dan: