Komplexa bilder: diagram, kartor och långa beskrivningar
Hantera bilder som behöver mer än en kort fras.
Komplexa bilder: diagram, kartor och långa beskrivningar är en gratis lektion i Web Accessibility Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Web Accessibility Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Web Accessibility Academy innehåller totalt 4 lektioner.
När alt inte räcker
Vissa bilder innehåller för mycket information för en kort fras. Diagram, kartor och illustrationer behöver en plan för en längre beskrivning.
Börja med en kort alt
Även en komplex bild får en kort alt-text som namnger den, till exempel ett stapeldiagram över månadsförsäljningen för 2024.
<img src="chart.png" alt="Bar chart of monthly sales for 2024">Lägg sedan till detaljerna
Den korta alt-texten namnger bilden. En närliggande lång beskrivning förmedlar sedan de faktiska data eller samband som den visar.
Beskriv insikten
En bra lång beskrivning förmedlar slutsatsen, till exempel att försäljningen nådde sin topp i december, i stället för att torrt räkna upp varje enskilt värde.
Tabellen som alternativ
För diagram är det ofta bäst att använda en riktig HTML-tabell med samma siffror direkt under bilden.
Länka till en beskrivning
Ni kan placera en lång beskrivning på sidan och koppla den till bilden med aria-describedby som pekar på elementets id.
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure och figcaption
Omslut en bild och dess synliga förklaring med figure och figcaption så att kopplingen blir tydlig för alla.
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>Kartor behöver sina data
En kartbild är oanvändbar utan de underliggande fakta den bygger på. Ange därför en adress, vägbeskrivning eller lista som textekvivalent.
Diagram och flöden
För ett flödesschema beskriver ni stegen och deras ordning i löptext, så att logiken finns kvar även utan den visuella layouten.
Gör den lätt att hitta
Se till att den långa beskrivningen är lätt att hitta. En dold textekvivalent som användarna inte kan nå hjälper inte alls.
Anpassa insatsen efter komplexiteten
Ju mer innehållsrik bilden är, desto mer måste textekvivalenten förmedla. Låt bildens komplexitet avgöra hur mycket ni skriver.
Snabbtest
Välj den bästa planen för ett komplext diagram.
Sammanfattning
Ni klarade det! Komplexa bilder får en kort alt-text plus en riktig textekvivalent, en datatabell, figcaption eller aria-describedby som förmedlar insikten.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Komplexa bilder: diagram, kartor och långa beskrivningar” gratis?
Ja – hela texten till ”Komplexa bilder: diagram, kartor och långa beskrivningar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Web Accessibility Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Web Accessibility Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Komplexa bilder: diagram, kartor och långa beskrivningar”?
Hantera bilder som behöver mer än en kort fras. Ni övar på Web Accessibility Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Web Accessibility Academy?
Du behöver inga förkunskaper. Utbildningen i Web Accessibility Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Komplexa bilder: diagram, kartor och långa beskrivningar”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Web Accessibility Academy-lektionen?
Ja. Varje Web Accessibility Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Informativ eller dekorativ: det första beslutet
- Skriv alt-text som förmedlar syftet, inte pixlarna
- Tom alt-text och den dolda dekorativa bilden
- Komplexa bilder: diagram, kartor och långa beskrivningar