Interneto atvėrimas: išsamus vadovas apie alternatyvųjį tekstą ir paveikslėlių prieinamumą

Mūsų vis labiau vizualioje skaitmeninėje aplinkoje paveikslėliai yra galingi įrankiai bendravimui, įsitraukimui ir informacijos sklaidai. Tačiau didelei pasaulio gyventojų daliai šie vizualūs elementai taip pat gali tapti kliūtimi suprasti ir dalyvauti. Būtent čia alternatyvusis tekstas, paprastai žinomas kaip alt tekstas, atlieka lemiamą vaidmenį užtikrinant interneto prieinamumą ir skatinant skaitmeninę įtrauktį. Šiame išsamiame vadove nagrinėsime, kodėl alt tekstas yra būtinas, kaip rašyti veiksmingą alt tekstą ir kokios yra jo platesnės pasekmės SEO bei pasauliniams interneto standartams.

Lemiamas alt teksto vaidmuo interneto prieinamumui

Interneto prieinamumas – tai praktika kurti ir plėtoti svetaines, įrankius ir technologijas taip, kad jomis galėtų naudotis žmonės su negalia. Pasak Pasaulio sveikatos organizacijos (PSO), daugiau nei 1 milijardas žmonių visame pasaulyje gyvena su tam tikra negalios forma, o nemaža dalis šių asmenų turi regos sutrikimų. Šiems naudotojams, įskaitant akluosius ar silpnaregius, alt tekstas nėra tik papildomas patobulinimas; tai yra esminė būtinybė.

Kaip regos sutrikimų turintys žmonės pasiekia paveikslėlius internete?

Ekrano skaitytuvai: tai pagalbinės technologijos, kurios garsiai skaito tinklalapio turinį. Kai ekrano skaitytuvas susiduria su paveikslėliu, jis perskaito su juo susietą alt tekstą. Be alt teksto, ekrano skaitytuvas paprastai praneš „paveikslėlis“ arba pateiks failo pavadinimą, kuris dažnai yra beprasmis ir varginantis naudotojui.
Tekstinės naršyklės: kai kurie naudotojai renkasi tik tekstines naršykles dėl greičio ar asmeninių pageidavimų, kurios vietoje paveikslėlių rodo alt tekstą.
Prasto ryšio sąlygos: regionuose, kur interneto ryšys yra ribotas, naudotojai gali išjungti paveikslėlių įkėlimą. Alt tekstas suteikia kontekstą, kuris kitaip būtų prarastas.

Be tiesioginio prieinamumo regos sutrikimų turintiems naudotojams, alt tekstas taip pat prisideda prie patikimesnio interneto visiems. Jis padeda paieškos sistemoms suprasti paveikslėlių turinį, o tai daro didelę įtaką paieškos sistemų optimizavimui (SEO).

Kas yra veiksmingas alt tekstas? Menas ir mokslas

Veiksmingo alt teksto rašymas yra įgūdis, kuriame dera glaustumas ir aprašomumas. Tikslas yra perteikti esminę informaciją ir paveikslėlio paskirtį tam, kas jo nemato.

Pagrindiniai principai puikiam alt tekstui rašyti:

Būkite konkretūs ir aprašomieji: vietoj bendrinių aprašymų pateikite detales, kurios atspindi paveikslėlio esmę.
Atsižvelkite į kontekstą: paveikslėlio paskirtis puslapyje lemia jo alt teksto turinį. Kokią informaciją paveikslėlis turėtų perteikti naudotojui?
Būkite glausti: stenkitės, kad alt tekstas būtų trumpesnis nei 125 simboliai. Ekrano skaitytuvai gali sutrumpinti ilgesnius aprašymus, o naudotojai nenori klausytis ilgų ištraukų.
Venkite perteklinės informacijos: nepradėkite alt teksto frazėmis „paveikslėlis, kuriame“, „nuotrauka, kurioje“ ar „grafika, kurioje“. Ekrano skaitytuvai jau identifikuoja elementus kaip paveikslėlius.
Natūraliai naudokite raktinius žodžius (SEO tikslais): jei tinka, įtraukite raktinius žodžius, kurie tiksliai apibūdina paveikslėlį ir aplinkinį turinį, bet niekada jų neperkraukite.
Svarbi skyryba: tinkama skyryba gali padėti ekrano skaitytuvams veiksmingiau analizuoti tekstą.
Specialieji simboliai ir ženklai: atsižvelkite į tai, kaip specialiuosius simbolius gali perskaityti ekrano skaitytuvai.

Paveikslėlių tipai ir kaip juos aprašyti:

Skirtingiems paveikslėlių tipams reikalingi skirtingi alt teksto rašymo metodai:

1. Informaciniai paveikslėliai

Šie paveikslėliai perteikia konkrečią informaciją, pavyzdžiui, diagramas, grafikus, schemas ar nuotraukas, kurios pasakoja istoriją ar pateikia duomenis. Alt tekstas turėtų tiksliai aprašyti pateiktą informaciją.

Pavyzdys: stulpelinė diagrama, rodanti pasaulinio interneto skverbties lygį.
Blogas alt tekstas: „Diagrama“ arba „Interneto statistika“
Geras alt tekstas: „Stulpelinė diagrama, iliustruojanti nuolatinį pasaulinio interneto skverbties augimą nuo 30 % 2010 m. iki 65 % 2023 m., su ryškiu augimu besivystančiose šalyse.“

2. Funkciniai paveikslėliai

Tai paveikslėliai, kurie veikia kaip nuorodos ar mygtukai, sukeliantys veiksmą. Alt tekstas turėtų apibūdinti paveikslėlio funkciją, o ne būtinai jo išvaizdą.

Pavyzdys: didinamojo stiklo piktograma, naudojama kaip paieškos mygtukas.
Blogas alt tekstas: „Didinamasis stiklas“
Geras alt tekstas: „Paieška“ arba „Pradėti paiešką“

3. Dekoratyviniai paveikslėliai

Šie paveikslėliai yra skirti tik estetiniams tikslams ir neperteikia jokios prasmingos informacijos. Ekrano skaitytuvai gali juos saugiai ignoruoti.

Pavyzdys: subtili fono tekstūra arba visiškai dekoratyvinis rėmelis.
Geras alt tekstas: naudokite tuščią alt atributą: alt="". Tai nurodo ekrano skaitytuvui visiškai praleisti paveikslėlį.
Bloga praktika: visiškai praleisti alt atributą. Dėl to kartais gali būti perskaitytas failo pavadinimas, o tai nėra idealu.

4. Sudėtingi paveikslėliai (diagramos, grafikai, infografikai)

Labai sudėtingiems paveikslėliams, kurių negalima tinkamai aprašyti trumpu alt tekstu, dažnai reikia pateikti ilgesnį aprašymą. Tai galima padaryti pateikiant nuorodą į atskirą puslapį su išsamiu aprašymu arba naudojant longdesc atributą (nors jo palaikymas mažėja, nuoroda į aprašymą vis dar yra patikimas sprendimas).

Pavyzdys: sudėtingas infografikas, detalizuojantis klimato kaitos priežastis ir padarinius.
Geras alt tekstas: „Infografikas apie klimato kaitą. Išsamesnę informaciją rasite detaliame aprašyme.“
Susietas aprašymas: atskiras puslapis arba skiltis su išsamiu tekstiniu infografiko turinio paaiškinimu.

5. Teksto paveikslėliai

Jei paveikslėlyje yra tekstas, alt tekstas idealiu atveju turėtų tą tekstą atkartoti paraidžiui. Jei tekstas taip pat yra pateiktas aplinkiniame HTML kode, jo gali nereikėti įtraukti į alt tekstą, tačiau jo atkartojimas užtikrina nuoseklumą.

Pavyzdys: logotipas, kuriame yra įmonės pavadinimas.
Geras alt tekstas: „[Įmonės pavadinimas]“

Dažniausios klaidos, kurių reikia vengti:

Alt teksto praleidimas: tai dažniausia ir žalingiausia klaida.
Bendrinio alt teksto naudojimas: „paveikslėlis“, „nuotrauka“, „grafika“.
Raktinių žodžių perkrovimas: alt teksto perkrovimas nesusijusiais raktiniais žodžiais.
Akivaizdžių dalykų aprašymas: „besišypsantis žmogus“, jei paveikslėlis yra tiesiog standartinė besišypsančio žmogaus nuotrauka.
Alt teksto neatnaujinimas: jei pasikeičia paveikslėlis ar jo kontekstas, alt tekstas turėtų būti atitinkamai atnaujintas.

Alt tekstas ir paieškos sistemų optimizavimas (SEO)

Nors pagrindinė alt teksto paskirtis yra prieinamumas, jis suteikia didelę naudą SEO. Paieškos sistemos, ypač „Google“, naudoja alt tekstą, kad suprastų paveikslėlių turinį. Ši informacija joms padeda:

Indeksuoti paveikslėlius: paveikslėliai su aprašomuoju alt tekstu labiau tikėtina, kad atsiras paveikslėlių paieškos rezultatuose.
Suprasti puslapio turinį: alt tekstas prisideda prie bendro tinklalapio temos supratimo, o tai gali pagerinti jo reitingą bendruose paieškos rezultatuose.
Pagerinti naudotojo patirtį: prieinamas turinys lemia didesnį įsitraukimą, mažesnius atmetimo rodiklius ir ilgesnį buvimo puslapyje laiką – visa tai yra teigiami SEO signalai.

Kurdami alt tekstą, pagalvokite apie terminus, kuriuos naudotojas galėtų naudoti ieškodamas to paveikslėlio. Pavyzdžiui, jei turite istorinio paminklo nuotrauką Kiote, Japonijoje, aprašomasis alt tekstas, apimantis „Kinkakudži auksinis paviljonas Kiotas Japonija“, galėtų padėti jam atsirasti aukščiau paveikslėlių paieškose.

Alt teksto įgyvendinimas: techniniai aspektai

Įgyvendinti alt tekstą yra paprasta naudojant HTML <img> žymą.

Pagrindinė struktūra:

<img src="image-filename.jpg" alt="Čia pateikiamas paveikslėlio aprašymas">

Dekoratyviniams paveikslėliams:

<img src="decorative-element.png" alt="">

Paveikslėliams, naudojamiems kaip nuorodos: užtikrinkite, kad alt tekstas apibūdintų nuorodos funkciją.

<a href="contact.html">
  <img src="envelope-icon.png" alt="Susisiekite su mumis">
</a>

Turinio valdymo sistemoms (TVS), tokioms kaip „WordPress“, „Squarespace“, „Wix“ ir kt.: dauguma platformų, įkeliant paveikslėlius, suteikia specialų lauką alt tekstui. Užtikrinkite, kad šį lauką naudotumėte nuosekliai.

CSS fono paveikslėliams: jei paveikslėlis yra grynai dekoratyvinis ir naudojamas kaip CSS fonas, jam paprastai nereikia alt teksto. Tačiau, jei fono paveikslėlis perteikia esminę informaciją, turėtumėte apsvarstyti alternatyvius būdus, kaip tą informaciją pateikti tekstiniu pavidalu puslapyje, arba naudoti <img> žymą su atitinkamu alt tekstu ir prireikus vizualiai ją paslėpti.

Pasaulinės perspektyvos ir tarptautiniai standartai

Alt teksto principai yra universalūs, tačiau informuotumas ir įgyvendinimas skiriasi įvairiuose regionuose ir kultūrose. Interneto prieinamumo skatinimas yra pasaulinė pastanga, pagrįsta tarptautiniais standartais ir teisinėmis sistemomis.

Tinklalapių turinio prieinamumo gairės (WCAG)

WCAG – tai tarptautiniu mastu pripažintų gairių rinkinys, skirtas padaryti interneto turinį prieinamesnį. Sukurtos Pasaulinio tinklo konsorciumo (W3C), WCAG pateikia rekomendacijas, kaip padaryti turinį prieinamą žmonėms su įvairiausiomis negaliomis. Alt tekstas yra pagrindinis WCAG reikalavimas, ypač susijęs su 1.1.1 gaire „Netekstinis turinys“.

Laikantis WCAG užtikrinama, kad jūsų svetainė būtų prieinama kuo platesnei auditorijai, nepriklausomai nuo jų buvimo vietos, kalbos ar gebėjimų.

Teisiniai ir etiniai imperatyvai

Daugelis šalių priėmė įstatymus ir reglamentus, reikalaujančius skaitmeninio prieinamumo, dažnai derinant juos su WCAG standartais. Pavyzdžiai:

Amerikiečių su negalia aktas (ADA) Jungtinėse Valstijose: įpareigoja užtikrinti prieinamumą viešosiose erdvėse, įskaitant svetaines.
Ontarijo gyventojų su negalia prieinamumo aktas (AODA) Kanadoje: reikalauja, kad vyriausybės ir privataus sektoriaus organizacijos padarytų savo skaitmeninį turinį prieinamą.
Europos prieinamumo aktas (EAA): suderina prieinamumo reikalavimus įvairiems produktams ir paslaugoms visoje ES, įskaitant internetinį turinį.
Neįgaliųjų diskriminacijos aktas (DDA) Jungtinėje Karalystėje: reikalauja, kad paslaugų teikėjai atliktų protingus pritaikymus neįgaliems klientams, įskaitant interneto prieinamumą.

Be teisinės atitikties, prieinamo turinio kūrimas yra etinis imperatyvas. Tai atspindi įsipareigojimą sąžiningumui, lygybei ir pagrindinei visų asmenų teisei gauti informaciją ir dalyvauti skaitmeniniame pasaulyje.

Atvejų analizė ir pavyzdžiai iš viso pasaulio

Pažvelkime į keletą praktinių pavyzdžių, demonstruojančių veiksmingą alt teksto naudojimą skirtinguose kontekstuose:

Elektroninės prekybos svetainė Indijoje, prekiaujanti tradiciniais tekstilės gaminiais, galėtų naudoti tokį alt tekstą: „Ryškus rankų darbo šilkinis saris su sudėtingu gėlių siuvinėjimu, raudonos ir aukso spalvos atspalviais.“ Tai ne tik padeda regos sutrikimų turintiems pirkėjams, bet ir padeda paieškos sistemoms suprasti produktą potencialiems pirkėjams, ieškantiems „indietiškų šilko sarių“.
Naujienų portalas Brazilijoje, nušviečiantis sporto renginį, galėtų naudoti alt tekstą nugalėtojo įvarčio nuotraukai: „Brazilijos futbolininkė Marta džiaugiasi įmušusi lemiamą baudinį, o komandos draugės skuba ją pasveikinti.“ Tai perteikia akimirkos emociją ir veiksmą.
Vyriausybės portalas Singapūre, teikiantis viešąsias paslaugas, galėtų naudoti alt tekstą piktogramai, vaizduojančiai skaitmeninę formą: „Atsisiųsti paraiškos formą.“ Tai paaiškina piktogramos funkcionalumą.
Mokymosi platforma Vokietijoje, kurioje pateikiama sudėtinga mokslinė diagrama, galėtų naudoti alt tekstą pagrindinei koncepcijai apibendrinti: „Diagrama, iliustruojanti fotosintezės procesą augaluose, rodanti, kaip šviesos energija paverčia anglies dioksidą ir vandenį į gliukozę ir deguonį.“ Po to sektų nuoroda į išsamesnį paaiškinimą.

Įrankiai ir geriausios praktikos alt teksto auditui ir tobulinimui

Užtikrinti, kad visi paveikslėliai turėtų tinkamą alt tekstą, gali būti sudėtinga užduotis, ypač didelėse svetainėse. Laimei, yra keletas įrankių ir strategijų, kurios gali padėti:

Automatizuoti prieinamumo tikrintuvai:

Daugelis naršyklės plėtinių ir internetinių įrankių gali nuskaityti jūsų svetainę ieškodami prieinamumo problemų, įskaitant trūkstamą alt tekstą.

WAVE Web Accessibility Evaluation Tool: populiarus naršyklės plėtinys, kuris pažymi prieinamumo klaidas, įskaitant trūkstamą alt tekstą.
Lighthouse (integruotas į „Chrome DevTools“): teikia automatizuotus prieinamumo auditus.
axe DevTools: dar vienas patikimas naršyklės plėtinys prieinamumo problemoms nustatyti.

Rankinis auditas:

Nors automatizuoti įrankiai yra naudingi, rankinis patikrinimas yra būtinas norint užtikrinti alt teksto kokybę ir kontekstualumą. Tai dažnai apima:

Ekrano skaitytuvų naudojimas: tiesiogiai išbandykite savo svetainę su ekrano skaitytuvais, tokiais kaip NVDA („Windows“), JAWS („Windows“) ar „VoiceOver“ („macOS“/„iOS“), kad patirtumėte turinį taip, kaip jį patirtų regos sutrikimų turintis naudotojas.
Kodo patikrinimas: rankinis HTML kodo tikrinimas ieškant <img> žymų ir su jomis susijusių alt atributų.

Prieinamumo darbo eigos kūrimas:

Prieinamumo integravimas į turinio kūrimo ir plėtojimo procesą yra raktas į ilgalaikę sėkmę.

Turinio kūrėjų ir dizainerių mokymai: švieskite komandas apie alt teksto svarbą ir kaip jį veiksmingai rašyti.
Gairės programuotojams: nustatykite aiškius kodavimo standartus, kurie apimtų alt teksto reikalavimus visiems prasmingiems paveikslėliams.
Turinio valdymo sistemos (TVS) geriausios praktikos: sukonfigūruokite TVS platformas, kad jos paragintų arba priverstų įvesti alt tekstą.
Reguliarūs auditai: suplanuokite periodinius prieinamumo auditus, kad aptiktumėte naujas problemas ir užtikrintumėte nuolatinę atitiktį.

Paveikslėlių prieinamumo ateitis

Tobulėjant dirbtiniam intelektui (DI) ir mašininiam mokymuisi, galime sulaukti sudėtingesnių įrankių, skirtų automatiškai generuoti alt tekstą. DI jau gali būti naudojamas objektams paveikslėliuose identifikuoti ir aprašomiesiems antraštėms generuoti. Tačiau svarbu prisiminti, kad DI sugeneruotam alt tekstui dažnai trūksta kontekstinio niuanso ir paskirties supratimo, kurį gali suteikti žmogus rašytojas. Todėl žmogaus priežiūra ir redagavimas greičiausiai išliks būtini kuriant tikrai veiksmingą ir prieinamą alt tekstą artimiausioje ateityje.

Be to, diskusijos apie išsamesnius aprašymus sudėtingiems medijos elementams ir prieinamų turtingų interneto programų (ARIA) atributų tyrinėjimas toliau formuoja besikeičiantį interneto prieinamumo kraštovaizdį.

Išvada: alt teksto pritaikymas siekiant įtraukesnio interneto

Alternatyvusis tekstas yra daugiau nei tik techninis reikalavimas; tai yra įtraukios ir teisingos skaitmeninės patirties pagrindas. Kruopščiai kurdami aprašomąjį, kontekstualiai tinkamą alt tekstą visiems prasmingiems paveikslėliams, mes ne tik laikomės tarptautinių standartų ir teisinių įsipareigojimų, bet, dar svarbiau, atveriame skaitmeninį pasaulį milijonams žmonių su regos sutrikimais. Šis įsipareigojimas prieinamumui naudingas visiems, gerina SEO, gerina naudotojo patirtį ir skatina svetingesnę internetinę aplinką pasaulinei auditorijai.

Padarykime internetą vieta, kur kiekvienas paveikslėlis pasakoja istoriją, prieinamą visiems. Pradėkite taikyti veiksmingas alt teksto praktikas jau šiandien ir prisidėkite prie tikrai įtraukios skaitmeninės ateities.