Good Mood

Page Content

Termejä

On olemassa useita termejä, joita käytetään yleisesti kuvaamaan ALT-teksti. Niitä voidaan käyttää eri yhteyksissä, jopa tämän sivuston sisällä.,

• alt text – käsite lisäämällä näytön lukijan ystävällinen teksti vaihtoehtoinen kuvaus kuvasta. Tämä voidaan toteuttaa eri tavoin eri asiakirjatyypeissä.
• alt – attribuutti (HTML) – HTML: ssä ALT-teksti lisätään ALT-attribuuttiin IMG-tunnisteen sisällä.
• ALT ” Tag ” – pikakirjoituksella viittaus ALT-attribuuttiin.

Demo ALT-Teksti

Käyttö

ALT-teksti lisää tekstiä kuvaus, kuvan, Web-sivun, ja olisi käytettävä kaikkia kuvia, graafisia luoteja, ja graafinen vaaka-sääntöjä.,

ALT-teksti on näytetty screen reader-käyttäjät voivat tarjota heille teksti vastaa kuvia. Visual selaimet, kuten Firefox, ALT-teksti näkyy, kun kuva on rikki, tai kun kaikki kuvat on poistettu käytöstä.

WCAG Ohje

WCAG 2.0 Ohje 1.1.1.—”Kaikilla ei-tekstisisällöillä, jotka esitetään käyttäjälle, on tekstivaihtoehto, joka palvelee vastaavaa tarkoitusta.”

Kuvapainikeesimerkit

pitävät osioiden kuvia hypoteettisena koulutuspaikkana, jonka alapuolella kaikki sisältävät koristetekstiä.,
Huomautus: minkä tahansa kuvan tekstin tulisi noudattaa luettavuutta ja kontrastia koskevia ohjeita.

Screen Reader-Lähtö ALT Tag

Jos kuvat eivät lataudu, ALT-teksti näyttää, mitä kuvia olisi sanonut selaimessa, kuten Firefox.

ruudunlukijan ulostulo ilman ALT-tagia

ilman ALT-tekstiä, kukaan ei voi tietää, mikä kuvan sisältö olisi ollut.

Täytäntöönpanon ALT-Määrite

Alla on muutamia esimerkkejä miten, miten ALT-teksti voidaan toteuttaa tilanteesta riippuen.

George Washington Maalaus

Näytä Koodi

Toteuttaa ALT-teksti määritteen IMG tag. Katso esimerkki alla.

Huomautus: suositeltu ALT-tekstin pituus on noin 125 merkkiä. Tämä sopii leuat näytön lukija ALT tekstikenttä. Tämä ei kuitenkaan kuulu WCAG: n suuntaviivoihin.

Kuva Kuvatekstit vs. ALT-Teksti

Tahansa kuvan tietoja, kuten tekijänoikeustiedot, kuvan lähde tai ylimääräistä tietoa tulisi sijoittaa kuvateksti kuvan alla, ei ole ALT-tekstiä. Katso esimerkki alla.

Kuvateksti: Maalaus ”Washington ja Lafayette at Valley Forge”, John Ward Dunsmore 1907. Image courtesy of the Library of Congress.,

Logot

logot, varsinkin logoja, jotka ovat toistuvia, on riittävää tunnistaa, mikä logo se on, ei välttämättä täysin kuvata sitä,

Väärin Käyttää ALT-Tekstiä

Se EI tulisi käyttää:

• käyttöön tooltip teksti,
• tarjota tekijänoikeuden tai lähde tietoa kuvan tai
• välittää supplementaty tietoa graafinen.,
• Ota käyttöön hakusanat (tämä voidaan tehdä otsikoiden hyvällä käytöllä).

Tyhjä Alt-Teksti Koriste Kuvia

Joitakin kuvia käytetään ainoastaan layout tarkoituksiin tai parantaa sisältöä heikkonäköisille käyttäjille ja antaa mitään sisältöä.

ALT tag näitä kuvia voi olla tyhjä ( <alt= ”” > tai <alt=” ”>) niin, että näyttö lukijat sivuuttaa ne kokonaan.,

alla olevassa esimerkissä käytetään näytekuvaa sateenkaarityökalurivistä, ja sen jälkeen joitain esteettömiä ja vaikeasti saavutettavia koodiesimerkkejä.

Rainbow Työkalu Bar

Oletetaan, että Web-puolella oli suunniteltu rainbow toolbar käyttää erillisiä paloja tekstiä.

Huomautus: ALT-määritteen kanssa välilyönti pidetään vähemmän oikea, mutta voi olla ainoa vaihtoehto sallittu joissakin content management systems.

Tiivis Alt-Teksti

Jos tekstin kuvaus on jo säädetty kuvan sisällä tärkein teksti sivun, sitten ALT-tag voi vain tarjota yhteenveto kuva ei ole täydellinen kuvaus.,

Katso Monimutkaisia Kuvia esimerkkejä siitä, miten tätä voidaan käyttää eri tilanteissa.

Esimerkki Teksti Kuvan

Alla on kuva tyydyttynyttä rasvaa molekyylin kanssa 18 hiiltä molekyylejä. Huomaa, että alkuaineiden väliset yksittäiset sidokset tekevät hiiliketjusta suhteellisen suoran.,

Linkit Laajennettu Kuvaukset

joissakin tapauksissa voi olla tarpeen lisätä linkin laajennettu kuvaus kuvan, erityisesti tapauksissa, joissa kuvia käytetään välittää merkittävää sisältöä. On olemassa useita tapoja, joilla tämä voidaan toteuttaa, mukaan lukien LONGDESC tag, D-link tai enemmän avoin linkki pidempi kuvaus. Alla esimerkkejä

Linkki Kuvateksti

Jos tiedot on kriittinen, sitten avoin kuvateksti linkki voi olla paras ratkaisu. Tämä menetelmä antaa selkein osoitus siitä, että pidempi kuvaus on saatavilla.,

Näytä Laajennettu Teksti Kuvaus

D-linkit

Jotkut asiantuntijat suosittelevat käyttää D-linkin signaalin läsnäolo laajennettu teksti kuvaus. Jotkut käyttäjät eivät kuitenkaan välttämättä ole tietoisia yleissopimuksesta. Tätä menetelmää käytetään parhaiten pelkästään täydentävien tietojen antamiseen.

D

LONGDESC-Määrite

Tämä on ominaisuus, joka on piilotettu visuaalisia selaimia, mutta tunnustettu joitakin näytön lukijoita. LONGDESC on paras antaa ylimääräistä yksityiskohtaa, joka parantaa sisältöä, mutta ei ole kriittinen., On huomattava, että LONGDESC on epätäydellinen kannatusta sekä visuaalinen selaimet ja näytön lukijoita, ja on vanhentunut HTML5.

Linkit ja Painikkeet

kuvia käytetään navigoinnin elementtejä käynnistää toimintoja, kuten tulostus, lähettäminen tai tallentaminen, ALT-teksti olisi kuvattava kohde tai toiminto, ei kuva.

Klikattava vs. Ei-Klikattava Penn State Shield

Kun Penn State kilpi on käyttää Web-sivulla, ALT-tekstiä käytetään, riippuu siitä, onko se on klikattava (eli linkkejä Penn State-etusivu) tai ei.,

Jos Penn State kilpi kuvaa käytetään antamaan klikattava linkki kotisivulle, ALT-teksti olisi ilmoitettava kohde (eli ALT=”Penn State Etusivu”) Huomaa, että IMG-tagi on upotettu tagi linkin.

Huomautus: Jos kilpi ei OLE klikattava, niin ALT-teksti voi olla ”Penn State” tai ”Penn State kilpi”.

TYÖKALUVIHJEIDEN Otsikkoattribuuttia

IMG-tekstin OTSIKKOATTRIBUUTTIA voidaan käyttää työkaluvihjeen tuottamiseen näkeville käyttäjille. Ole kuitenkin tietoinen siitä.,

• NIMIKKOATTRIBUUTTIA ei lueta oletusarvoisesti ääneen useimmissa näytön lukijoissa.
• ALT-teksti ei yleensä näy työkaluvihjeenä useimmissa selaimissa.

Jos työkalun kärki tarvitaan heikkonäköisille käyttäjille, sitten molemmat OTSIKKO ja ALT-määritteen kanssa samoja tietoja voidaan käyttää varmistaa, että samat tiedot on toimitettu sekä yleisöä.

Katso tästä esimerkki alla,

Suosikit Sydän-Painiketta Työkalun Kärki

Harkitse version sydämen kuvan, jonka alapuolella voidaan käyttää käyttöliittymän valita suosikki kohteita (esim. suosikki kappaleita tai e-kirjoja).,

Molemmat ALT-teksti ja OTSIKKO määrite on ”Suosikit”

Näytä Koodi