Súgó
Bejelentkezés

Témák akadálymentessége

A téma testreszabásakor hozzon olyan tervezési és tartalmi döntéseket, amelyek segítenek az online áruháza akadálymentességének megőrzésében. Az akadálymentes weboldal úgy van kialakítva, hogy mindenki, beleértve a fogyatékossággal élő embereket is, tudja használni. Ha az online áruházzal kapcsolatos döntéseit az akadálymentesség szem előtt tartásával hozza meg, azzal befogadó élményt nyújthat minden vásárlójának.

Az alábbi irányelvek a Web Content Accessibility Guidelines (WCAG) figyelembevételével készültek. Mivel egy akadálymentes weboldal létrehozásakor számos tényezőt kell figyelembe venni, az alábbi irányelvek betartása önmagában nem garantálja, hogy az Ön online áruháza teljes mértékben akadálymentes lesz. A webes akadálymentességről többet is megtudhat a WCAG weboldalán, vagy tekintse meg a lent felsorolt forrásokat.

Ezen az oldalon

Szövegek akadálymentessége

Fontos, hogy az online áruházában található szöveg olvasható legyen a gyengénlátó vásárlók, illetve azok számára, akiknek nehézséget okoz a sűrű szövegtömbök olvasása.

Színkontraszt

Amikor az online áruháza színeit szerkeszti, győződjön meg róla, hogy minden szöveg akadálymentes a színvak vagy más módon látássérült vásárlók számára. Ezek a vásárlók a megfelelő színkontrasztra támaszkodnak, hogy vizuálisan megkülönböztessenek dolgokat egymástól. Egy online kontrasztarány-ellenőrző eszközzel ellenőrizheti áruháza különböző részeinek kontrasztját.

Az alábbi példában a szöveg kontrasztaránya 2,4:1 a háttérhez képest, és egyes vásárlók számára nehezen olvasható.

Egy világosszürke szövegblokk egyszínű fehér háttérrel.

A következő példában a szöveg kontrasztaránya 4,8:1, és sok vásárló számára könnyebben olvasható.

Egy sötétszürke szövegblokk egyszínű fehér háttérrel.

Ellenőrizze az összes szöveg kontrasztját, beleértve a törzsszöveget, a címsorokat, a hivatkozásokat és az űrlapmezőket. Használja az alábbi irányelveket:

  • A törzsszöveg és a gombok szövegének színe legalább 4,5:1 kontrasztaránnyal rendelkezik a háttérhez képest.
  • A címsorok és más nagyméretű szövegek (24 px vagy nagyobb betűméret) színe legalább 3:1 kontrasztaránnyal rendelkezik a háttérhez képest.
  • A képeken, beleértve a diavetítéseket, szalaghirdetéseket és videókat, lévő összes szöveg színének elegendő kontrasztaránnyal kell rendelkeznie a háttérhez képest. Nagyméretű szövegek (24 px vagy nagyobb betűméret) esetén a kontraszt legalább 3:1. Kisebb szövegek esetén a kontraszt legalább 4,5:1.
  • A nem szöveges elemek, beleértve a beviteli mezők szegélyeit és az ikonokat, színének legalább 3:1 kontrasztaránnyal kell rendelkeznie a háttérhez képest.

Szövegcímsorok

Amikor címsorokat ad hozzá az oldalához a rich text szerkesztővel, fontos, hogy azokat sorrendben tartsa (1–6). A címsorokat a kisegítő technológiák arra használják, hogy közöljék az oldal tartalmának felépítését. A szintek átugrása, például egy 2. szintű címsor után egy 4. szintű címsor következik, zavaró lehet a felhasználók számára. Kövesse az alábbi irányelvet:

  • A címsorokat sorrendben kell használni, szintek átugrása nélkül.

Szövegméret és -igazítás

A téma tipográfiai beállításainak szerkesztésekor ügyeljen arra, hogy a szöveg betűmérete elég nagy legyen ahhoz, hogy a vásárlók kényelmesen elolvashassák.

A könnyű olvashatóság érdekében a szavak és a betűk között egységes térköznek kell lennie. Az alábbi példában a szöveg sorkizárt, ami következetlen térközt eredményez a szavak között.

Egy sorkizárt szövegblokk. Minden sor kitölti a rendelkezésre álló helyet, ami változó szóközt kényszerít ki az illeszkedéshez.

A következő példában a szöveg balra igazított, ami egységes térközt hoz létre a szavak között.

Egy balra igazított szövegblokk. Az egyes szavak között egységes a térköz.

A szöveg méretének és igazításának testreszabásakor kövesse az alábbi irányelveket:

  • A törzsszöveg minimális betűmérete 16 px.
  • A szövegigazítás ne legyen sorkizárt. A sorkizárt szöveg következetlen térközt eredményez a szavak között.

Szöveges hivatkozások

A szöveges hivatkozásokat alá kell húzni, vagy más, a normál szövegtől vizuálisan eltérő stílussal kell ellátni. Mivel egyes vásárlók nehezen látják a színeket, nem elegendő csupán a színváltozás a hivatkozások megkülönböztetésére a normál szövegtől.

A szöveges hivatkozásoknak ugyanazon a fülön kell megnyílniuk. Az új fülön vagy ablakban megnyíló hivatkozások zavart okozhatnak, különösen mobilon, ahol a régi ablak nem látható, és nem akadálymentesek a vásárlók, különösen a képernyőnagyítót használó vagy kevésbé technikailag jártas vásárlók számára.

Ha szerkeszti a téma stíluslapját, ügyeljen arra, hogy ne távolítsa el a szöveges hivatkozások stílusait. Kövesse az alábbi irányelveket:

  • A szöveges hivatkozások legyenek aláhúzva, vagy rendelkezzenek más, nem csak színbeli vizuális megkülönböztető jeggyel, hogy a vásárlók meg tudják különböztetni őket a normál szövegtől.
  • A szöveges hivatkozások kattintáskor ugyanazon a fülön nyíljanak meg.

Helyettesítő szöveg a képekhez

Amikor képeket ad hozzá az online áruházához, fontos, hogy azokat akadálymentessé tegye a vak vagy gyengénlátó vásárlók számára. Ezt úgy teheti meg, hogy minden képhez pontosan leíró helyettesítő szöveget ad hozzá. A képernyőolvasót használó vásárlók a helyettesítő szöveg segítségével értesülnek az Ön online áruházában található képek tartalmáról.

A Shopify adminisztrációs felületén adhat hozzá helyettesítő szöveget a termékképekhez. A téma többi képéhez pedig a témaszerkesztőben adhat hozzá helyettesítő szöveget.

Amikor helyettesítő szöveget ad egy képhez, jó gyakorlat, ha úgy tesz, mintha olyasvalakinek írná le a képet, akinek csukva van a szeme. Segítsen neki elképzelni a képet. A kép leírásának módja a weboldal kontextusától is függ. Például másképp írhat le egy képet, ha a vállalkozása utazási iroda, mint ha outdoor felszereléseket árusító üzlet. Vegyük a következő képet:

Két hátizsákos barát átkarolja egymást, és az óceánt nézi

Egy utazási iroda esetében megemlítheti az országot és a régiót, ahol a két barát utazik, valamint az óceán vagy tenger nevét, amelyet néznek. Ezzel szemben egy outdoor felszereléseket árusító üzlet esetében a két barát hátizsákjának márkájára és jellemzőire összpontosíthat.

Ha a vállalkozása utazási iroda, akkor egy rossz helyettesítő szövegre példa lehet a következő: „Két ember az óceán előtt.” Ugyanennél az irodánál egy jó helyettesítő szöveg például ez lehet: „Két barát utazik a portugáliai Lagosban, és egy napsütéses napon a Praia do Camilo homokos öblét nézi.”

Diavetítés és videó akadálymentessége

Amikor videókat ad hozzá az online áruházához, ügyeljen arra, hogy figyelembe vegye a gyengénlátó, a siket vagy nagyothalló, illetve a vesztibuláris rendellenességekre hajlamos vásárlók igényeit.

Ezen vásárlók némelyike a képernyőolvasók szövegfelolvasó képességére támaszkodik, amelyek felolvassák a weboldal tartalmát. A videókból és a zenéből származó további, különösen váratlan hang megnehezítheti ezt az élményt. A siket vagy nagyothalló vásárlók számára célszerű feliratot adni a videókhoz, hogy hozzáférhessenek a tartalomhoz.

A vesztibuláris rendellenességekkel küzdő vásárlók szédülést tapasztalhatnak a mozgó tartalomtól. Emiatt fontos, hogy a diavetítések és a videók ne induljanak el automatikusan, és hogy a vásárló vezérlőgombokkal irányíthassa a diavetítést.

Diavetítések

Amikor diavetítést ad hozzá az online áruházához, kövesse az alábbi irányelveket:

  • A diavetítések ne induljanak el automatikusan.
  • Ha a diavetítések mégis automatikusan indulnak el, akkor tartalmazzanak vezérlőket, amelyekkel a vásárlók szüneteltethetik, léptethetik vagy leállíthatják a diavetítést.

Videók

Amikor videót ad hozzá az online áruházához, kövesse az alábbi irányelveket:

  • A videók ne induljanak el automatikusan.
  • Ha a videók mégis automatikusan indulnak el, akkor a hangjuk legyen lenémítva.
  • A hangot is tartalmazó videók esetében a videó legyen teljesen látható, és ne takarják ki más oldalelemek. Ez lehetővé teszi, hogy a feliratok láthatóak maradjanak.
  • A párbeszédet tartalmazó videók esetében legyen elérhető szöveges átirat. Ez szerepelhet magán az oldalon vagy egy külön oldalra mutató hivatkozásban.

Ezek az irányelvek a diavetítésben szereplő videókra is vonatkoznak.

Billentyűzet-támogatás

A látás- vagy mozgássérült vásárlók billentyűzetet használhatnak az online navigációhoz és a feladatok elvégzéséhez. Ezek a vásárlók egy vizuális jelzőre támaszkodnak, amely mutatja, hogy a billentyűzet fókusza hol van a weboldalon. Az alábbi példában az E-mail mező vizuális fókuszjelzővel rendelkezik:

Egy online áruház vásárlói bejelentkezési képernyője, amely az E-mail és a Jelszó űrlapmezőket mutatja. Az E-mail mező kék körvonallal van kiemelve.

Ha szerkeszti a téma stíluslapját, ügyeljen arra, hogy ne távolítsa el a billentyűzetfókusz stílusát egyetlen oldalelemről sem. Kövesse az alábbi irányelvet:

  • Minden interaktív oldalelem rendelkezzen egyértelmű vizuális jelzővel, amikor a billentyűzet fókusza rajta van. Ilyen elemek például a hivatkozások, a gombok és az űrlapmezők.

Források

A cikkben tárgyalt témák webes akadálymentességéről a következő forrásokban tájékozódhat bővebben.

Színkontraszttal kapcsolatos források

Szöveggel kapcsolatos források

Források a helyettesítő szöveghez

Diavetítéssel és videóval kapcsolatos források

Billentyűzettámogatással kapcsolatos források

Ebben a szakaszban