Komplekse billeder: Diagrammer, kort og lange beskrivelser
Håndtér billeder, der kræver mere end en kort sætning.
Komplekse billeder: Diagrammer, kort og lange beskrivelser er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Når alt ikke er nok
Nogle billeder indeholder for meget information til en kort formulering. Diagrammer, kort og illustrationer kræver en plan for en længere beskrivelse.
Begynd med en kort alt
Selv et komplekst billede får en kort alt-tekst, der navngiver det, f.eks. et søjlediagram over det månedlige salg i 2024.
<img src="chart.png" alt="Bar chart of monthly sales for 2024">Tilføj derefter detaljerne
Den korte alt-tekst navngiver billedet, mens en lang beskrivelse i nærheden formidler de faktiske data eller sammenhænge, det viser.
Beskriv indsigten
En god lang beskrivelse giver hovedpointen, f.eks. at salget toppede i december, i stedet for en tør liste over hver eneste værdi.
Datatabellen som alternativ
For diagrammer er det bedste alternativ ofte en rigtig HTML-tabel med de samme tal lige under grafikken.
Link til en beskrivelse
Du kan placere en lang beskrivelse på siden og forbinde den med aria-describedby, der peger på elementets id.
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure og Figcaption
Pak et billede og dets synlige forklaring ind i figure og figcaption, så sammenhængen er tydelig for alle.
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>Kort skal have deres data
Et kortbillede er nytteløst uden de underliggende oplysninger, så giv en adresse, rutevejledning eller liste som tekstlig ækvivalent.
Diagrammer og forløb
For et flowchart skal du beskrive trinnene og deres rækkefølge i prosa, så logikken bevares uden det visuelle layout.
Gør den let at finde
Sørg for, at den lange beskrivelse er nem at finde. En skjult tekstlig ækvivalent, som brugerne ikke kan nå, hjælper slet ikke.
Tilpas indsatsen til kompleksiteten
Jo mere detaljeret billedet er, desto mere skal din tekstlige ækvivalent kunne. Lad billedets kompleksitet afgøre, hvor meget du skriver.
Hurtigt tjek
Vælg den bedste plan for et komplekst diagram.
Opsummering
Du gjorde det! Komplekse billeder får en kort alt-tekst plus en reel tekstlig ækvivalent, en datatabel, figcaption eller aria-describedby, der formidler indsigten.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Komplekse billeder: Diagrammer, kort og lange beskrivelser” gratis?
Ja — hele teksten til “Komplekse billeder: Diagrammer, kort og lange beskrivelser” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Komplekse billeder: Diagrammer, kort og lange beskrivelser”?
Håndtér billeder, der kræver mere end en kort sætning. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Komplekse billeder: Diagrammer, kort og lange beskrivelser”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Informativ eller dekorativ: Den første beslutning
- Skriv alt-tekst, der formidler formålet – ikke pixels
- Tom alt-tekst og det skjulte dekorative billede
- Komplekse billeder: Diagrammer, kort og lange beskrivelser