HTML <img> alt-ominaisuus
Määrittely ja käyttö
alt Ominaisuus on pakollinen, ja se määrittää korvaavat tekstit kuvan näyttämättä ollessa.
Jos käyttäjä ei voi nähdä kuvaa seuraavista syistä, alt-ominaisuus voi tarjota korvaavia tietoja kuvasta:
- Verkko nopeus on liian hidas
- src-ominaisuuden virhe
- Selain poistaa kuvat
- Käyttäjä käyttää näyttöluettajaa
<img>-elementin alt-ominaisuus määrittää korvaavat tekstit, jotka näytetään selaimessa, kun kuvaa ei voida näyttää tai kun käyttäjä poistaa kuvien näyttämisen.
Suosittelemme vahvasti, että käytät tätä ominaisuutta jokaisessa dokumentin kuvassa. Näin käyttäjä voi silti nähdä, mitä hänen menetti, vaikka kuva ei näkyisi. Lisäksi vammaisille alt-ominaisuus on usein ainoa tapa ymmärtää kuvan sisältö.
Vinkki:Jos haluat luoda kuvalle työkaluvihkon, käytä title-ominaisuus!
Vinkit ja huomautukset
Huomautus:alt Ominaisuuden arvo on enintään 1024 merkin pituinen merkkijono, joka sisältää välilyönnit ja punteet. Tämä merkkijono on sisällytettävä lainausmerkeissä. Tässä alt-tekstissä voidaan sisällyttää erityismerkkien entiteettimerkinnät, mutta ei muita luokkia merkintöjä, erityisesti ei minkäänlaisia tyylejä.
Huomautus:Kun käyttäjä siirtää hiiren kuvaelementin päälle, Internet Explorer näyttää alt-ominaisuuden arvon. Tämä käyttäytyminen ei ole oikein. Kaikki muut selaimet ovat lähentyneet standardia, näyttämällä korvaavat tekstit vain silloin, kun kuvaa ei voida näyttää.
Vinkki:Jos haluat luoda kuvalle työkaluvihkon, käytä title-ominaisuus.
Esimerkki
Esimerkki 1
<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulip" />
Jos kuvaa ei voida näyttää, selain näyttää korvaavat tekstit, kuten tässä:
Lisäksi, kun käyttäjä siirtää hiiren kuvan päälle, uudet selaimet näyttävät kuvaavien tekstien tekstiruudun. Seuraava koodi lisää kuvauksen alt-ominaisuuteen:
Voit siirtää hiiren alla olevaan kuvaan ja katso vastaava vaikutus:
Punaisessa ympyrössä oleva tekstiruutu on se, mikä IE7-selaimessa näkyy, kun käyttäjä siirtää hiiren kuvan päälle:
Esimerkki 2
Määritetty korvaavat tekstit kuvaan:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syntaksi
<img alt="Teksti">
Ominaisuuden arvo
| Arvo | Kuvaus |
|---|---|
| Teksti |
Määritellään kuvan korvaavat tekstit. Alt-tekstin käyttöperiaatteet:
|
Selaimen tuki
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Tuki | Tuki | Tuki | Tuki | Tuki |
