Monimutkaiset kuvat: kaaviot, kartat ja pitkät kuvaukset
Käsittele kuvia, jotka tarvitsevat lyhyttä ilmausta enemmän.
Monimutkaiset kuvat: kaaviot, kartat ja pitkät kuvaukset on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Kun alt ei riitä
Jotkin kuvat sisältävät lyhyeen ilmaukseen liikaa tietoa. Kaaviot, kartat ja diagrammit tarvitsevat pidemmän kuvauksen suunnitelman.
Aloittakaa lyhyellä alt-tekstillä
Monimutkaisellekin kuvalle annetaan lyhyt alt-teksti, joka nimeää sen, kuten vuoden 2024 kuukausittaisen myynnin pylväskaavio.
<img src="chart.png" alt="Bar chart of monthly sales for 2024">Lisää sitten yksityiskohdat
Lyhyt alt-teksti nimeää kuvan, ja sen lähellä oleva pitkä kuvaus välittää sen esittämät varsinaiset tiedot tai suhteet.
Kuvaa keskeinen havainto
Hyvä pitkä kuvaus kertoo keskeisen havainnon, kuten sen, että myynti saavutti huippunsa joulukuussa, eikä luettele kuivasti jokaista arvoa.
Tietotaulukko varavaihtoehtona
Kaavioiden paras vaihtoehto on usein varsinainen HTML-taulukko, jossa samat luvut esitetään heti kuvan alapuolella.
Linkittäminen kuvaukseen
Voit sijoittaa pitkän kuvauksen sivulle ja yhdistää sen kuvaan käyttämällä aria-describedby-määritettä, joka viittaa elementin id-tunnisteeseen.
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure ja figcaption
Ympäröi kuva ja sen näkyvä selitys figure- ja figcaption-elementeillä, jotta niiden yhteys on selvä kaikille.
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>Kartat tarvitsevat tietonsa
Karttakuva on hyödytön ilman sen taustalla olevia tietoja, joten tarjoa tekstivastineena osoite, reittiohjeet tai luettelo.
Kaaviot ja prosessit
Kuvaa vuokaavion vaiheet ja niiden järjestys tekstinä, jotta logiikka säilyy ilman visuaalista asettelua.
Pidä se löydettävänä
Varmista, että pitkä kuvaus on helppo löytää. Käyttäjien saavuttamattomissa oleva piilotettu tekstivastine ei auta lainkaan.
Sovita vaiva monimutkaisuuteen
Mitä sisällöltään rikkaampi kuva on, sitä enemmän tekstivastineelta vaaditaan. Anna kuvan monimutkaisuuden määrittää, kuinka paljon kirjoitat.
Pikatarkistus
Valitse paras toteutustapa monimutkaiselle kaaviolle.
Kertaus
Onnistuit! Monimutkaiset kuvat saavat lyhyen alt-tekstin sekä varsinaisen tekstivastineen, tietotaulukon, figcaption-kuvatekstin tai aria-describedby-määritteen, joka välittää keskeisen havainnon.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Monimutkaiset kuvat: kaaviot, kartat ja pitkät kuvaukset” ilmainen?
Kyllä – oppitunnin ”Monimutkaiset kuvat: kaaviot, kartat ja pitkät kuvaukset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Monimutkaiset kuvat: kaaviot, kartat ja pitkät kuvaukset”?
Käsittele kuvia, jotka tarvitsevat lyhyttä ilmausta enemmän. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Monimutkaiset kuvat: kaaviot, kartat ja pitkät kuvaukset”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Informatiivinen vai koristeellinen: ensimmäinen päätös
- Kirjoita alt-teksti, joka välittää tarkoituksen eikä pikseleitä
- Tyhjä alt-teksti ja piilotettu koristekuva
- Monimutkaiset kuvat: kaaviot, kartat ja pitkät kuvaukset