Good Mood

Page Content

Terminologi

Der er flere termer, der ofte bruges til at beskrive ALT-tekst. De kan bruges i forskellige sammenhænge, selv inden for dette .ebsted.,

• ALT te .t – konceptet med at tilføje en skærmlæservenlig tekstalternativ beskrivelse af et billede. Dette kan implementeres forskelligt på tværs af dokumenttyper.
• ALT attribut – HTML) – i HTML indsættes alt-teksten i alt-attributten i IMG-tagget.
• ALT “Tag” – forkortelse henvisning til alt attributten.

Demo af ALT-Tekst

Formål

ALT-teksten tilføjer en tekst beskrivelse til et billede på en webside,, og skal anvendes til alle billeder, grafiske kugler, og grafisk horisontale regler.,

ALT tekst tilgås af skærmlæser brugere til at give dem en tekst svarende til billeder. I visuelle bro .sere som Firefo.vises alt-teksten, når et billede er brudt, eller når alle billeder er deaktiveret.

Guidelinecag-retningslinje

Guidelinecag 2.0-retningslinje 1.1.1.- “Alt ikke-tekstindhold, der præsenteres for brugeren, har et tekstalternativ, der tjener det tilsvarende formål.”

eksempler på Billedknapper

overvej billederne for sektioner et hypotetisk uddannelsessted, under hvilket alle indeholder dekorativ tekst.,bemærk: enhver tekst, der bruges i et billede, skal følge retningslinjerne for læsbarhed og kontrast.

skærmlæser Output Med ALT-Tag

Hvis billeder ikke indlæse, ALT-tekst, som vil vise, hvilke billeder, der ville have sagt i en browser, såsom Firefox.

Skærmlæserudgang uden ALT-Tag

uden ALT-teksten kan ingen vide, hvad indholdet af billedet ville have været.

Gennemførelsen af ALT-Attributten

Nedenfor er nogle eksempler på, hvordan, hvordan ALT-tekst, som kan gennemføres-afhængig af konteksten.

George Paintingashington Painting

Se Koden

Implementer ALT-teksten som en attribut i IMG-tagget. Se eksempel nedenfor.

bemærk: en anbefalet ALT-tekstlængde er omkring 125 tegn. Dette rumme Ja .s screen reader ALT tekstfelt. Dette er dog ikke inden for WCAG-retningslinjerne.

billedtekster vs. ALT-tekst

alle oplysninger om billedet, såsom copyright-oplysninger, billedkilde eller ekstra oplysninger, skal placeres i billedteksten under billedet, ikke i ALT-teksten. Se eksemplet nedenfor.

Caption: Maleri “Washington og Lafayette på Valley Forge” af John Ward Dunsmore fra 1907. Billede venligst udlånt af Library of Congress.,

Logoer

For logoer, især logoer, der gentages, er tilstrækkelig til at identificere, hvilket logo det er, ikke nødvendigvis beskrive det fuldt ud

Forkert Bruger ALT-Tekst

Det bør IKKE anvendes til:

• indføre tooltip tekst,
• give ophavsretten eller en kilde oplysninger om et billede eller
• formidle supplementaty oplysninger om grafisk.,
• introducer søgetermer (dette kan gøres ved god brug af overskrifter).

Tom Alt-tekst til dekorative billeder

Nogle billeder bruges udelukkende til layoutformål eller til at forbedre indholdet for seende brugere og giver intet indhold.

ALT tag, for at disse billeder kan være tom ( <alt= “” > eller <alt=” “>), således at skærmen læsere vil ignorere dem helt.,

eksemplet nedenfor vil bruge et eksempelbillede af en regnbueværktøjslinje, efterfulgt af nogle tilgængelige og utilgængelige kodeeksempler.

Rainbo.Tool Bar

Antag, at en Webebside er designet med en regnbueværktøjslinje, der bruges til at adskille tekststykker.

Bemærk: ALT-attributten med mellemrumstegnet betragtes som mindre korrekt, men kan være den eneste mulighed, der er tilladt i nogle indholdsstyringssystemer.

kortfattet Alt-tekst

Hvis der allerede findes en tekstbeskrivelse for et billede i hovedteksten på siden, kan ALT-tagget bare give et resum.af billedet, ikke en komplet beskrivelse.,

se komplekse billeder for eksempler på, hvordan dette kan bruges i forskellige situationer.

eksempel tekst med billede

nedenfor er et billede af et mættet fedtmolekyle med 18 carbonmolekyler. Bemærk, at de enkelte bindinger mellem elementer gør kulstofkæden relativt lige.,

Links til Længere Beskrivelser

I nogle tilfælde kan det være nødvendigt at tilføje et link til en uddybende beskrivelse af billedet, især i de tilfælde, hvor billeder bruges til at formidle væsentlige indhold. Der er flere måder, dette kan opnås—inklusive et LONGDESC-tag, et D-link eller et mere åbenlyst link til den længere beskrivelse. Se nedenfor for eksempler

Link til Billedteksttekst

Hvis oplysningerne er kritiske, kan et åbenlyst billedtekstlink være den bedste løsning. Denne metode giver den klareste indikation af, at en længere beskrivelse er tilgængelig.,

Se udvidet tekstbeskrivelse

D-links

nogle eksperter går ind for brugen af et d-link til at signalere tilstedeværelsen af en udvidet tekstbeskrivelse. Nogle brugere er muligvis ikke opmærksomme på konventionen. Denne metode bruges bedst til at give oplysninger, der er rent supplerende.

D

LONGDESC-Attributten

Dette er en attribut, der er skjult i visuelle browsere, men der er anerkendt af nogle skærmlæsere. LONGDESC er bedst til at give ekstra detaljer, der forbedrer indholdet, men er ikke kritisk., Det skal bemærkes, at LONGDESC har ufuldstændig støtte blandt både visuelle bro .sere og skærmlæsere, og er forældet i HTML5.

LONGDESC Tekst (i dfootball.HTML)

Dette er et reklamefoto af en Penn State fodboldspiller, der kører med fodbold i et overfyldt fodboldstadion på en solskinsdag.,

Links og knapper

for billeder, der bruges som navigationselementer til at udløse funktioner som udskrivning, upload eller lagring, skal ALT-teksten beskrive destinationen eller funktionen, ikke billedet.

klikbart vs. ikke-klikbart Penn State Shield

Når et Penn State shield bruges på en Penebside, afhænger den anvendte ALT-tekst af, om den kan klikkes (dvs.links til Penn State-startsiden) eller ej.,

Hvis et Penn State shield-billede bruges til at angive et link, der kan klikkes på startsiden, skal ALT-teksten angive destinationen (dvs.ALT=”Penn State Home Page”) Bemærk, at IMG-tagget er indlejret i et a-tag for linket.Bemærk: Hvis skjoldet ikke kan klikkes, kan ALT-teksten være “Penn State”eller” Penn State shield”.

TITLE attribut for Tool Tips

TITLE attributten for en IMG tekst kan bruges til at generere et værktøjstip for seende brugere. Men vær opmærksom på det.,

• TITLEATTRIBUTTEN læses ikke som standard højt i de fleste skærmlæsere.
• ALT-teksten vises normalt ikke som et værktøjstip i de fleste bro .sere.

Hvis et værktøjstip er nødvendigt for seende brugere, kan både en titel og ALT-attribut med samme information bruges til at sikre, at de samme oplysninger leveres til begge målgrupper.

se dette eksempel nedenfor

foretrukne Hjerteknap med værktøjstip

overvej en version af hjertebilledet nedenfor, som kan bruges i en grænseflade til at vælge foretrukne emner (f.eks. yndlingssange eller e-bøger).,

Både ALT tekster og TITLE-attributten er “Favoritter”

Se Koden