Komplekse bilder: Diagrammer, kart og lange beskrivelser
Håndter bilder som trenger mer enn en kort frase.
Komplekse bilder: Diagrammer, kart og lange beskrivelser er en gratis leksjon i Web Accessibility Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Web Accessibility Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Når alt ikke er nok
Noen bilder inneholder for mye informasjon til at det kan beskrives med en kort frase. Diagrammer, kart og illustrasjoner trenger en plan for en lengre beskrivelse.
Start med en kort alt
Selv et komplekst bilde får en kort alt-tekst som navngir det, for eksempel et stolpediagram over månedlig salg i 2024.
<img src="chart.png" alt="Bar chart of monthly sales for 2024">Legg deretter til detaljene
Den korte alt-teksten navngir bildet; en lang beskrivelse i nærheten formidler deretter de faktiske dataene eller sammenhengene det viser.
Beskriv innsikten
En god lang beskrivelse formidler hovedpoenget, for eksempel at salget nådde toppen i desember, i stedet for en tørr liste over hver eneste verdi.
Tabellen som alternativ
For diagrammer er det ofte best å bruke en ekte HTML-tabell med de samme tallene rett under grafikken.
Koble til en beskrivelse
Du kan plassere en lang beskrivelse på siden og koble den til med aria-describedby som peker på elementets id.
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure og figcaption
Pakk inn et bilde og den synlige forklaringen i figure og figcaption, slik at koblingen er tydelig for alle.
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>Kart trenger dataene sine
Et kartbilde er ubrukelig uten de underliggende faktaene, så oppgi en adresse, veibeskrivelse eller liste som tekstalternativ.
Diagrammer og flyter
For et flytskjema bør du beskrive trinnene og rekkefølgen deres med tekst, slik at logikken består uten den visuelle layouten.
Gjør den lett å finne
Sørg for at den lange beskrivelsen er enkel å finne. Et skjult tekstalternativ som brukerne ikke kan nå, hjelper ikke i det hele tatt.
Tilpass innsatsen til kompleksiteten
Jo mer innholdsrikt bildet er, desto mer må tekstalternativet formidle. La bildets kompleksitet avgjøre hvor mye du skriver.
Rask kontroll
Velg den beste planen for et komplekst diagram.
Oppsummering
Du klarte det! Komplekse bilder får en kort alt-tekst samt et ekte tekstalternativ, en datatabell, figcaption eller aria-describedby som formidler innsikten.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Komplekse bilder: Diagrammer, kart og lange beskrivelser» gratis?
Ja – hele teksten i «Komplekse bilder: Diagrammer, kart og lange beskrivelser» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Web Accessibility Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Komplekse bilder: Diagrammer, kart og lange beskrivelser»?
Håndter bilder som trenger mer enn en kort frase. Du øver på Web Accessibility Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Web Accessibility Academy?
Ingen tidligere erfaring er nødvendig. Web Accessibility Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Komplekse bilder: Diagrammer, kart og lange beskrivelser»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Web Accessibility Academy-leksjonen?
Ja. Alle Web Accessibility Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Informativ kontra dekorativ: Den første avgjørelsen
- Skriv alt-tekst som formidler hensikten, ikke pikslene
- Tom alt-tekst og det skjulte dekorative bildet
- Komplekse bilder: Diagrammer, kart og lange beskrivelser