Paveikslėlių alt tekstas: aprašykite paskirtį ir informaciją

Kas yra alt tekstas?

Alt atributas pateikia tekstinę paveikslėlio alternatyvą. Pagalbinės technologijos gali ją naudoti, kai vaizdas perteikia informaciją arba veikia kaip valdiklis. Paieškos sistemos taip pat gali vertinti ją kartu su puslapio tekstu. Tai nėra vieta paslėptam raktažodžių sąrašui.

Tuščias atributas ir jo nebuvimas skiriasi

Informaciniam vaizdui paprastai reikia prasmingos alternatyvos. Vien dekoratyvinis paveikslėlis gali turėti alt="", kad nekurtų nereikalingo triukšmo. Visai nepateikus atributo, žmogui gali būti perskaitytas nenaudingas failo vardas. Automatinė patikra negali patikimai nuspręsti vaizdo paskirties.

Prieš rašydami įvertinkite vaizdo vaidmenį

Paklauskite, kokios informacijos žmogus netektų nematydamas šio paveikslėlio. Perteikite ją, o ne kiekvieną matomą detalę. Jei greta esantis tekstas jau pasako viską ir vaizdas nieko neprideda, gali tikti tuščia alternatyva. Diagramos duomenis ar išsamų paaiškinimą pateikite ir matomame turinyje.

1. Atskirkite turinį, dekoraciją ir veiksmą

Prekės nuotraukoje gali būti svarbus skiriamasis bruožas ar fotografavimo kampas. Dekoratyvinio skirtuko aprašyti nereikia. Nuorodai iš vieno paveikslėlio reikia tekstu nusakyti paskirtį, o ne tik piktogramos formą. Jei nuorodoje jau yra aiškus tekstas, dekoratyvinio vaizdo alt jo nekartokite.

2. Parašykite trumpiausią naudingą alternatyvą

Rašykite natūraliai, puslapio kalba. Prekės modelį ar spalvą įtraukite tik tada, kai tai svarbu vaizdo paskirčiai. Venkite žodžių paveikslėlis, failų vardų ir reklaminių frazių, jei jie neprideda prasmės. Viena universali SEO simbolių riba neapibrėžia gero alt teksto.

3. Pasikartojimus vertinkite pagal kontekstą

To paties objekto miniatiūros gali turėti panašias alternatyvas. Skirtingiems prekės vaizdams kartais reikia skirtingų aprašymų. Perspėjimas apie pasikartojimą kviečia peržiūrėti, o ne išgalvoti skirtumus. Į failo vardą panašus alt dažnai rodo taisytiną TVS numatytąją reikšmę.

4. Patikrinkite išvestą img elementą

Keiskite konkrečioje vietoje naudojamą lauką, ne tik medijos bibliotekos įrašą: šablonas gali jį perrašyti. Atvaizduotame img patikrinkite, ar atributas yra, įskaitant sąmoningai tuščią reikšmę. Dekoratyvinis CSS fonas neturėtų vienintelis perteikti svarbios informacijos.

5. Perskaitykite puslapį be paveikslėlio

Įvertinkite aplinkinį tekstą kartu su alternatyva. Nuorodas iš paveikslėlių išbandykite klaviatūra ir, jei įmanoma, ekrano skaitytuvu. Pakartokite auditą, bet išsaugokite pagrįstą tuščią alt net tada, kai orientacinė patikra siūlo pridėti teksto.

Pavyzdžiai: prekės detalė ir dekoracija

Pirmas vaizdas perteikia konkretų prekės vaizdą, antras – tik puošia. Sprendimą lemia paskirtis puslapyje, ne failo plėtinys.

<img src="/images/bagazine.jpg" alt="Juoda dviračio galinė bagažinė su reguliuojamais tvirtinimo strypais">
<img src="/images/skirtukas.svg" alt="">

Next.js Image

Image komponentui būtina alt savybė. Informaciniam vaizdui perduokite prasmingą tekstą, o dekoracijai – sąmoningai tuščią eilutę. Privaloma savybė neužtikrina teksto kokybės: redakcinė peržiūra vis tiek reikalinga.