Hjälp
Logga in

Tillgänglighet för teman

När du anpassar ditt tema ska du göra design- och innehållsval som bidrar till att hålla din webbshop tillgänglig. En tillgänglig webbplats är utformad så att den kan användas av alla, inklusive personer med funktionsnedsättning. Att göra val för din webbshop med tillgänglighet i åtanke kan hjälpa dig att ge en inkluderande upplevelse för alla dina kunder.

Riktlinjerna nedan har tagits fram med Web Content Accessibility Guidelines (WCAG) i åtanke. Eftersom det finns många faktorer att ta hänsyn till när man skapar en tillgänglig webbplats garanterar inte enbart efterlevnad av nedanstående riktlinjer att din webbshop är fullt tillgänglig. Du kan lära dig mer om webbtillgänglighet genom att besöka WCAG:s webbplats eller genom att se de resurser som listas nedan.

På den här sidan

Texttillgänglighet

Det är viktigt att texten i din webbshop är läsbar för kunder som har nedsatt syn eller som har svårt att läsa täta textblock.

Färgkontrast

När du redigerar färgerna för din webbshop måste du se till att all text är tillgänglig för kunder som är färgblinda eller på annat sätt har nedsatt syn. Dessa kunder förlitar sig på tillräcklig färgkontrast för att visuellt kunna skilja en sak från en annan. Du kan använda ett onlineverktyg för kontrastförhållande för att kontrollera kontrasten i de olika delarna av din butik.

I exemplet nedan har texten ett kontrastförhållande på 2,4:1 mot sin bakgrund och är svår att läsa för vissa kunder.

Ett block med ljusgrå text och en helt vit bakgrund.

I nästa exempel har texten ett kontrastförhållande på 4,8:1 och är lättare att läsa för många kunder.

Ett block med mörkgrå text på en helt vit bakgrund.

Testa kontrasten för all text, inklusive brödtext, rubriker, länkar och formulärfält. Använd följande riktlinjer:

  • Färgen på brödtext och knapptext har ett kontrastförhållande på minst 4,5:1 mot sin bakgrund.
  • Färgen på rubriker och annan stor text (teckenstorlek 24 px och uppåt) har ett kontrastförhållande på minst 3:1 mot sin bakgrund.
  • Färgen på all text över bilder, inklusive bildspel, banners och videor, har tillräckliga kontrastförhållanden mot sin bakgrund. För stor text (teckenstorlek 24 px och uppåt) är kontrasten minst 3:1. För mindre text är kontrasten minst 4,5:1.
  • Färgen på icke-textelement, inklusive inmatningsramar och ikoner, har ett kontrastförhållande på minst 3:1 mot sin bakgrund.

Textrubriker

När du lägger till rubriker på din sida med RTF-redigeraren är det viktigt att du håller dem i sekventiell ordning (1–6). Rubriker används av tekniska hjälpmedel för att kommunicera hur sidinnehåll är organiserat. Att hoppa över nivåer, till exempel en rubriknivå 2 följt av en rubriknivå 4, kan vara förvirrande för användare. Använd följande riktlinje:

  • Rubriker används i sekventiell ordning och hoppar inte över nivåer.

Textstorlek och justering

När du redigerar temats typografiinställningar ska du se till att texten är tillräckligt stor för att kunderna ska kunna läsa den bekvämt.

Texten bör även ha ett jämnt avstånd mellan ord och bokstäver för att den ska vara lätt att läsa. I exemplet nedan är texten marginaljusterad, vilket skapar ojämnt avstånd mellan orden.

Ett marginaljusterat textblock. Varje textrad fyller utrymmet från kant till kant, vilket skapar varierande avstånd mellan orden för att passa in.

I nästa exempel är texten vänsterjusterad, vilket skapar ett jämnt avstånd mellan orden.

Ett vänsterjusterat textblock. Det finns ett jämnt avstånd mellan varje ord.

Använd följande riktlinjer när du anpassar textens storlek och justering:

  • Minsta teckenstorlek för brödtext är motsvarande 16 px.
  • Texten är inte marginaljusterad. Marginaljusterad text skapar ojämnt avstånd mellan orden.

Textlänkar

Textlänkar ska vara understrukna eller ha en annan visuellt distinkt stil jämfört med vanlig text. Eftersom vissa kunder har svårt att se färger kan du inte förlita dig på enbart en färgändring för att skilja en länk från vanlig text.

Textlänkar bör öppnas i samma flik. Länkar som öppnas i en ny flik eller ett nytt fönster kan vara förvirrande, särskilt på mobila enheter där det gamla fönstret inte är synligt. Det är inte heller inkluderande för kunder, i synnerhet de som använder skärmförstoring eller är mindre tekniskt kunniga.

Om du redigerar temats formatmall ska du se till att inte ta bort format för textlänkar. Använd följande riktlinjer:

  • Textlänkar är antingen understrukna eller har en annan visuell skillnad som inte bara är färg, så att kunderna kan skilja länkar från vanlig text.
  • Textlänkar öppnas på samma flik när man klickar på dem.

Alternativtext för bilder

När du lägger till bilder i din webbshop är det viktigt att du gör dem tillgängliga för kunder som är blinda eller har nedsatt syn. Det kan du göra genom att lägga till alternativtext som beskriver varje bild korrekt. Kunder som använder skärmläsare förlitar sig på alternativtext för att ta del av innehållet i bilderna i din webbshop.

Du kan lägga till alternativtext för dina produktbilder från din Shopify-admin. Du kan lägga till alternativtext för andra bilder i ditt tema från temaredigeraren.

När du lägger till alternativtext för en bild är en bra metod att låtsas att du beskriver bilden för någon som har slutna ögon. Hjälp dem att skapa en bild i sitt sinne. Hur du beskriver en bild beror också på sammanhanget på din webbsida. Du kan till exempel beskriva en bild på olika sätt om ditt företag är en resebyrå än om ditt företag är en butik för friluftsutrustning. Titta på följande bild:

Två vänner med ryggsäckar håller armarna om varandra och tittar ut över havet

För en resebyrå kan du hänvisa till landet och regionen där de två vännerna reser och till namnet på havet som de tittar på. För en butik för friluftsutrustning kan du å andra sidan fokusera på märken och funktioner hos de två vännernas ryggsäckar.

Om ditt företag är en resebyrå kan ett exempel på dålig alternativtext vara: ”Två personer framför havet”. Ett exempel på en bra alternativtext för samma resebyrå kan vara: ”Två vänner som reser i Lagos, Portugal och ser ut över den sandiga viken Praia do Camilo en solig dag”.

Tillgänglighet för bildspel och video

När du lägger till videor i din webbshop ska du se till att du tar hänsyn till behoven hos kunder med nedsatt syn, kunder som är döva eller har nedsatt hörsel, eller kunder som kan vara känsliga för vestibulära störningar.

Vissa av dessa kunder förlitar sig på skärmläsares text-till-tal-funktion, som läser upp innehållet på en webbsida. Ytterligare ljud från videor och musik, särskilt när det är oväntat, kan försvåra upplevelsen. För kunder som är döva eller har nedsatt hörsel är det en bra idé att lägga till textning i dina videor så att de kunderna kan ta del av innehållet.

Kunder med vestibulära störningar kan uppleva yrsel av rörligt innehåll. Därför är det viktigt att bildspel och videor inte spelas upp automatiskt och att kunden kan styra bildspelet med kontrollknappar.

Bildspel

Använd följande riktlinjer när du lägger till ett bildspel i din webbshop:

  • Bildspel spelas inte upp automatiskt.
  • Om bildspel spelas upp automatiskt ska de innehålla bildspelskontroller som kunderna kan använda för att pausa, gå framåt eller stoppa bildspelet.

Videor

Använd följande riktlinjer när du lägger till en video i din webbshop:

  • Videor spelas inte upp automatiskt.
  • Om videor spelas upp automatiskt så är ljudet avstängt.
  • För videor som inkluderar ljud är videon helt synlig och blockeras inte av andra sidelement. Detta gör att dold textning förblir synlig.
  • För videor som innehåller dialog finns textutskrifter tillgängliga. Dessa inkluderas antingen på sidan eller i en länk till en separat sida.

Dessa riktlinjer gäller även videor som finns i ett bildspel.

Tangentbordsstöd

Kunder med syn- eller motoriska funktionsnedsättningar kan använda ett tangentbord för att navigera och slutföra uppgifter online. Dessa kunder förlitar sig på en visuell indikator för att förmedla var tangentbordets fokus är på en webbsida. I exemplet nedan har fältet E-post en visuell fokusindikator:

En kundinloggningsskärm i en webbshop som visar formulärfält för e-post och lösenord. Fältet för e-post är inramat i blått.

Om du redigerar temats formatmall ska du se till att du inte tar bort stilen för tangentbordsfokus från några sidelement. Använd följande riktlinje:

  • Alla interaktiva sidelement har en tydlig visuell indikator när de har tangentbordsfokus. Dessa element inkluderar länkar, knappar och formulärfält.

Resurser

Se följande resurser för att lära dig mer om webbtillgänglighet för de ämnen som diskuteras i den här artikeln.

Resurser för färgkontrast

Textresurser

Resurser för alternativ text

Resurser för bildspel och video

Resurser för tangentbordsstöd

I det här avsnittet