Good Mood

Page Content

Terminologie

Er zijn een aantal termen die vaak worden gebruikt voor het beschrijven van de ALT-tekst. Ze kunnen worden gebruikt in verschillende contexten, zelfs binnen deze website.,

• ALT text-Het concept van het toevoegen van een schermlezer vriendelijke tekst alternatieve beschrijving van een afbeelding. Dit kan verschillend worden geïmplementeerd tussen documenttypen.
• ALT-attribuut (HTML) – in HTML wordt de ALT-tekst ingevoegd in het ALT-attribuut binnen de IMG-tag.
• ALT “Tag” – Afkorting verwijzing naar het alt-attribuut.

Demo van ALT-tekst

doel

De ALT-tekst voegt een tekstbeschrijving toe aan een afbeelding op een webpagina en moet worden gebruikt voor alle afbeeldingen, grafische opsommingstekens en grafische horizontale regels.,

ALT tekst is toegankelijk voor schermlezer gebruikers om hen te voorzien van een tekst equivalent van afbeeldingen. In visuele browsers zoals Firefox wordt de ALT-tekst weergegeven wanneer een afbeelding is gebroken of wanneer alle afbeeldingen zijn uitgeschakeld.

WCAG richtsnoer

WCAG 2.0 richtsnoer 1.1.1.- “Alle niet-tekst inhoud die wordt gepresenteerd aan de gebruiker heeft een tekst alternatief dat het gelijkwaardige doel dient.”

Image Button Examples

beschouw de afbeeldingen voor secties als een hypothetische educatieve site waaronder alle decoratieve tekst staan.,
opmerking: Elke tekst die in een afbeelding wordt gebruikt, moet leesbaarheids-en contrastrichtlijnen volgen.

schermlezeruitvoer Met ALT-Tag

Als afbeeldingen niet worden geladen, ALT-tekst laten zien wat de beelden zou hebben gezegd in een browser, zoals Firefox.

Schermlezeruitvoer zonder ALT-Tag

zonder de ALT-tekst kan niemand weten wat de inhoud van de afbeelding zou zijn geweest.

de Uitvoering van het ALT-Attribuut

Hieronder staan een aantal voorbeelden hoe je een ALT-tekst kan worden geïmplementeerd, afhankelijk van de context.

George Washington Painting

bekijk de Code

implementeer de ALT-tekst als een attribuut in de IMG-tag. Zie voorbeeld hieronder.

opmerking: een aanbevolen ALT-tekstlengte is ongeveer 125 tekens. Dit is geschikt voor het JAWS screen reader ALT tekstveld. Dit valt echter niet onder de WCAG-richtsnoeren.

Afbeeldingsteksten vs. ALT-tekst

alle informatie over de afbeelding, zoals auteursrechtinformatie, afbeeldingsbron of extra informatie moet in de bijschrift onder de afbeelding worden geplaatst, niet in de ALT-tekst. Zie het voorbeeld hieronder.

bijschrift: schilderij” Washington and Lafayette at Valley Forge ” van John Ward Dunsmore uit 1907. Figuur met dank aan de library of Congress.,

logo ‘s

voor logo’ s, met name logo ‘ s die worden herhaald, is het voldoende om te identificeren welk logo het is, niet noodzakelijk volledig te beschrijven

oneigenlijk gebruik van ALT-tekst

Het mag niet worden gebruikt om:

• tekst met tekstballon in te voeren,
• auteursrecht of broninformatie over een afbeelding te verschaffen of
• aanvullende informatie over de afbeelding over te brengen.,
• introduceer zoektermen (dit kan worden gedaan door goed gebruik van koppen).

lege Alt-tekst voor decoratieve afbeeldingen

sommige afbeeldingen worden uitsluitend gebruikt voor opmaakdoeleinden of om de inhoud voor ziende gebruikers te verbeteren en bieden geen inhoud.

de ALT-tag voor deze images kan leeg zijn (<alt= “” > or <alt=” “>) zodat schermlezers ze helemaal negeren.,

het voorbeeld hieronder zal een voorbeeld van een rainbow-werkbalk gebruiken, gevolgd door enkele toegankelijke en ontoegankelijke codevoorbeelden.

Rainbow-werkbalk

stel dat een webzijde is ontworpen met een Rainbow-werkbalk die wordt gebruikt om tekststukken te scheiden.

Opmerking: Het alt-attribuut met het spatieteken wordt als minder correct beschouwd, maar kan de enige optie zijn die in sommige contentbeheersystemen is toegestaan.

beknopte Alt-tekst

als er al een tekstbeschrijving is voor een afbeelding in de hoofdtekst van de pagina, dan kan de ALT-tag alleen een samenvatting van de afbeelding geven, niet een volledige beschrijving.,

zie complexe afbeeldingen voor voorbeelden van hoe dit in verschillende situaties kan worden gebruikt.

voorbeeldtekst met afbeelding

Hieronder is een afbeelding van een verzadigd-vetmolecuul met 18 koolstofmoleculen. Merk op dat de enkele bindingen tussen elementen de koolstofketen relatief recht maken.,

koppelingen naar uitgebreide beschrijvingen

in sommige gevallen kan het nodig zijn om een koppeling toe te voegen aan een uitgebreide beschrijving van een afbeelding, vooral in gevallen waarin afbeeldingen worden gebruikt om belangrijke inhoud over te brengen. Er zijn verschillende manieren waarop dit kan worden bereikt—waaronder een LONGDESC tag, Een D-link of een meer openlijke link naar de langere beschrijving. Zie hieronder voor voorbeelden

Link naar bijschrift

als de informatie van cruciaal belang is, kan een openlijke bijschrift link de beste oplossing zijn. Deze methode geeft de duidelijkste aanwijzing dat er een langere beschrijving beschikbaar is.,

View Extended Text Description

D-links

sommige deskundigen pleiten voor het gebruik van een D-link om de aanwezigheid van een extended text description aan te geven. Sommige gebruikers zijn echter niet op de hoogte van het Verdrag. Deze methode wordt het best gebruikt om informatie te verstrekken die puur aanvullend is.

D

LONGDESC attribuut

Dit is een attribuut dat verborgen is in visuele browsers, maar herkend wordt door sommige schermlezers. LONGDESC is het beste voor het verstrekken van extra detail dat de inhoud verbetert, maar is niet kritisch., Opgemerkt moet worden dat LONGDESC onvolledige ondersteuning heeft bij zowel visuele browsers als schermlezers, en wordt afgekeurd in HTML5.

Links en knoppen

voor afbeeldingen die worden gebruikt als navigatie-elementen om functies zoals afdrukken, uploaden of Opslaan te activeren, moet de ALT-tekst de bestemming of functie beschrijven, niet de afbeelding.

klikbaar VS. niet-klikbaar Penn State Shield

wanneer een Penn State shield wordt gebruikt op een webpagina, hangt de alt-tekst af van het feit of het klikbaar is (dat wil zeggen koppelingen naar de Penn State homepage) of niet.,

als een Penn State shield-afbeelding wordt gebruikt om een klikbare link naar de startpagina aan te geven, moet de ALT-tekst de bestemming aangeven (d.w.z. ALT=” Penn State Home Page”).

opmerking: als het shield niet aanklikbaar is, dan kan de ALT-tekst “Penn State” of “Penn State shield”zijn.

TITLE attribuut voor Tool Tips

Het TITLE attribuut van een IMG-tekst kan worden gebruikt om een tooltip voor ziende gebruikers te genereren. Maar wees je daarvan bewust.,

• het attribuut titel wordt standaard niet hardop gelezen in de meeste schermlezers.
• De ALT-tekst wordt meestal niet weergegeven als een gereedschapstip in de meeste browsers.

als een gereedschapstip nodig is voor ziende gebruikers, kunnen zowel een titel als een ALT-attribuut met dezelfde informatie worden gebruikt om ervoor te zorgen dat dezelfde informatie aan beide doelgroepen wordt geleverd.

zie dit voorbeeld hieronder

favorieten hartknop met Tool Tip

overweeg een versie van het hart afbeelding hieronder die kan worden gebruikt in een interface om favoriete items te selecteren (bijvoorbeeld favoriete nummers of e-books).,

zowel de ALT-tekst als het attribuut titel zijn”favorieten”

bekijk de Code