Kodėl alt tekstas vis dar svarbus 2024-aisiais
Kai kurie kolegos mano, kad alt tekstas – tai kažkoks reliktinis dalykas iš ankstyvųjų interneto dienų, kai svetainės atrodė kaip Word dokumentai su mėlynomis nuorodomis. Tačiau realybė visai kitokia. Dirbu su SEO ir prieinamumo klausimais jau daugiau nei septynerius metus, ir galiu pasakyti – alt tekstas šiandien svarbesnis nei bet kada anksčiau.
Pirma, turime suprasti, kad alt atributas (alternative text) nėra tik techninė formalybė. Tai tiltas tarp vizualinio turinio ir tų, kurie jo negali matyti – ar tai būtų žmonės su regos negalia, naudojantys ekrano skaitytuvus, ar Google robotai, kurie vis dar nemoka „matyti” vaizdų taip, kaip mes. Taip, yra AI įrankiai, kurie atpažįsta objektus nuotraukose, bet jie toli gražu nėra tobuli.
Antra, alt tekstas veikia kaip atsarginė kopija. Kai vaizdas neįsikelia dėl lėto interneto, serverio problemų ar netgi dėl to, kad failas buvo perkeltas į kitą vietą – vartotojas mato alt tekstą. Tai geriau nei tuščias kvadratas su klaustuku.
Kaip rašyti alt tekstą, kuris neerzina
Didžiausia problema, su kuria susiduriu peržiūrėdamas klientų svetaines – alt tekstai, kurie akivaizdžiai rašyti robotams, o ne žmonėms. Pavyzdžiui: „raudona suknelė moterims pirkti internetu pigiai akcija vasara 2024”. Tai ne alt tekstas, tai SEO šlamštas.
Geras alt tekstas turėtų būti toks, kokį jūs pasakytumėte draugui telefonu, aprašydami, ką matote. Jei nuotraukoje – šuo, bėgantis parke, tai ir parašykite: „Auksaspalvis retriveris bėga žolėje su oranžiniu kamuoliu nasruose”. Ne „šuo”, ne „gyvūnas lauke”, ir tikrai ne „šuo pirkti šunų maistas šunų dresuotojas”.
Štai keletas praktinių gairių, kurias taikau kiekvieną dieną:
Būkite konkretūs, bet ne perdėtai: Nereikia aprašyti kiekvieno pikselio. Jei produkto nuotraukoje matosi fono detalės, kurios nesvarbios – praleiskite jas. Svarbu tai, kas aktualu kontekstui.
Kontekstas sprendžia viską: Tas pats CEO portretas gali turėti skirtingą alt tekstą priklausomai nuo to, kur jis naudojamas. „Apie mus” puslapyje: „Įmonės CEO Jonas Jonaitis biure”. Naujienų straipsnyje apie apdovanojimą: „Jonas Jonaitis laiko Metų vadovo apdovanojimą”.
Vengite „nuotrauka”, „vaizdas” ir panašių žodžių: Ekrano skaitytuvas jau praneša, kad tai vaizdas. Nereikia pradėti su „Nuotrauka, kurioje…”. Tiesiog pradėkite nuo aprašymo.
Techniniai niuansai, kuriuos verta žinoti
Alt atributas HTML’e atrodo paprasta: <img src="katinas.jpg" alt="Pilkas katinas miega ant klaviatūros">. Bet yra keletas dalykų, kuriuos daugelis praleidžia.
Pirma, alt atributas yra privalomas pagal HTML standartus. Ne rekomenduojamas – privalomas. Jei vaizdas dekoratyvinis ir neturi prasminio turinio, vis tiek turite įtraukti alt atributą, bet palikti jį tuščią: alt="". Tai sako ekrano skaitytuvui: „Praleisk šį vaizdą, jis nereikšmingas”. Tai visiškai skiriasi nuo alt atributo nebuvimo, kuris verčia skaitytuvą bandyti perskaityti failo pavadinimą (ir niekas nenori girdėti „IMG_20240315_final_final_v2.jpg”).
Antra, alt teksto ilgis. Techniškai nėra griežto limito, bet dauguma ekrano skaitytuvų gerai dirba su maždaug 125 simbolių tekstais. Jei reikia ilgesnio aprašymo – naudokite longdesc atributą arba tiesiog įtraukite aprašymą į šalia esantį tekstą.
Trečia, specialūs simboliai. Jei naudojate kabutes alt tekste, įsitikinkite, kad jos nekonfliktuoja su HTML sintakse. Naudokite HTML entities arba viengubas kabutes atributo riboms: alt='Jis pasakė "labas"'.
SEO aspektas be mitų
Taip, Google naudoja alt tekstą kaip vieną iš veiksnių indeksuojant vaizdus. Bet ne taip, kaip daugelis mano. Neveikia schema „įkišu daugiau raktažodžių = geresnė pozicija”. Google algoritmai 2024-aisiais jau pakankamai protingi atpažinti keyword stuffing.
Ką tikrai vertina paieškos sistemos:
Relevantiškas aprašymas: Alt tekstas turėtų atitikti puslapio temą ir vaizdą. Jei straipsnis apie Python programavimą, o vaizdas rodo kodo pavyzdį – aprašykite, ką tas kodas daro, ne tiesiog „Python kodas”.
Natūralus kalbos naudojimas: Rašykite normaliai. Jei jūsų alt tekstas skamba kaip robotas, bandantis apsimesti žmogumi, Google tai pastebės.
Unikalumas: Nedubliuokite to paties alt teksto keliems skirtingiems vaizdams. Kiekvienas vaizdas unikalus – alt tekstas taip pat turėtų būti.
Praktinis patarimas iš asmeninės patirties: jei optimizuojate e-parduotuvę su šimtais produktų nuotraukų, sukurkite šabloną, bet palikite vietos variacijoms. Pavyzdžiui: „[Produkto pavadinimas] [spalva] [kampas/pozicija]”. Tai „Odiniai batai juodi priekinis vaizdas”, „Odiniai batai juodi šoninis vaizdas” ir t.t.
Automatizavimas ir AI pagalba
Žinau, ką galvojate: „Turiu 5000 vaizdų svetainėje, nenoriu rašyti kiekvieno alt teksto rankomis”. Suprantu. Čia į pagalbą ateina automatizavimas, bet su išlyga.
Yra keletas įrankių, kurie gali padėti:
AI vaizdų atpažinimo servisai: Google Cloud Vision, Azure Computer Vision, AWS Rekognition – visi jie gali sugeneruoti bazinį vaizdų aprašymą. Naudoju juos kaip pradinį tašką, bet niekada kaip galutinį rezultatą. AI gali pasakyti „žmogus su šunimi lauke”, bet nepasakys, kad tai jūsų įmonės įkūrėjas su savo šunimi pirmąją darbo dieną – o būtent tokia informacija daro alt tekstą vertingą.
CMS plaginai: WordPress’ui yra tokių įrankių kaip WP Accessibility, kurie gali automatiškai užpildyti tuščius alt atributus remiantis failo pavadinimu ar vaizdo antrašte. Tai geriau nei nieko, bet vis tiek reikia rankinės peržiūros.
Masinis redagavimas: Jei naudojate sistemą kaip Contentful ar Sanity, galite sukurti skriptus, kurie masiškai atnaujina alt tekstus pagal tam tikrą logiką. Pavyzdžiui, visoms produktų nuotraukoms pritaikyti vienodą formatą.
Mano workflow’as paprastai toks: AI sugeneruoja pradinį aprašymą → aš peržiūriu ir pritaikau kontekstui → pridedu reikalingą informaciją, kurios AI negalėjo žinoti → patikrinu, ar skamba natūraliai. Užtrunka gal 30 sekundžių vienam vaizdui, bet rezultatas nepalyginamai geresnis nei grynai automatinis.
Specialūs atvejai ir išimtys
Ne visi vaizdai vienodi, ir ne visiems reikia to paties požiūrio į alt tekstą.
Dekoratyvūs vaizdai: Foniniai paveikslėliai, skyrikliai, gryni dizaino elementai – jiems reikia tuščio alt atributo (alt=""). Pavyzdžiui, jei turite straipsnį apie kelionę į Italiją ir tarp pastraipų įterpiate dekoratyvų Italijos vėliavos vaizdą – tai greičiausiai dekoratyvas. Bet jei ta vėliava yra straipsnio antraštės dalis ar nešioja prasmę – tada reikia aprašymo.
Kompleksiniai grafikai ir diagramos: Čia alt teksto neužtenka. Jei turite sudėtingą infografiką ar duomenų vizualizaciją, alt tekstas turėtų suteikti bendrą supratimą („Stulpelinė diagrama, rodanti pardavimų augimą 2020-2024 metais”), o pilnas duomenų aprašymas turėtų būti prieinamas tekstu šalia arba per longdesc.
Tekstas vaizduose: Jei vaizdas turi teksto (pvz., citata, statistika, pranešimas), alt tekstas turėtų įtraukti tą tekstą. Pavyzdžiui, jei turite vaizdą su užrašu „70% klientų rekomenduoja mūsų paslaugas”, alt tekstas turėtų būti bent „70% klientų rekomenduoja mūsų paslaugas” arba su kontekstu: „Klientų atsiliepimų statistika: 70% klientų rekomenduoja mūsų paslaugas”.
Nuorodos vaizdai: Jei vaizdas yra nuoroda (pvz., logotipas, vedantis į pagrindinį puslapį), alt tekstas turėtų aprašyti nuorodos paskirtį, ne vaizdą. Vietoj „Įmonės logotipas” – „Grįžti į pagrindinį puslapį” arba tiesiog „Pagrindinis puslapis”.
Kaip audituoti esamą svetainę
Gerai, turite svetainę, kuri veikia jau kelerius metus, ir įtariate, kad alt tekstų situacija ne itin rožinė. Kaip tai patikrinti ir sutvarkyti?
Pradėkite nuo automatinių įrankių. Mano favoritai:
WAVE (WebAIM): Nemokamas įrankis, kuris parodo visus vaizdus be alt teksto arba su tuščiu alt. Veikia kaip naršyklės plėtinys arba online įrankis.
Screaming Frog SEO Spider: Jei turite didesnę svetainę, šis įrankis gali ištraukti visus vaizdus ir jų alt tekstus į Excel lentelę. Tada galite masiškai peržiūrėti ir redaguoti.
Google Search Console: Vaizdų ataskaitoje galite pamatyti, kurie jūsų vaizdai indeksuojami ir kaip jie rodomi paieškoje. Jei matote keistus ar tuščius aprašymus – laikas tvarkyti.
Rankinis testavimas su ekrano skaitytuvais: Įsijunkite NVDA (Windows) arba VoiceOver (Mac) ir pabandykite naršyti savo svetainę. Tai atidarys akis – greitai suprasite, kur alt tekstai trūksta arba yra prastos kokybės.
Kai turite sąrašą problemų, prioritizuokite:
1. Pirma tvarkykite vaizdus be alt atributo – tai kritinė klaida
2. Tada dekoratyvius vaizdus su nereikalingu alt tekstu – pakeiskite į tuščią
3. Toliau – vaizdus su prastos kokybės alt tekstais (per trumpi, per bendrini, su keyword stuffing)
4. Galiausiai – optimizuokite gerus alt tekstus, kad būtų dar geresni
Realūs pavyzdžiai iš praktikos
Teorija teorija, bet pažiūrėkime konkrečių pavyzdžių. Štai keletas situacijų, su kuriomis susidūriau dirbdamas su klientais.
E-komercija – produktų nuotraukos:
Blogai: alt="batai"
Vidutiniškai: alt="vyriški batai"
Gerai: alt="Vyriški juodi odiniai batai su raišteliais"
Puikiai: alt="Vyriški klasikiniai juodi odiniai batai su raišteliais, priekinis vaizdas"
Naujienos – straipsnio iliustracija:
Blogai: alt="konferencija"
Vidutiniškai: alt="žmonės konferencijoje"
Gerai: alt="Dalyviai klauso pranešimo TechSummit 2024 konferencijoje"
Puikiai: alt="Dalyviai klauso pranešimo apie dirbtinį intelektą TechSummit 2024 konferencijoje Vilniuje"
Apie mus – komandos nuotrauka:
Blogai: alt="komanda"
Vidutiniškai: alt="mūsų komanda"
Gerai: alt="DevBridge komanda biure"
Puikiai: alt="DevBridge komanda švenčia 10-ies metų jubiliejų biure Vilniuje, 2024 m."
Pastebėjote šabloną? Kuo daugiau konteksto, tuo geriau, bet be perkrovimo nereikalinga informacija. Nereikia rašyti „Nuotrauka, kurioje matosi DevBridge komanda, susidedanti iš 15 žmonių, iš kurių 8 vyrai ir 7 moterys…” – tai jau per daug.
Prieinamumas kaip prioritetas, ne afterthought
Čia noriu būti rimtas minutę. Alt tekstas nėra tik SEO triukas ar techninė formalybė. Tai prieinamumo klausimas, o prieinamumas – tai žmogaus teisių klausimas.
Pagal Pasaulio sveikatos organizacijos duomenis, apie 2.2 milijardo žmonių pasaulyje turi regėjimo sutrikimų. Tai ne maža nišinė auditorija – tai didžiulė žmonių grupė, kuri nori ir turi teisę naudotis internetiniu turiniu lygiai taip pat kaip ir mes.
Lietuvoje turime Neįgaliųjų teisių konvenciją ir ES direktyvas dėl skaitmeninių produktų prieinamumo. Nuo 2025 m. birželio daugelis organizacijų turės atitikti griežtesnius prieinamumo reikalavimus. Alt tekstas – tai bazė, minimumas, nuo kurio prasideda prieinamas web dizainas.
Kai rašau alt tekstus, visada įsivaizduoju konkretų žmogų – gal programuotoją, kuris naudoja ekrano skaitytuvą, gal dizainerę su daltonizmu, gal tiesiog ką nors su lėtu internetu kaime. Ar mano alt tekstas padeda jiems suprasti turinį? Ar jie gauna tą pačią informaciją kaip ir matantys vartotojai?
Jei atsakymas „ne” – reikia gerinti.
Ateities perspektyvos ir ko tikėtis
Technologijos keičiasi, ir alt tekstų ateitis irgi. Štai keletas tendencijų, kurias stebiu:
AI generuojami alt tekstai tampa geresni: GPT-4 Vision ir panašūs modeliai jau dabar gali gana tiksliai aprašyti vaizdus. Bet jie vis dar neturi konteksto apie jūsų verslą, prekės ženklą ar specifines detales. Manau, ateityje matysime hibridinį požiūrį – AI generuoja bazę, žmogus prideda kontekstą.
Automatinis alt tekstų vertimas: Jei turite daugiakalbę svetainę, alt tekstų vertimas dažnai praleidžiamas. Matau, kad CMS sistemos pradeda integruoti automatinį vertimą, bet kokybė dar kelia klausimų.
Dinaminis alt tekstas: Įdomus konceptas – alt tekstas, kuris keičiasi priklausomai nuo vartotojo konteksto. Pavyzdžiui, tas pats produkto vaizdas gali turėti skirtingą alt tekstą priklausomai nuo to, ar vartotojas atėjo iš paieškos, socialinių tinklų ar tiesiogiai.
Geresnė integracija su CMS: Matau, kad naujos CMS versijos (WordPress 6.x, Drupal 10, headless CMS) skiria daugiau dėmesio prieinamumui. Geriau priminimų, validacijos, net AI pasiūlymų tiesiai redaktoriuje.
Bet nepaisant visų šių technologijų, pagrindinis principas lieka tas pats: alt tekstas turi būti parašytas žmogui, ne robotui. Jei laikysitės šio principo, būsite teisingame kelyje nepriklausomai nuo to, kaip technologijos vystysis.
Kai alt tekstas tampa strategija, o ne užduotimi
Dirbu su vienu klientu, kuris turi didelę kelionių svetainę – tūkstančiai nuotraukų iš įvairiausių pasaulio vietų. Pradžioje alt tekstai buvo katastrofa: „IMG_3847.jpg”, „paplūdimys”, „viešbutis” – suprantate, apie ką kalbu.
Užuot tiesiog pertvarkę esamus alt tekstus, sukūrėme strategiją. Kiekvienai nuotraukai dabar yra:
– Lokacija (miestas, šalis)
– Objekto tipas (paplūdimys, viešbutis, restoranas)
– Išskirtinė savybė (saulėlydis, baseinas, jūros vaizdas)
– Sezonas ar laikas, jei aktualu
Rezultatas? Per tris mėnesius organinis srautas į vaizdų paiešką išaugo 140%. Bet dar svarbiau – gavome padėkos laiškų iš vartotojų su regos negalia, kurie pagaliau galėjo normaliai naršyti svetainę.
Tai ir yra esmė. Alt tekstas nėra dar viena užduotis jūsų backlog’e, kurią reikia „nuklikinti”. Tai galimybė padaryti jūsų turinį prieinamą visiems, pagerinti SEO ir parodyti, kad jums rūpi vartotojų patirtis visais lygmenimis.
Taigi, kitą kartą įkeldami vaizdą į svetainę, skirkite papildomą minutę alt tekstui. Pagalvokite, ką norėtumėte išgirsti, jei negalėtumėte matyti to vaizdo. Parašykite tai aiškiai, natūraliai ir su kontekstu. Jūsų vartotojai – ir paieškos sistemos – jums dėkos.