Kezdőlap › Tudásbázis › Rendszer szerint
Akadálymentesség Shopifyval
A Shopify sablonjai és alkalmazásai döntenek az akadálymentességről. A fizetési folyamatot nagyrészt a Shopify adja meg.
Gyakori előfordulási helyek
Túl alacsony kontrasztú sablonszínek, alt szöveg nélküli termékképek, billentyűzetes kezelés nélküli értékelő és felugró appok, csak rámutatásra nyíló megamenük, szünet nélküli körhinták. A Shopify magja általában nem a probléma — a sablon, az appok és a rich text szerkesztőben létrehozott tartalom az.
A sablon ellenőrzése és kiválasztása
A sablon dönt a kontrasztról, a látható fókuszról, a címsorszerkezetről és a menü és szűrők billentyűzetes kezeléséről. Szempontok a választás előtt: menj végig a kezdőlapon, egy kollekción és egy termékoldalon a Tab billentyűvel — mindig látható a fókusz? Megnyílik a menü egér nélkül? A szöveg és a gombok kontrasztja legalább 4,5:1? Az Online Store 2.0 alapértelmezett sablonok (Dawn és a belőle származók) szilárd kiindulópont; vásárolt sablonoknál segít a billentyűzetes teszt a demón és az, ha kérsz a szolgáltatótól akadálymentesítési nyilatkozatot.
Termékképek, variánsok és formázott szöveg
Adj minden termékképnek az adminban egy alt szöveget, amely a tartalmat írja le — ne a fájlnevet. Ugyanez vonatkozik a variánsképekre. A jelvénybe vagy bannerbe grafikaként beégetett szöveg („Akció”, „Csak ma”) a képernyőolvasók számára láthatatlan; használj valódi szöveget. A termékleírás rich text szerkesztőjében használd tisztán a címsorszinteket (ne csak nagyítsd a szöveget), a listákat pedig valódi listaként.
Appok és beágyazott widgetek
Az értékelő, felugró, keresztértékesítő és cookie-banner appok gyakran saját widgeteket illesztenek be, amelyek csapdába ejtik a billentyűzetfókuszt, nincs címkéjük, vagy bezárási lehetőség nélküli rétegeket mutatnak. Tesztelj minden appot külön billentyűzettel; a csúszka- és visszaszámláló appoknak szünet kell, és nem villoghatnak. Egy akadálymentesítő réteg appként nem oldja meg a szerkezeti problémákat, és az érintettek érdekvédelmi szervezetei bírálják. Kétség esetén: távolítsd el az appot.
Fizetés: mit ír elő a Shopify, és mit nem
A Shopify alapértelmezett fizetési folyamatát a Shopify tartja karban, és nagyrészt akadálymentesen épül fel — ott kevés a mozgástered. Amire hatsz: a fizetési bővítmények és egyéni mezők (ajándéküzenet, életkor-ellenőrzés) zavarhatják a billentyűzetes vagy képernyőolvasós használatot, a fizetésig vezető út pedig — kosár, kuponkód-mező, szállításválasztás — a sablonban van. Ezeket a lépéseket is teszteld.
Tesztelés és gyakori kérdések
Gyors teszt: kezeld a kezdőlapot, egy kollekciót és egy termékoldalt csak billentyűzettel, nagyíts a böngészőben 200%-ra, futtass egy kiegészítőt, mint a WAVE vagy az axe DevTools. Az a11yglass ingyenes vizsgálata emellett ellenőrzi a kiszolgált HTML-t kontraszt, alt szövegek, címkék, nyelv és szerkezet szempontjából. Kell-e a Shopify-boltomnak akadálymentesítési nyilatkozat? Rendszerint igen — egy bolt, amelyen keresztül fogyasztók vásárolnak, a BFSG értelmében vett elektronikus kereskedelem; lásd az akadálymentesítési nyilatkozatról szóló oldalt. Már akadálymentes a Shopify fizetése? Nagyrészt a Shopify felelőssége, de a bővítmények megtörhetik. Melyik sablon akadálymentes? Nincs védjegy — a döntő a konkrét eset megvalósítása.
Hogyan segít az a11yglass
Az ingyenes szkennelés a kiszolgált HTML-t és CSS-t vizsgálja automatikusan felismerhető WCAG-sértések szempontjából, és minden megállapításnál megnevezi a sikerkritériumot és egy konkrét intézkedést. A problémák nagyjából 20–35 %-át találja meg, és nem helyettesíti a teljes körű vizsgálatot.
Tovább olvasás
- Alt-szövegek a WCAG 1.1.1 szerint
- Akadálymentesség TYPO3-mal
- Akadálymentesség Webflow-val
- EAA-ellenőrzőlista
Általános tájékoztatás legjobb tudomás szerint, nem jogi tanács. Az egyedi esethez vonj be egy IT-jogra szakosodott ügyvédi irodát.