Alt-szöveg webshopban: így írja meg a termékképekhez

Röviden

• Az alt-szöveg a kép szöveges helyettesítője. A képernyőolvasó ezt olvassa fel a kép helyett, a böngésző ezt mutatja, ha a kép nem töltődik be, és a keresők is ebből értik meg, mit ábrázol a kép.
• A WCAG 1.1.1-es kritériuma (A szint) szerint minden információt hordozó képnek kell szöveges alternatíva. A díszítő képek alt-szövege üres.
• Termékképnél: a termék neve, és ami a képen a vásárlónak számít (szín, nézet, részlet). Ne „kép”, ne fájlnév, ne kulcsszólista.
• Az automatikus vizsgálat megtalálja a hiányzó alt-szöveget, de hogy jó-e, azt csak ember tudja eldönteni.

Kinek szól az alt-szöveg

Egy vak vagy gyengénlátó vásárló képernyőolvasóval böngészik: Windowson például az ingyenes NVDA-val, iPhone-on és Macen a beépített VoiceOverrel, Androidon a TalkBackkel. Amikor egy képhez ér, a program felolvassa az alt-szövegét. Ha nincs alt-szöveg, sok képernyőolvasó a fájlnevet olvassa fel („IMG_4471.jpg”), vagy átugorja a képet, és a vásárló nem tudja meg, mit lát a többi ember.

Az alt-szöveg a keresőknek is segít. A Google a kép környezete mellett az alt-szöveget is felhasználja, hogy megértse, mit ábrázol a kép, ami a képkeresésben is számít. A kulcsszavak halmozását viszont a Google spamnek tekintheti, és a vásárlónak sem segít.

Termékképek

Tegye fel a kérdést: mit mondana el a képről telefonon valakinek, aki nem látja, de meg akarja venni a terméket?

• Rossz: „kép”, „termékfotó”, „IMG_4471.jpg”.
• Rossz: „cipő női cipő bőrcipő olcsó cipő akció”.
• Jó: „Női bőr bokacsizma, konyakbarna”.

Galéria, több kép ugyanarról

Ha minden galériakép alt-szövege ugyanaz a terméknév, a vásárló ötször hallja ugyanazt. Írja le, miben más az adott kép:

• „Bokacsizma oldalról, konyakbarna”
• „Bokacsizma hátulról, a cipzárral”
• „Bokacsizma talpa közelről”
• „Bokacsizma modellen, farmerrel”

Színváltozatok

Ha a vásárló színt választ, és a kép ennek megfelelően cserélődik, az alt-szövegben is legyen benne a szín. Ha a színválasztó kis képekből áll, azoknak is legyen alt-szövegük: „Konyakbarna”, „Fekete”.

Terméklista és kategóriaoldal

A termékkártyán a kép és a terméknév gyakran ugyanarra a termékoldalra mutat:

• Ha a kép és a név egy linkben van, a kép alt-szövege lehet üres, így a képernyőolvasó nem olvassa fel kétszer a nevet.
• Ha a kép külön link, az alt-szövege legyen a termék neve, mert ez lesz a link szövege.

Bannerek, akciós képek

Ha a képen szöveg van, az alt-szövegbe is az kerüljön: „Őszi kabátvásár: minden kabát 30% kedvezménnyel október 31-ig”. Még jobb, ha a szöveg nem a kép része, hanem valódi szöveg a kép fölött: így nagyítva is éles, és a kontrasztja is ellenőrizhető.

Logó

A fejlécben lévő, a főoldalra mutató logó alt-szövege a cég neve, például „Példabolt – főoldal”. A „logó” szó önmagában semmit nem mond.

Ikonok és ikonos gombok

A kosár, a kereső, a kedvencek és a közösségi oldalak ikonjai is képek, vagy annak látszanak. Ha nincs mellettük látható felirat, kell nekik szöveges név: „Kosár”, „Keresés”, „Hozzáadás a kedvencekhez”, „Facebook-oldalunk”. Képnél ez az alt-szöveg, SVG-ikonnál vagy ikonbetűtípusnál a fejlesztő aria-label attribútummal vagy rejtett szöveggel adja meg.

Díszítő képek

Ami csak díszít (háttérminta, elválasztó vonal, hangulatkép, amely nem ad hozzá információt), annak az alt-szövege legyen üres: alt="". Az üres nem ugyanaz, mint a hiányzó. Üres alt-szövegnél a képernyőolvasó átugorja a képet, hiányzónál viszont gyakran a fájlnevet olvassa fel. Ha lehet, az ilyen képek CSS-háttérként kerüljenek az oldalra.

Táblázat, grafikon, szöveg a képen

• A mérettáblázatot ne képként tegye fel, hanem valódi táblázatként; egy alt-szövegbe nem fér bele 30 méret.
• Ha az összetevők, a tápérték vagy a használati útmutató csak a csomagolás fotóján olvasható, írja le szövegként is a termékoldalon.
• Grafikonnál az alt-szövegben a lényeg legyen („Ez a modell 30%-kal kevesebb áramot fogyaszt, mint az előző”), a részletes adatok szövegben vagy táblázatban.

Hosszúság és stílus

• Általában elég egy rövid kifejezés vagy mondat. A WCAG nem ad karakterkorlátot, de a hosszú leírást nehéz végighallgatni.
• Ne kezdje „Kép:” vagy „Fotó:” szóval: a képernyőolvasó magától jelzi, hogy képről van szó.
• Írjon a vásárló nyelvén, és ne ismételje meg szó szerint a kép melletti szöveget.
• Ha a kép tartalma fontos a vásárláshoz, inkább legyen pontos, mint rövid.

Hol állíthatja be

• WordPress és WooCommerce: a Médiatárban a képre kattintva, az „Alternatív szöveg” mezőben; a WooCommerce a termékképeknél ezt használja. A bejegyzésekbe már beszúrt képeknél a szerkesztőben, a kép blokkjának beállításaiban kell módosítani.
• Shoprenter, UNAS és WooCommerce: platformra szabott tippek a Shoprenter, az UNAS és a WooCommerce útmutatóban.
• Sok sablon automatikusan a termék nevét teszi be alt-szövegnek. Ez jobb a semminél, de a galéria minden képén ugyanazt ismétli, a bannereken és az ikonokon pedig nem segít.

Hogyan ellenőrizze

• Futtasson automatikus vizsgálatot: megmutatja a hiányzó alt-szövegű képeket, a név nélküli képes gombokat és linkeket.
• Hallgassa meg: kapcsoljon be képernyőolvasót, és menjen végig egy kategóriaoldalon és egy termékoldalon. Ha a felolvasásból nem derül ki, mit vásárolna, javítani kell.
• Ha fiókkal vizsgálja a webhelyét, az EqualVia a hiányzó alt-szövegű képekhez a képről készült kivágás alapján javaslatot is ad. Átvétel előtt nézze át: a terméket Ön ismeri a legjobban.

További lépések: akadálymentes webshop ellenőrzőlista, akadálymentességi audit és kézi ellenőrzés.