Név nélküli linkek, gombok: kosár, kereső, közösségi ikonok

Röviden

• Ha egy link vagy gomb csak ikonból áll, és a kódban sincs neve, a képernyőolvasó nem tudja megmondani, mire való. Csak annyit mond: „link” vagy „gomb”.
• saját 2026-os felmérésünk szerint a vizsgált 116 magyar webshop 58%-ának főoldalán volt név nélküli link, 27%-ánál név nélküli gomb. Legalább az egyik a boltok 63%-ánál előfordult.
• A név nélküli elemek között leggyakrabban a kereső (25 boltban), a lapozónyilak (18 boltban), a közösségi ikonok (14 boltban) és a kosár (12 boltban) fordult elő.
• A javítás többnyire egyetlen szó a sablonban: egy aria-label attribútum vagy egy rejtett szöveg.

Kinek számít

A vak és gyengénlátó vásárló képernyőolvasóval (NVDA, JAWS, a Mac és az iPhone VoiceOver funkciója, Androidon a TalkBack) használja az oldalt. Tab billentyűvel lépked a linkek és a gombok között, vagy kilistáztatja az oldal összes linkjét. Ha a fejléc ikonjainak nincs neve, a lista így szól: „link, link, link, gomb”. Nem derül ki, melyik a kosár és melyik a fiók.

A hangvezérlést használók (például a Mac és az iPhone Hangvezérlés funkciója vagy az Androidos Voice Access) kimondják, mire kattintanának: „Kattints a Kosárra”. Ez csak akkor működik, ha az elemnek van neve, és a név tartalmazza a látható feliratot.

Mit kér a szabvány

• WCAG 4.1.2, Név, szerep, érték (A szint): minden linknek és gombnak legyen a programok, így a képernyőolvasó által is kiolvasható neve.
• WCAG 2.4.4, A link célja (A szint): a link nevéből (vagy a közvetlen környezetéből) derüljön ki, hova visz.
• WCAG 1.1.1, Nem szöveges tartalom (A szint): ha a link egy kép, a kép alt szövege adja a link nevét.
• WCAG 2.5.3, Felirat a névben (A szint): ha az elemnek van látható felirata, a kódbeli neve tartalmazza azt. Ha a gombon az áll, hogy „Kosárba”, a kódban ne „Termék hozzáadása” legyen a neve. Felmérésünkben az axe-core erre vonatkozó, még kísérleti szabálya a vizsgált webshopok 32%-ánál jelzett ilyen eltérést.

A tipikus esetek egy webshopban

• Kosár ikon darabszámmal: jó név a „Kosár, 3 termék”. Ha a darabszám változik, a név is változzon vele. A kód például: a link kap egy aria-label="Kosár, 3 termék" attribútumot, az ikon pedig aria-hidden="true" jelölést.
• Kereső: a keresőmezőnek legyen címkéje (például „Keresés a termékek között”), a nagyító gombnak neve: „Keresés”.
• Közösségi ikonok a láblécben: a név a szolgáltatás neve: „Facebook”, „Instagram”, „YouTube”. Ha új lapon nyílik, ezt is jelezheti: „Facebook (új lapon nyílik)”.
• Hamburgermenü telefonon: a neve „Menü”, és az aria-expanded="true" vagy "false" jelzi, hogy éppen nyitva van-e.
• Lapozónyilak a sliderben és a termékkarusszelben: „Előző” és „Következő”, vagy pontosabban „Következő termékek”. A lapozó pöttyök is gombok: „3. dia”.
• Bezárás (X) a felugró ablakon, a sütisávon és a kosár oldalpanelén: „Bezárás”.
• Kedvencek (szív) és összehasonlítás a termékkártyán: a név tartalmazza a terméket is: „Kedvencekhez adás: Kék pamutpóló”. Ha minden kártyán csak „Kedvencekhez” áll, a képernyőolvasó listájában húsz egyforma gomb lesz.
• Mennyiség + és − gombok: „Mennyiség növelése” és „Mennyiség csökkentése”.
• Logó a fejlécben: a logókép alt szövege a bolt neve. Így a link neve „Példabolt”, és mindenki tudja, hogy a főoldalra visz.
• Termékkép linkként: a kép alt szövege a termék neve, ahogy az alt szövegről szóló útmutatóban írjuk.

Hogyan adjon nevet: négy módszer

1. Látható szöveg az ikon mellett. Ez a legjobb: a „Kosár” felirat a látó vásárlónak is segít, és a hangvezérléssel is működik.

2. Rejtett, csak a képernyőolvasónak szóló szöveg. A link vagy a gomb belsejébe kerül egy szöveg, amelyet egy CSS-osztály elrejt a szem elől, de a képernyőolvasó felolvassa. A WordPress-témákban erre a screen-reader-text osztály szolgál, más sablonokban gyakran sr-only vagy visually-hidden a neve.

3. Az aria-label attribútum. Egyetlen attribútum a linken vagy a gombon, például aria-label="Keresés". Ez a leggyorsabb javítás egy kész sablonban.

4. A kép alt szövege, ha a link egy img elem. Az ikonbetűkészlet (például egy i elembe tett Font Awesome-ikon) és a CSS-háttérkép nem ad nevet.

Néhány szabály mellé:

• A név mondja meg, mit csinál az elem, ne azt, hogyan néz ki: „Kosár”, nem „Kosár ikon” vagy „Bevásárlókocsi-kép”.
• Ha a nevet a link vagy a gomb adja, az ikon kapjon aria-hidden="true" jelölést, hogy a képernyőolvasó ne olvasson fel belőle zavaró részleteket.
• A title attribútumra (az egérrel előjövő súgóra) ne építsen: érintőképernyőn nem jelenik meg, és nem minden képernyőolvasó olvassa fel.
• A gomb legyen valódi gomb (button elem), a link valódi link (a elem). A kattinthatóvá tett div vagy span sem nevet, sem billentyűzetfókuszt nem kap magától. Erről a billentyűzetes önteszt szól.

Így ellenőrizze tíz perc alatt

• Ingyenes automatikus vizsgálat: az EqualVia ingyenes vizsgálata név szerint felsorolja a név nélküli linkeket és gombokat, és képernyőképen megmutatja, melyik elemről van szó.
• Chrome vagy Edge fejlesztői eszközök: kattintson jobb gombbal az ikonra, válassza a „Vizsgálat” menüpontot, majd nyissa meg az Accessibility (Kisegítő lehetőségek) panelt. A Computed Properties alatt a Name sor mutatja az elem nevét. Ha üres, az elemnek nincs neve.
• Képernyőolvasóval: Windowson az ingyenes NVDA-val lépkedjen végig Tab billentyűvel a fejlécen és a láblécen; az NVDA+F7 billentyűkombináció kilistázza az oldal összes linkjét. Macen a VoiceOver a Command+F5 billentyűkombinációval indul, a linkek listáját a rotor (Control+Option+U) mutatja.

Platformonként

• Shoprenter és UNAS: a fejléc és a lábléc ikonjai a sablonban vannak. Ha a sablont nem Ön szerkeszti, küldje el a fejlesztőnek ezt az útmutatót és a vizsgálat listáját. Részletek: Shoprenter, UNAS.
• WooCommerce és WordPress: a kosár és a kereső ikonja a téma fejlécében van. A WordPress beépített Közösségi ikonok blokkja a szolgáltatás nevét rejtett szövegként kiírja; a bővítménnyel vagy saját HTML-lel beszúrt ikonokat külön ellenőrizze. Részletek: WooCommerce, WordPress.

Jogszabály és szabvány

A 2022. évi XVII. törvény hatálya alá tartozó webshopoknál a gyakorlati mérce a WCAG 2.1 AA szint, az EN 301 549 szabványon keresztül. A fenti négy feltétel mind A szintű, vagyis a legalapvetőbb követelmények közé tartozik. Részletek: WCAG 2.1 AA és EN 301 549, az akadálymentességi törvény összefoglalója.

További lépések: akadálymentes webshop ellenőrzőlista, színkontraszt, akadálymentes űrlapok.

Ez az útmutató technikai segítség, nem jogi tanácsadás.