Lopullinen opas tehokkaan alt-tekstin kirjoittamiseen esteettömyyden ja SEO:n kannalta

Kirjoita alt-teksti tiiviinä, kuvaavana lauseena, joka selittää, mitä kuva esittää ja miksi se on tärkeä ihmisille. Jokaiselle kuvälle selkeä kuvaus auttaa avustavia teknologioita välittämään kontekstia näytönlukijoita käyttäville käyttäjille.

Alt-teksti tukee myös hakunäkyvyyttä. Se mahdollistaa hakukoneiden ymmärtää sisältöä sivustollasi ja indeksoida kuvat ympäröivään kuvaukseen linkitettynä. Hyvin laadittu kuvaus voi mahdollistaa tuhansia hakuja ja yhdistää käyttäjät oikeisiin tuotteisiin tai ominaisuuteen. Hyvä alt-teksti edistää saavutettavuutta, vahvistaa käyttökokemusta ja auttaa hakusignaaleja linjaamaan sivun kontekstin kanssa. Pidä kieli yksinkertaisena, vältä sotkua ja anna kuvan kuvailla itseään sivun kontekstissa.

Ohje: Jokaiselle kuvalle kirjoita erityinen kuvaus, joka huomioi aiheen, toiminnon ja kontekstin. Tuotteille nimeä tuote, väri ja pääominaisuus. Käytä tarkkoja termejä geneeristen etikettien sijaan ja tarkista dokumentaatiota ylläpitääksesi johdonmukaisuutta sivuston sisällön strategian kanssa. Tehokkain alt-teksti rikastuttaa sivua toistamatta jo ympäröivässä tekstissä mainittua.

Esimerkki luonnonkuvaukselle: tiksit istumassa oksalla lintulähellä. Alt-teksti voisi olla: "Kaksi tiksä istumassa oksalla lintulähellä puutarhassa." Tämä välittää kohtauksen selkeästi ja auttaa käyttäjiä ymmärtämään kuvan näkemättä sitä. Jotkut kuvat voivat näyttää vain pienen ominaisuuden; kuvaile sen toimintaa kontekstissa, esim. "tiksän istumisen ikoni sivuston otsikossa."

Lopuksi tee nopea tarkistus: luonnoksen jälkeen anna tiimikaverin hyväksyä alt-teksti varmistaaksesi tarkkuuden ja linjauksen dokumentaation kanssa ennen julkaisua sivustolla.

Lopullinen opas alt-tekstin kirjoittamiseen saavutettavuuden ja SEO:n kannalta; Milloin käyttää alt-tekstiä

Aloita tiiviillä, informatiivisella alt-tekstillä, joka kuvaa, mitä kuva välittää ja sen oikea rooli sivulla näytönlukijoille. Tämä lähestymistapa toimii kaikelta pienestä ikonista monimutkaiseen kaavioon ja auttaa käyttäjiä ymmärtämään ympäröivää sisältöä, kun kuvia ei voida tarkastella.

Mitä kuvailla, keskity sisältöön ja toimintoon. Jos kuva on koristeellinen eikä lisää merkitystä, jätä alt-teksti pois tai aseta tyhjä alt-attribuutti, jotta se ei keskeytä virtaa näytöllä.

Käytä alt-tekstiä kuville, jotka välittävät tietoa: kaavioita, kaavioita, valokuvia, logoja tai mitä tahansa visuaalista, joka edistää viestiä. Jos kaavio näyttää trendejä Excel-kaavioissa, kuvaile akselit ja trendilinja; jos aavikkokohtaus tai lintukuva on keskipiste, huomioi aihe ja ympäristö. Kun värit kantavat merkitystä, mainitse ne (esimerkiksi valkoinen tausta lihavalla viivalla). Jos luontoeläimiä kuten tiksäjä ilmestyy kuvaan, kuvaile eläin ja sen toiminto. Pidä rivit yksinkertaisina ja vältä kuvailla joka pikseliä. Suurille kaavioille anna lyhyt kuvaus ja linkki pidempään huomautukseen tai oppaaseen alapuolella.

Kaksi käytännön esimerkkiä auttaa havainnollistamaan käsitystä: "Lintu istumassa lasipaneelissa valkoisella reunuksella aavikkomaiseman yllä" ja "Excel-kaavio näyttää Q2-myynnin nousevan 14 %." Jos kuva sisältää tekstiä, sisällytä sanat tarkalleen lainausmerkeissä (lainausmerkit puhuttuna tekstin ympärillä selventävät tarkoitusta). Koristeelliselle ikonille tai painikkeelle käytä lyhyttä etikettiä kuten "Hakukuvake" tai "Word-dokumenttikuva" pitääksesi navigoinnin sujuvana.

Huomautus luojille: harjoittele monipuolisella visuaalien joukolla ja pidä johdonmukainen tyyli. Tämä opas tukee informatiivisia kuvauksia, auttaa näytönlukijoita käyttäviä katsojia ja tarjoaa selkeän perustan projekteille – olipa työ sivustolla, blogissa tai tuotesivulla. Käytä todellisia esimerkkejä, tarkista vertaisilla ja rakenna yksinkertainen Excel-taulukko muutosten seurantaan ja vakaiden ominaisuuksien heijastamiseen resursseissa.

HTML:ssä alt-teksti ilmestyy img-elementin alt-attribuutissa. Automaattinen alt-teksti voi auttaa, mutta se tulisi tarkistaa tarkkuuden vuoksi, koska konteksti merkitsee. Jos kuva on koristeellinen, jätä alt-teksti pois antaaksesi avustavan teknologian keskittyä merkitykselliseen sisältöön. Yhdistä alt-teksti pidempään kuvaukseen linkitetyssä sivussa tarvittaessa kattaaksesi monimutkaisia visuaaleja, kaavioita tai kaavioita.

Milloin lisätä alt-teksti: Laajuus, laukaisevat tekijät ja käytännön ohjeet

Lisää tiivis alt-teksti jokaiseen merkitykselliseen kuvaan julkaisuaikana tai sisällön päivityksen aikana; tämä auttaa avustavaa teknologiaa käyttäviä käyttäjiä ja parantaa SEO:ta sivustoille, ja se selittää kuvan roolin artikkelissa.

Laajuus: kuvat, jotka välittävät tietoa, sisältävät objektit, kaaviot, ikonit ja kaaviot; otsikossa tai reunuksessa istuvat elementit, kuten oranssi merkki, tulisi sisältää alt-teksti, joka selittää niiden roolin ja mitä ne lisäävät artikkeliin. Jotkut kuvat näyttävät merkitystä vain tekstin parina, joten tiedä, mitkä vaativat alt-tekstiä ja mitkä voivat olla vähemmän kuvaavia.

Laukaisevat tekijät: lisää tai päivitä alt-teksti kun kirjoitat uuden kuvan, korvaat median tai uudelleenkäytät resursseja sivustojen välillä; tarkista, että alt-teksti vastaa näytettyä, erityisesti kaavioille ja kaavioille, ja varmista sen linjaus ympäröivän sisällön virtaan.

Käytännön ohjeet: pidä alt-teksti tiiviinä; perusobjekteille kuvaile toimintoa tai tarkoitusta 1–2 lyhyellä lauseella; kaavioille selitä toiminto ja päävirta; kaavioille tiivistä trendi tai avainarvot; kuville, jotka sisältävät näkyvää tekstiä, näytä teksti alt-kuvauksessa; on tapauksia, joissa geneerinen kuvaus ei riitä – siellä anna erityinen alt, joka kaappaa merkityksen; koristeellisille kuville tai epäselville visuaaleille käytä tyhjää altiä tai lyhyttä huomautusta, joka heijastaa niiden informatiivista roolia.

Tarkistus ja yhteistyö: luojien tulisi tarkistaa editorien ja suunnittelijoiden kanssa, testata alt-tekstiä todellisten käyttäjien kanssa ja varmistaa, että merkitys säilyy laitteiden välillä. Käytä peruslistaa vahvistaaksesi kattavuuden artikkelille ja varmistaaksesi saavutettavuuden pysyvän vahvana.

Määritä alt-teksti: Mitä kuvailla ja mitä jättää pois

Kuvaile kuva yhdessä tiiviissä lauseessa, joka välittää sen tarkoituksen, sitten lisää informatiivinen kuvaus, joka kattaa pääaiheet ja kontekstin. Sisällytä kuka tai mikä ilmestyy, mahdolliset toiminnot ja ympäristö auttaaksesi käyttäjää ymmärtämään kaiken näytetyn.

• Mitä kuvailla
  • Aiheet ja toiminnot: tunnista ihmiset, eläimet (esimerkiksi tiksät istumassa oksalla) tai objektit kuten brändit, tuotteet tai työkalut.
  • Teksti kuvan sisällä: kirjoita lainaukset tai lyhyet fraasit tarkalleen kuten ne ilmestyvät, mukaan lukien numerot tai päivämäärät.
  • Konteksti ja tarkoitus: selitä, miksi kuva on tässä merkinnässä ja mitä se välittää ympäröivästä sisällöstä.
  • Brändi ja tyyli: nimeä brändi ja huomioi visuaalinen tyyli tai ikonografia, jos se selventää merkitystä.
  • Graafinen sisältö: kaavioille tai kaavioille tiivistä trendi, etiketit, akselit ja avaindatapisteet.
  • Tuotteet ja tarjoukset: kuvaile tuote, malli, väri ja mahdolliset näkyvät tarjoukset tai alennukset.
  • Värit, asettelu ja kompositio: mainitse hallitsevat värit, jos ne vaikuttavat ymmärrykseen, sekä mahdolliset näkyvät asetteluvihjeet.
  • Sijainti ja ajoitus: sisällytä, missä kohtaus tapahtuu ja milloin, jos relevanttia.
  • Pituus ja sävy: pidä informatiivisena ja neutraalina, valiten kieltä, joka vastaa käyttäjien odotuksia.
  • Virta ja luettavuus: rakenna kuvaus niin, että näytönlukija voi seurata luonnollisesti, välttäen katkonaisia fraaseja.
• Mitä jättää pois
  • Vain koristeelliset kuvat: jos kuva ei tarjoa informatiivista sisältöä, käytä tyhjää alt-attribuuttia (tyhjä) tai merkitse koristeelliseksi.
  • Ylimääräiset yksityiskohdat: ohita kukkkea tai redundanttia kieltä, joka ei auta ymmärtämistä.
  • Ei-informatiiviset visuaalit: vältä kuvailla taustamelua tai无关 ambiancea, ellei se muuta tulkintaa.
  • Epärelevantti konteksti: jätä pois sivuraiteet, jotka eivät näy kuvassa.
  • Duplikaatti-kuvaukset: älä toista tietoa, jota ympäröivä teksti jo välittää.
• Käytännön ohjeet
  • Ohjeet: noudata WCAG-ystävällisiä käytäntöjä ja tarkista saavutettavuus- ja SEO-tavoitteita vastaan.
  • Pituus: tähtää noin 125–160 merkkiin standardikuville; pitkiä kuvauksia saatetaan tarvita monimutkaisille kaavioille tai virtaaville kohtauksille.
  • Termien valinta: valitse kieli, joka linjaantuu brändiäänen ja kuluttajaodotusten kanssa, mukaan lukien tuotteen nimet ja tarjoukset, kun näkyviä.
  • Johdonmukaisuus: pidä vakaa tyyli merkintöjen välillä, merkiten relevantit yksityiskohdat kuten brändi, tuote ja väri sopivissa paikoissa.
  • Tarkistus: testaa alt-tekstiä nopealla tarkistuksella varmistaaksesi, että se selittää kaiken olennaisen ilman täyteä.
• Esimerkit ja lähestymistapa
  • Merkintäesimerkki: "Tiksät istuvat männyoksalla hämärässä; pehmeä sininen taivas ja mänynneulaset ympärillä; näkyvä bränditarra syöttimessä."
  • Kaavioesimerkki: "Viivakaavio näyttää kuukausittaisen myynnin nousun Q3:een asti, akselit merkitty Revenue (USD) ja Month, värikoodattu tuoteryhmän mukaan."
  • Lainausesimerkki: "Kuva näyttää lainauksen 'Limited time offer' punaisella merkillä; sisällytä tarkka sanamuoto, jos se ohjaa käyttäjän toimintoja.
  • Kuvaava lähestymistapa: selitä kaikki, mitä näkevä käyttäjä huomaisi, sitten vahvista ympäröivän oppaan tai tarkistusmuistiinpanojen kanssa.
• Pidä toiminnallisena
  • Merkintä ja kuvauslinjaus: jokaisen kuvamerkinnän tulisi olla kuvaava alt-teksti, joka vastaa näkyvää sisältöä ja tarkoitusta.
  • Virta ja tiiviys: muotoile lauseita, jotka luetaan sujuvasti, välttäen sotkua ja pitäen kuvauksen informatiivisena.
  • Pitkät muodot: monimutkaisille visuaaleille anna pidempi kuvaus, joka selittää suhteet ja tulokset, sitten tiivistä tiiviillä alt-lauseella.
• Nopea tarkistuslista
  • Selittääkö se kuvan tarkoituksen? Kyllä/Ei
  • Ovatko kaikki olennaiset elementit kuvattu (mukaan lukien lainaukset tai tarjoukset)? Kyllä/Ei
  • Onko koristeellinen sisältö merkitty tyhjäksi? Kyllä/Ei
  • Onko sävy neutraali ja informatiivinen? Kyllä/Ei

Kuvaa visuaalista sisältöä näytönlukijoille: Konkreettiset fraasimallit

Aloita objektilla ja sen toiminnolla, sitten lisää konteksti tiiviillä rivillä. Tämä auttaa lukijaa ymmärtämään kohtauksen yhdellä silmäyksellä ja pitää lukurytmin vakaana, jopa kun sisältö on monimutkaista kuten kaavio tai kaavio.

Valitse mallit sisällön tyypin mukaan: kaaviot ja graafit, kuvat, ohjaimet, tietotaulukot ja koristeelliset elementit. Kaavioille nimeä mittari, aikaväli ja trendi; kuville tunnista aihe ja sen tausta tai yksityiskohdat; ja UI-ohjaimille ilmoita etiketti ja toiminto. Käytä fraaseja, joita lukija voi skannata, ei pitkiä kappaleita, jotka peittävät merkityksen.

SharePointissa ja brändi-resursseissa ylläpidä johdonmukaisuutta uudelleenkäyttämällä pientä joukkoa konkreettisia malleja. Andrée, tunnettu saavutettavan sisällön puolestapuhuja, osoittaa, miten nämä fraasit yhdistyvät lyhyisiin, tarkkoihin kuvateksteihin tukemaan nopeaa lukemista ja helppoa hakua. Pidä kuvatekstit lukijaystävällisinä, ei jaariteltuina, ja muokkaa selkeyden vuoksi, kun jalostat alt-tekstiäsi tarkistusprosessissa.

Malli	Esimerkki	Huomautukset
Kaavio/Kaavio: objekti + mittari + jakso + trendi	Kaavio näyttää Q2-myynnin nousevan 1 000:sta 1 500:aan yksikköön jakson Q2 aikana	Nimeää kaavion, mittarin, vaihteluvälin tuhansissa tarvittaessa; vältä täyteä.
Kuva/Illustratio: aihe + tausta + yksityiskohdat	Tuotekuva näyttää brändin valkoisella taustalla pakkausyksityiskohdilla	Keskittyy aiheeseen ja kontekstiin; tausta selventää sijoittelua; mainitse vain avainyksityiskohdat.
UI-ohjain: etiketti + toiminto	Napsauta ”Muokkaa” avataksesi kohteen kentät	Käytä todellista etikettiä; korosta kohdennetut kentät; pidä toiminnallisena.
Tietotaulukko: kentät + arvot + jakso	Taulukko luettelee kentät: Myynti, Alue, Jakso; arvot näyttävät tuhansien yksikköyhteenvetoja	Kääntää taulukkotiedon lineaariseksi lauseeksi; sisällytä jakso, kun relevanttia.
Koristeellinen/välistä: koristeellinen elementti + alt-tila	Koristeellinen välistäviiva: alt-teksti on tyhjä	Käytä tyhjää, kun elementti lisää asettelua, ei sisältöä; vältä kuvailla visuaaleja, jotka eivät välitä merkitystä.
Narratiivinen kuvateksti: tapaus + lukeminen + haku	Tässä tapauksessa lukija voi skannata yhteenvedon lukemisen aikana käyttäen hakua avaintermien paikantamiseen	Anna nopea ankkuri gistille ja salli termipohjainen haku.
Ihmiset: nimi + rooli + toiminto	Andrée tarkistaa kaavion vahvistaakseen tietojen tarkkuuden	Käytä oikeita nimiä ja rooleja lukijan suuntaamiseksi; isoita nimet sopivasti.

SEO-huomioita: Avainsanojen tasapainottaminen ilman täyttöä

Suositus: Keskity selkeyteen ensin; sisällytä yksi pääavainsana, joka tarkasti heijastaa kuvaa, ja lisää tukitermejä vain, kun ne parantavat merkitystä käyttäjille. Tämä opas tarjoaa käytännön ohjeita kirjoittajille SEO:n ja saavutettavuuden tasapainottamiseen alt-tekstissä.

Käytännössä jokaisen alt-tekstin tulisi toimia siellä, missä lukijat odottavat sen ilmestyvän ja edistää ymmärtämistä, ei täyttää tilaa. Hyvin laadittu alt-teksti auttaa sekä vammaisia käyttäjiä että hakukoneita toimittamalla merkityksellisen yhteenvedon kuvan roolista artikkelissa.

Alt-teksti voi olla pidempi monimutkaisille kaavioille, mutta pidä ydinkokemus ehjänä ja vältä täyteä.

• Ohjeet pääavainsanalle: Määritä yksi relevantti avainsana ja sijoita se alt-tekstin alkuun, kun kuvan sisältö sallii.
• Luonnollinen kieli: Kirjoita alt-teksti lauseena tai tiiviinä fraasina, jota käyttäjä saattaisi sanoa; tämä kirjoitustyyli parantaa luettavuutta vammaisille käyttäjille ja auttaa hakukoneita tulkitsemaan kontekstia.
• Sananraja: Tähtää 125 merkkiin tai vähempään; tämä estää avainsanätäytön ja pitää teksti luettavana samalla tukien hakutarkoitusta.
• Kontekstiherkät valinnat: Huomioi osio ja tilanne; kaavioille kuvaile dataa tai virtaa; valokuville tunnista aihe ja toiminto; ikoneille selitä toiminto tai merkitys.
• Linkki- ja napsautusvaikutukset: Jos kuva on linkki, kuvaile kohde ja mitä napsautuksella tapahtuu auttaaksesi käyttäjiä päättämään etenemisestä.
• Koristeelliset kuvat: Käytä tyhjää alt-attribuuttia (alt="") visuaaleille, jotka eivät tuo tietoa; tämä minimoi merkityksettömän kohinan näytönlukijoille.
• Listalähestymistapa: Käsittele jokainen alt-teksti osana valintaruudullista prosessia työvirrassasi; tämä auttaa tiimejä hyväksymään ja seuraamaan muutoksia.
• Testaus ja palaute: Testaa näytönlukijoilla, kerää inputtia kehittäjiltä ja käyttäjiltä, ja hyväksy muutoksia, jotka parantavat ymmärtämistä.
• Mikä on tarkoitus: Kysy aina, mikä on kuvan tarkoitus ympäröivässä sisällössä, ja varmista, että alt-teksti heijastaa sitä tavoitetta ilman redundanttia.
• Sananvalinta ja tyhjä tila: Suosi tarkkoja termejä täytteen sijaan; pidä rauhallinen rytmi ja käytä runsaasti tyhjää tilaa tekstin ympärillä skannauksen helpottamiseksi.

Tässä auttaakseni, tiivis viite kirjoittajille: linjaa alt-teksti sisällön kontekstin kanssa ja käytä tätä opasta artikkelin saavutettavuuden ja SEO-tasapainon parantamiseen.

Napsauta tästä nähdäksesi listan.

Yhteenveto: Tämä lähestymistapa parantaa artikkelin luettavuutta, tukee vammaisia käyttäjiä ja säilyttää linkin alt-tekstin ja sivun relevanssin välillä ilman suorituskyvyn uhraamista.

Alt-teksti eri kuvatyypeille: Valokuvat, kaaviot, logot, infografiikat

Merkitse valokuvat tiiviillä, aihekeskeisellä alt-tekstillä, joka kuvaa kuka tai mikä on kehyksessä ja miksi se merkitsee sivulla. Kirjoita avustavan teknologian käyttäjille ja linjaa kuvaus lähellä olevaan kopioon, jotta lukijat tietävät kuvan tarkoituksen.

Valokuvat: Aloita pääaiheella, sitten lisää konteksti kuten ympäristö ja toiminto. Pidä pituus tiukkana, tähtää 90–120 merkkiin. Jos melu- tai muu äänimerkki ilmestyy, huomioi se suluissa. Jos kuva sisältää puhetta, sisällytä lyhyt lainauksen pätkä – ja sulje se lainausmerkeihin. Esimerkki: "Opettaja kirjoittaa valkotaululle kun oppilaat kuuntelevat." Tämä lähestymistapa auttaa käyttäjiä tietämään koko hetken ja tukee hakua ja navigointia. Kohtauksen selkeä kuvaus myös auttaa etikettien johdonmukaisuudessa sivujen välillä.

Kaaviot: Kuvaa kaavion tarkoitus ja tiedon virta, ei joka etikettiä. Ilmoita tavoite, avainvaiheet ja miten ne yhdistyvät. Jos akselit tai kategoriat ilmestyvät, mainitse ne lyhyesti (esim. "x-akseli: aika; y-akseli: tuotto"). Vältä pitkän tekstin duplikaatiota kuvasta. Esimerkki: "Prosessivirta syötteestä ulostuloon neljällä vaiheella: syöte, analyysi, päätös, toiminto." Kaaviolle pidä fokus suhteissa ja tuloksissa.

Logot: Tunnista brändi ja, jos merkityksellistä, logon symboliikka. Suosi "Brändinimi logo" tai "Brändinimi sanamerkki." Jos logo on koristeellinen, jätä alt-attribuutti tyhjäksi ja anna paneelin ilmoittaa koristeeksi käyttäjille. Käytä johdonmukaista mallia sivujen välillä, jotta käyttäjät tietävät mitä odottaa ja voivat luottaa hakutuloksiin brändin esiin tuomiseksi.

Infografiikat: Tarjoa tiivis yhteenveto päähavainnoista, avainluvut selvällä kielellä. Älä duplikoi pitkää tekstiä graafista; vedä tarvitsemasi luvut alt-tekstiin. Jos lainaus välittää vaikutusta, sisällytä se lainausmerkeissä. Esimerkiksi: "42 % nousu käyttöönotossa." UI-paneelissa valintaruutu voisi vaihtaa lyhyen alt-tekstin pidemmän version välillä, joten sekä mieli että erilaisia tarpeita omaavat käyttäjät saavat tarvitsemansa. Erilaisissa tilanteissa tämä lähestymistapa pitää lukijan kiinnostuksen korkeana ja varmistaa saavutettavuuden kaikille käyttäjille; nopea alt-teksti sisältäisi olennaiset luvut ja lyhyen otoksen.