alt-attribuutti tarjoaa tekstivaihtoehdot kuvakuvan sisällön tai toiminnon kuvaamiseen. Se palvelee käyttäjiä ja työkaluja, jotka eivät voi nähdä kuvaa.
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt-attribuutti tarjoaa tekstivaihtoehdot kuvakuvan sisällön tai toiminnon kuvaamiseen. Se palvelee käyttäjiä ja työkaluja, jotka eivät voi nähdä kuvaa.
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt-tekstin ääneen, joten sokea käyttäjä tietää, mitä kuva välittää. Ilman sitä he kuulevat tiedoston nimen tai vain "kuva" — hyödytön.alt-tekstin rikkoutuneen kuvan kuvakkeen sijaan.alt-tekstiä kuvien ymmärtämiseen ja indeksointiin (kuvien SEO).<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
alt="" (tyhjä, mutta läsnä) on tärkeä: se kertoo näytönlukijoille "tämä on koristeellinen, ohita se." alt-attribuutin kokonaan pois jättäminen on eri asia — silloin lukija voi ilmoittaa tiedoston nimen.
alt on kuville tärkein saavutettavuusattribuutti ja vaatimus saavutettavuusstandardien (WCAG) mukaan.
Se tekee sisällöstä havaittavaa näkövammaisille käyttäjille, tarjoaa varasuunnitelman kuvien rikkoutuessa ja auttaa SEO:ssa — kuvaile, mitä kuva tarkoittaa yhteydessä, ja käytä alt="" puhtaasti koristeellisille kuville.