Kodėl alternatyviieji (alt) tekstai yra svarbūs svetainės prieinamumui ir kaip juos rašyti

Kas yra alternatyvus (alt) tekstas

Įsivaizduokite pasaulį, kuriame vaizdai kalba su jumis, net jei jūs jų nematote. Tai alternatyvaus teksto galia.

Taip pat žinomas kaip alt tekstas arba alt žymė, alternatyvus tekstas yra aprašomasis teksto atributas, kurį galima pridėti prie HTML kodo, kad būtų pateikta tekstinė alternatyva tinklalapių vaizdams.

Alternatyvaus teksto pranašumai

Prieinamumas

Alternatyvų tekstai yra kone svarbiausi saityno prieinamumo atžvilgiu. Pridėję keletą žodžių, kurie vazdžiai apibūdina vaizdinį turinį, leidžiame ekrano skaitytuvams nupiešti paveikslą aklųjų ar silpnaregių mintyse. Taip užtikrinama, kad visi, įskaitant žmones su negalia, galės suprasti tinklalapio vaizdų turinį ir kontekstą.

Pavyzdžiui, vaizdų alternatyva gali būti skaitoma garsiai arba paversta Brailio raštu, kad asmenys, pasikliaujantys ekrano skaitytuvais, galėtų pasiekti informaciją.

Tačiau prieinamumas tuo nesibaigia. Alt tekstai taip pat yra tiltas, jungiantis pažinimo ar mokymosi negalią turinčius žmones ir vizualinį turinį. Naudojant aiškų ir informatyvų alternatyvųjį tekstą, sudėtingos idėjos ir koncepcijos tampa prieinamos visiems.

Optimizavimas paieškos sistemoms (SEO)

Paieškos sistemos naudoja alternatyvų tekstą, kad suprastų ir indeksuotų svetainės vaizdus. Tinkamai optimizuotas (turintis daug jūsų verslui svarbių raktažodžių) alternatyvus tekstas gali pagerinti jūsų svetainės reitingą paieškos sistemoje ir padidinti organinį lankytojų srautą.

Vartotojo patirtis (UX)

Kai vaizdų nepavyksta tinkamai įkelti arba užkrovimas užtrunka ilgiau, alternatyvus tekstas gali veikti kaip vietos rezervavimo elementas, suteikiantis vartotojams vertingos informacijos apie vaizdo turinį, kol jis pasirodys. Tai pagerina bendrą vartotojo patirtį ir sumažina nepasitenkinimą.

Turinio supratimas

Alt tekste pateikiamas kontekstas ir vaizdų aprašymai, kurie gali pagerinti bendrą puslapio turinio supratimą, ypač kai vaizdai naudojami svarbiai informacijai perteikti.

Tačiau ne visiems vaizdams reikalingas alternatyvus tekstas. Skaitykite toliau, kad sužinotumėte apie tai daugiau!

Saityne naudojamų vaizdų tipai

Pagal Saityno turinio prieinamumo gaires (WCAG) vaizdus galima suskirstyti į šiuos tipus: informacinius, funkcinius, dekoratyvinius, kompleksinius, grupes, teksto vaizdus ir vaizdų žemėlapius.

Teikiant alternatyvųjį tekstą svarbu atsižvelgti į vaizdo tipą ir užtikrinti, kad alt tekstas tiksliai atspindi vaizdo paskirtį ir turinį. Tai leidžia asmenims, naudojantiems pagalbines technologijas, bet kokioje skaitmeninėje platformoje suprasti ir pasiekti informaciją, perteikiamą vaizdais.

Panagrinėkime kiekvieną vaizdų tipą išsamiau.

Funkciniai vaizdai

Funkciniai vaizdai yra mygtukai arba piktogramos, kurios atlieka konkrečią paskirtį arba atlieka veiksmą. Tai interaktyvūs elementai, kuriuos vartotojai gali spustelėti arba su kuriais sąveikauti. Pavyzdžiai: formų pateikimo mygtukai arba piktogramos, skirtos bendrinti socialinėje žiniasklaidoje.

Šiems vaizdams reikalingas aprašomasis alternatyvus tekstas, paaiškinantis, kas atsitiks juos suaktyvinus. Tai padeda vartotojams su negalia naršyti ir sąveikauti su svetainės funkcijomis.

Antraštėje naudojame funkcinį vaizdą, kur logotipas yra kaip spustelėjama nuoroda, nukreipianti vartotojus atgal į pagrindinį puslapį. Šiuo atveju mūsų alternatyvus tekstas ant logotipo yra „Logotipo nuoroda į JUNE KARLOVE pagrindinį puslapį“.

Dekoratyviniai vaizdai

Dekoratyviniai vaizdai gali būti įvairūs ornamentai, kurie tinklalapiui suteikia vizualinio patrauklumo, bet nesuteikia svarbios informacijos vartotojui. Jie turi estetinę paskirtį ir neprisideda prie turinio prasmės.

Tokiais atvejais šiems dekoratyviniams vaizdams rekomenduojama pateikti tuščią arba nulinį alt teksto atributą (alt=""). Tai informuoja pagalbines technologijas, kad vaizdas yra dekoratyvus ir gali būti ignoruojamas, todėl vartotojai gali sutelkti dėmesį į prasmingą puslapio turinį išvengiant nereikalingų trukdžių.

BOLD Business Decisions svetainėje naudojami dekoratyviniai vaizdai

Svetainėje, kurią sukūrėme BOLD Business Decisions, naudojome dekoratyvinius vaizdus mažų taškelių pavidalu. Prie kiekvieno teiginio taip pat pridėjome keletą iliustracijų, kad padidintume vizualinį patrauklumą, tačiau jos nepateikia jokios prasmingos informacijos.

Vaizdo žemėlapiai

Tai vaizdai, suskirstyti į kelis spustelėjamus regionus arba vaizdo sritis, kur kiekviena iš jų yra susieta su skirtingais URL ar veiksmais. Puikus vaizdo žemėlapio pavyzdys galėtų būti prekybos centro planas su įvairiomis konkrečiomis sritimis, kurias galima spustelėti, kad vartotojai galėtų gauti daugiau informacijos apie kiekvieną tame prekybos centre esančią parduotuvę.

Vaizdų žemėlapius gali būti sudėtinga naršyti neįgaliesiems, ypač tiems, kurie naudojasi pagalbinėmis technologijomis, pvz., ekrano skaitytuvais.

WCAG rekomenduoja pateikti alternatyvius būdus pasiekti vaizdo žemėlapių turinį ar funkcijas, pvz., pateikti teksto nuorodas arba mygtukus šalia vaizdo žemėlapio arba vietoj jo.

Vaizdų grupės

Vaizdų grupės reiškia susijusių vaizdų rinkinius arba rinkinius, kurie pateikiami kartu, pvz., nuotraukų galeriją arba skaidrių demonstraciją.

Pateikiant vaizdų grupes, svarbu užtikrinti, kad vaizdų tvarka ir išdėstymas būtų programiškai nustatyti ir suprantami pagalbinėmis technologijomis. Kiekvienas grupės vaizdas taip pat turėtų turėti tinkamą alternatyvųjį tekstą, kad būtų pateiktas prasmingas vaizdo aprašymas arba kontekstas.

Kompleksiniai vaizdai

Tai vaizdai, kuriuose yra išsami arba sudėtinga informacija, kurios negalima tinkamai aprašyti vien trumpu alternatyviuoju tekstu. Šiuose vaizduose gali būti diagramų, schemų, grafikų arba iliustracijų, perteikiančių sudėtingas sąvokas ar duomenis.

Kad sudėtingi vaizdai būtų prieinami, WCAG rekomenduoja pateikti alternatyvų tekstą, kuris glaustai apibūdina vaizdo paskirtį arba turinį ir, jei reikia, pateikti papildomos aprašomosios informacijos aplinkiniame tekste arba per susietą tekstą.

Teksto vaizdai

Teksto vaizdai iš esmės yra paveikslėliai, kuriuose yra žodžių, o ne tikrasis tekstas, kurį galima pasirinkti arba pakeisti dydį. Nors jie gali atrodyti puošniai ar stilingai, jie gali sukelti problemų žmonėms, kurie naudojasi pagalbinėmis technologijomis.

WCAG rekomenduoja, kai tik įmanoma, naudoti tikrą tekstą, o ne teksto vaizdus, kad visi galėtų lengvai pasiekti ir suprasti informaciją.

Išimtiniais atvejais, kai būtina naudoti paveikslėlius, kuriuose rodomas tekstas, alternatyvus tekstas turi tiksliai perteikti tą patį tekstą, koks pateiktas paveikslėlyje.

Informatyvūs vaizdai

Informatyvūs vaizdai yra tie, kurie iš tikrųjų suteikia svarbios informacijos arba perteikia prasmę. Jie padeda papasakoti istoriją, iliustruoja koncepciją arba suteikia papildomos informacijos apie turinį. Šiems vaizdams reikalingas alternatyvusis tekstas, kuris yra trumpas aprašymas, paaiškinantis, ką vaizdas rodo. Tai padeda žmonėms, kurie nemato vaizdo, suprasti jo reikšmę.

Štai keli patarimai, kaip rašyti efektyvius alternatyvius tekstus informatyviems vaizdams.

Tiksliai aprašykite

Alternatyvus tekstas turėtų apibūdinti vaizdo turinį ir funkciją, kad vartotojai suprastų pranešimą ar tikslą, net jei vaizdo nemato.

Nenaudokite bendrų frazių, pvz., „vaizdas“ arba „paveikslėlis“, o vietoje to pateikite konkrečią informaciją, perteikiančią vaizdo prasmę.

Don't: "Woman smiling"

Šis alternatyvus tekstas yra per daug bendras ir nepateikia konkrečios informacijos apie vaizdą. Geriau būti konkretesniam.

Rašykite: "Moteris šypsosi savo vestuvėse laikydama gėlių puokštę"

Šis alternatyvus tekstas suteikia daugiau konteksto ir informacijos apie vaizdą, o tai gali padėti vartotojams geriau suprasti vaizdo turinį ir paskirtį.

Aprašykite glausčiai ir venkite nereikalingų detalių

Nors svarbu pateikti pakankamai informacijos perteikiant vaizdo prasmę, neįtraukite nesusijusios ar pašalinės informacijos, kuri gali atitraukti nuo pagrindinės minties arba suklaidinti naudotoją.

Alternatyvus tekstas turi būti glaustas ir tikslus. Jei įmanoma, siekite 125 ar mažiau simbolių, kad ekrano skaitytuvo naudotojas galėtų greitai jį suprasti.

Nerašykite  "Žalias obuolys su koteliu, lapais ir nedideliais trūkumais, auginamas JAV Ramiojo vandenyno šiaurės vakarų regione"

Šiame alternatyviame tekste yra daug nereikalingų detalių, kurios nepadeda vartotojui greitai suprasti vaizdo. Naudotojui nereikia žinoti, kur obuolys buvo užaugintas ar jo trūkumų specifikos.

Do: "Green apple"

Šis alternatyvus tekstas yra glaustas ir suteikia pakankamai informacijos, kad vartotojai suprastų vaizdo turinį.

Naudokite paprastą kalbą

Rašykite paprasta, aiškia, lengvai suprantama kalba. Venkite žargono ar techninės kalbos, kuri kai kuriems naudotojams gali būti nepažįstama.

Don't: "An alluring canine breed known for its thick and soft fur, a playful personality, and a love for chasing balls"

Šiame alternatyviame tekste šuniui apibūdinti naudojama pernelyg sudėtinga kalba. Kai kurie vartotojai gali būti nesusipažinę su terminu „kanidų veislė“ (šunų veislė), o šuns asmenybės ir pomėgių aprašymas nėra būtinas norint suprasti vaizdą.

Do: "Golden Retriever playing with a ball"

Šis alternatyvus tekstas yra paprastas ir jame vartojama paprasta kalba, kurią lengva suprasti visiems vartotojams.

Naudokite tinkamus skyrybos ženklus

Alternatyvus tekstas turi būti tinkamai ženklinamas, kad jis būtų aiškus ir lengvai skaitomas. Nenaudokite visų didžiųjų raidžių.

Don't: "Two friends hiking in a forest covered in green leaves with blue skies and white clouds in the background"

Šiame alternatyviame tekste trūksta tinkamų skyrybos ženklų, todėl kai kuriems vartotojams gali būti sunku jį suprasti. Dėl kablelių tarp skirtingų aprašomųjų frazių trūkumo gali būti sunkiau atskirti skirtingus vaizdo elementus.

Do: Two friends hiking in a forest, with green leaves, blue skies, and white clouds in the background"

Šiame alternatyviame tekste naudojami tinkami skyrybos ženklai, skirti atskirti skirtingas aprašomąsias frazes, todėl naudotojams lengviau suprasti vaizdo turinį.

Apsvarstykite kontekstą

Alternatyvus tekstas turėtų būti parašytas atsižvelgiant į aplinkinio turinio kontekstą. Jei vaizdas yra didesnės grupės ar sekos dalis, įsitikinkite, kad alternatyvus tekstas perteikia jo ryšį su kitu turiniu.

Don't: "John Smith"

Šis alternatyvus tekstas nėra pakankamai konkretus ir nesuteikia jokio konteksto vartotojui. Be papildomos informacijos vartotojas gali nesuprasti vaizdo paskirties.

Do: "John Smith, CEO of XYZ Company, speaking at a conference"

Šis alternatyvus tekstas suteikia vartotojui kontekstą, identifikuodamas vaizde esantį asmenį, jo vaidmenį ir situaciją, kurioje buvo padaryta nuotrauka.

Nedubliuokite aplinkinio teksto

Venkite dubliuoti tekstą alternatyviame tekste, kuris jau ir taip pateiktas šalia vaizdo. Verčiau sutelkite dėmesį į papildomos informacijos, kurios dar nėra aplinkiniame tekste, pateikimą.

Nerašykite: „Mūsų ekspertų komanda“ (su žmonių grupės atvaizdu)

Sykime šalia esančioje antraštėje jau parašyta „Mūsų ekspertų komanda“. Naudojant tokį patį alt tekstą nuotraukai apibūdinti, jis dubliuoja šalia esantį tekstą ir nepateikia jokios papildomos informacijos apie vaizdą.

Do: "Group of experts in a meeting"

Šis alternatyvus tekstas suteikia papildomos informacijos apie vaizdą, identifikuoja kontekstą, kuriame buvo padaryta nuotrauka, ir pateikia daugiau informacijos apie vaizduojamus žmones.

Balansas tarp dekoratyvinių ir informatyvių vaizdų

Svarbu rasti pusiausvyrą tarp alternatyvaus teksto teikimo informatyviems vaizdams ir tinkamo dekoratyvinių vaizdų identifikavimo bei žymėjimo, kad būtų užtikrintas prieinamumas žmonėms su negalia ir būtų išvengta nereikalingos pagalbinių technologijų išvesties.

Išvada

Apibendrinant, alternatyvaus teksto tikslas yra pateikti glaustą ir tikslų vaizdo aprašymą, leidžiantį vartotojams suprasti jo turinį ir paskirtį. Laikydamiesi šios geriausios praktikos, galite užtikrinti, kad alternatyvus tekstas veiksmingai pagerins svetainės prieinamumą visiems vartotojams.