Alt en title juist gebruiken
Usability tag attributen
Met de komst van HTML 4.01 en XHTML was het opeens verplicht een alt te specifiëren, nu je design leed er niet onder als je het niet deed, maar als goede webdesigner doe je het de dag van vandaag toch.
En waarom eigenlijk. Je website heeft er geen voordeel bij.
Neen inderdaad, je website niet, maar wel je bezoekers met een visuele handicap (het zicht dus), deze kunnen perfect gebruik maken van je website als je deze 2 tag attributen gebruikt.
De schuld van internet explorer
Het grootste probleem ligt in het gebruik en wanneer welk voor welk doel. Nu kon je altijd een alt tekst voorzien bij een afbeelding, Internet Explorer toonde dit dan als tooltip, en dat is verkeerd, alt is alternatieve tekst voor als je afbeelding om een of andere donkerbruine reden niet kan getoond worden terwijl nu de title wel als tooltip kan dienen.
alt
Dient dus voor alternatieve tekst als je geen afbeelding kan tonen, of de browser is text-only, of mensen willen hun surf-tijd versnellen en schakelen afbeeldingen weergeven uit.
Je bepaalt dus beter altijd een duidelijke omschrijving van de afbeelding die getoond moet worden.
Als je nu een afbeelding hebt die een onderdeel van je layout vormt heeft het natuurlijk weinig zin daarvoor een omschrijving te geven: alt="ronde hoek links onder" heeft geen meerwaarde, maar plaats een lege alt: alt="".
Mensen met een screenreader krijgen anders de bestandnaam voorgelezen.
Kleine W3C link tip voor weetgragen
title
Deze dient dus zoals reeds aangehaald als tooltip voor bijvoorbeeld je links in een navigatie of deze nu tekstueel of grafisch van aard zijn.
Ook hier geldt weer de regel, hoe duidelijker hoe beter.
Titels zoals “hier klikken”, zijn niet echt duidelijk voor mensen die je links niet “zien“.
Besluit
Denk bij het html’len ook eens aan mensen met een handicap, zij zullen je dankbaar zijn.
Update: Kevin liet mij weten dat ik vergeten was te vermelden dat de alt wel een meerwaarde voor je website kan betekenen.
Gelezen: 2441 | XHTML, Webstandaarden
Trackback/Pingbacks
- » Afbeeldingen duidelijker maken - Gigadesign, XHTML-CSS website maken
Reacties op: Alt en title juist gebruiken
-
Voor meer informatie over dit onderwerp
-
Natuurlijk kan je niet-informatieve, maar puur lay-out behoevende afbeeldingen als achtergrondafbeelding in je css gebruiken
want één van de voordelen van css is namelijk het snel en consistent toepassen van een nieuwe lay-out à la gigastyle
Alt gaat over de afbeelding zelf, title over de relatie die de afbeelding heeft ten opzichte van je document. En als je deze afbeelding insluit in een hyperlink dan voorzie je de hyperlink ook van een betekenisvolle tekst

-
Ik hoor het allemaal graag zeggen, die arme arme gehandicapten toch… maar wat is de meerwaarde voor een blinde surfer dat hij weet dat er ergens een afbeelding staat, die hij per definitie toch niet kan zien?
De enige nuttige reden die ik kan bedenken om ‘alt’-tags van tekst te voorzien is om de afbeeldingen makkelijker te laten indexeren door google. (als dat dan al gewenst is)
-
Smileys, Zeer eenvoudige diagrammen (de moeilijke horen een tekstueel alternatief te krijgen), een cartoon, de huisstijl van een logo…
Als blinde gebruiker zou ik de betekenis van deze afbeeldingen zeker niet willen missen doordat de webmaster visueel gehandicapten niet belangrijk genoeg acht.
En websites maak je altijd in de eerste plaats voor bezoekers, pás dan voor zoekmachines en andere software.
Beiden overlappen elkaar wel grotendeels, maar in geval van twijfel toch voor het eerste kiezen. Off-site zoekmachine optimalisatie telt voor ongeveer 80% mee in je positionering, dus dat compenseer je dan daar wel mee.
-
Bij het tonen van foto’s op je website, vind ik het handig dat je een tooltip te zien krijgt.
Als je de alt tag gebruikt, wordt deze als tooltip gebruikt in Internet Explorer, maar niet in Firefox.
De oplossing is: zowel de alt als de title tag te gebruiken (met dezelfde waarden).
Ik weet het, ‘t is dubbele informatie, maar ik zou niet weten hoe je het anders kan oplossen…
-
Zelf wist ik niet dat alt niet als tooltip wordt weergegeven in Firefox.
-
Voor diegenen die afbeeldingen gebruiken voor titels en dergelijke, is het
altattribuut ook noodzakelijk:
<h1><img src="/images/layout/naam-van-het-bedrijf.png" alt="Naam van het Bedrijf" /></h1>
Overigens idem bij links die met afbeeldingen weergegeven worden. Dit is veel semantischer dan bijvoorbeeld al die onzinnige replace javascript rommel, en de mensen die afbeeldingen uit hebben staan of een screenreader gebruiken missen niets. Wel even hethxelement met CSS opmaken, anders ziet het er niet uit als je afbeeldingen uit hebt staan.
Bij links gebruik ik altijd een beschrijvende tekst voor tussen de tags, en de titel die ik gebruik bij hettitleattribuut haal ik uit hettitleelement van het betreffende hypertekst document.
Zelf vind ik hetlongdescook belangrijk, heb hem zelf nog nooit hoeven gebruiken.
-
@Arjan Eising: Waarom de afbeelding in een h1?
-
Omdat het een kop/header is

-
Zegt Tony:
“Ik hoor het allemaal graag zeggen, die arme arme gehandicapten toch… maar wat is de meerwaarde voor een blinde surfer dat hij weet dat er ergens een afbeelding staat, die hij per definitie toch niet kan zien?”
Dit heeft absoluut niets met ‘arme arme gehandicapten’ te maken. Het gaat erom om iedereen toegang te geven tot dezelfde informatie. Blind zijn wordt pas écht een handicap als dat recht je ontzegd wordt. Zij die beter zouden moeten weten en er met een kleine persoonlijke bijdrage voor kunnen zorgen dat mensen met een handicap erbij horen, zijn in mijn ogen ‘armer’ dan zij die er niet voor gekozen hebben om met een beperking te leven.
Terug naar de discussie: voor blinden is weten wat een afbeelding voorstelt van essentieel belang als het gaat om grafische tekst, grafische hyperlinks en complexe afbeeldingen. Ik nodig je uit om zelf een tijdje te surfen met afbeeldingen uitgeschakeld (eenvoudig te doen met bvb. de Web Developer Toolbar in Firefox) en je zal Mark snel gelijk geven.
-
Misschien is deze overview handig…






