Good Mood

Page Content

Terminologi

Det er flere vilkår som er ofte brukt til å beskrive ALT-tekst. De kan brukes i forskjellige sammenhenger, selv innenfor denne nettsiden.,

• ALT-tekst – konseptet med å legge en skjermleser vennlig tekst alternativ beskrivelse av et bilde. Dette kan implementeres forskjellig på tvers av dokumenttyper.
• ALT-attributtet (HTML) – I HTML, ALT-teksten er satt inn i ALT-attributtet i IMG-koden.
• ALT «Tag» – Kort referanse til ALT-attributtet.

Demo av ALT-Tekst

Formål

ALT-teksten legger til en tekst, en beskrivelse og et bilde på en Webside, og bør brukes til alt av bilder, grafiske kuler, og grafisk horisontale regler.,

ALT-tekst er tilgjengelig for skjermleser-brukere til å gi dem med en tilsvarende tekst på bilder. I visuelle nettlesere, slik som Firefox, ALT-teksten vises når et bilde er ødelagt, eller når alle bildene som har blitt deaktivert.

WCAG-Retningslinjene

WCAG 2.0 Retningslinje 1.1.1.—»Alle ikke-tekstlige innholdet som presenteres til brukeren har en alternativ tekst som fungerer med tilsvarende formål.»

Bilde-Knappen Eksempler

Vurdere bildene for deler en hypotetisk utdanning området nedenfor som alle inneholder dekorativ tekst.,
Merk: teksten som brukes i et bilde skal følge lesbarhet og kontrast retningslinjer.

Skjermleser-Utgang Med ALT-Taggen

Hvis bildene ikke klarer å laste inn, ALT-teksten vil vise hva bildene ville ha sagt i en nettleser, som for eksempel Firefox.

Skjermleser Utgang Uten ALT-Taggen

Uten ALT-tekst, ingen kan vite hva innholdet i bildet ville ha vært.

Implementere ALT-Attributt

Nedenfor er noen eksempler på hvordan hvordan ALT-teksten kan gjennomføres, avhengig av kontekst.

George Washington Maleri

Vis Koden

Implementere ALT-teksten som et attributt i IMG-koden. Se eksempel nedenfor.

Merk: anbefalt alternativ tekst lengde er ca 125 tegn. Dette passer den JAWS skjermleser ALT-tekst-feltet. Men dette er ikke i WCAG-retningslinjene.

Bilde Bildetekster vs. ALT-Tekst

Noen informasjon om bildet, for eksempel informasjon om opphavsrett, image source eller ekstra informasjon skal plasseres i caption-teksten under bildet, ikke i ALT-teksten. Se eksempel nedenfor.

Bildetekst: Maleri «Washington og Lafayette Valley Forge» av John Ward Dunsmore fra 1907. Bilde gjengitt med tillatelse av Library of Congress.,

Logoer

For logoer, spesielt logoer som er gjentatt, er det tilstrekkelig å identifisere hvilken logo som det er, ikke nødvendigvis helt beskrive det

Feil bruk av ALT-Tekst

Det bør IKKE brukes til å:

• introdusere tooltip-tekst,
• sørge for opphavsrett eller kilde til informasjon om et bilde eller
• formidle supplementaty informasjon om den grafiske.,
• introdusere søkeord (dette kan gjøres via god bruk av overskrifter).

Tom Alt-Tekst for Dekorative Bilder

Noen av bildene er brukt utelukkende for layout formål eller til å forbedre innholdet for seende brukere og gir ikke noe innhold.

ALT-tag for disse bildene kan være tomme ( <alt= «» > eller <alt=» «>) slik at skjermlesere vil ignorere dem helt.,

eksemplet nedenfor vil bruke et eksempel bilde av en regnbue verktøylinjen, etterfulgt av noen tilgjengelig og utilgjengelig kode eksempler.

Rainbow Verktøyet Bar

la oss Anta at en Web-side ble designet med en regnbue verktøylinjen brukes til å separate biter av tekst.

Merk: ALT-attributt med mellomrom er ansett som mindre korrekte, men kan være det eneste alternativet som er tillatt i noen innhold ansatte systemer.

Kortfattet Alt-Tekst

Hvis en tekst beskrivelse er allerede tilgjengelig for et bilde i teksten på siden, så ALT-tag-en kan bare gi en oppsummering av bildet, ikke en full beskrivelse.,

Se Komplekse Bilder for eksempler på hvordan dette kan brukes i ulike situasjoner.

Eksempel Tekst med Bilde

Nedenfor er et bilde av en mettet fett molekyl med 18 karbon molekyler. Legg merke til at den eneste båndene mellom elementene gjør karbon kjede relativt rett.,

Lenker til Lengre Beskrivelser

I noen tilfeller kan det være nødvendig å legge en link til en utvidet beskrivelse av et bilde, spesielt i tilfeller hvor bilder er brukt til å formidle betydelig innhold. Det er flere måter dette kan oppnås, inkludert en LONGDESC-tag, en D-link eller en mer åpenbare koblingen til lengre beskrivelse. Se under for eksempler

Link til Uthevet Tekst

Hvis informasjonen er kritisk, så en overt bildetekst link kan være den beste løsningen. Denne metoden gir de klareste indikasjonen på at en lengre beskrivelse er tilgjengelig.,

Vis Utvidet Tekst Beskrivelse

D-links

Noen eksperter fremme bruken av D-link for å signalisere tilstedeværelse av en lengre tekst beskrivelse. Imidlertid, noen brukere ikke kan være klar i konvensjonen. Denne metoden er mest brukt til å gi informasjon som er rent supplerende.

D

LONGDESC-Attributtet

Dette er et attributt som er skjult i visuelle nettlesere, men anerkjent av noen skjermlesere. LONGDESC er best for å gi ekstra detalj som forbedrer innhold, men er ikke kritisk., Det bør bemerkes at LONGDESC har ufullstendig støtte blant både visuelle nettlesere og skjermlesere, og er avskrevet i HTML5.

Koblinger og Knapper

For bilder som brukes som navigasjonselementer til å utløse funksjoner som utskrift, laste opp eller lagre, ALT-teksten bør beskrive mål eller en funksjon, ikke bildet.

Klikkbare vs. Ikke-Klikkbar Penn State Shield

Når en Penn State shield er brukt på en Web-side, ALT-teksten som brukes, avhenger av om det er klikkbare (dvs. koblinger til Penn State hjemme side) eller ikke.,

Hvis en Penn State shield bildet blir brukt til å gi en klikkbar link til hjemmesiden, ALT-teksten skal angi destinasjon (dvs. ALT=»Penn State hjemmesiden») Merk at i IMG-koden er innebygd i en En kode for kobling.

Merk: Hvis shield er IKKE klikkbare, så ALT-teksten kan være «Penn State» eller «Penn State shield».

TITLE-Attributtet for Verktøyet Tips

TITLE-attributtet i en IMG tekst kan brukes til å generere et verktøytips for seende brukere. Men vær klar over at.,

• TITTEL-attributtet er IKKE lest opp som standard i de fleste skjermlesere.
• ALT-Tekst er vanligvis ikke vises som et verktøytips i de fleste nettlesere.

Hvis et verktøytips er nødvendig for seende brukere, da både en TITTEL og ALT-attributt med den samme informasjonen kan brukes for å sikre at den samme informasjonen er levert til begge målgrupper.

Se dette eksemplet nedenfor

Favoritter Hjertet Knappen med verktøytips

Vurdere en versjon av hjertet bildet nedenfor, som kan brukes i et grensesnitt for å velge favoritt-elementer (f.eks. favoritt sanger eller e-bøker).,

Både ALT-tekst og TITTEL-attributtet er «Favoritter»

Vis Koden