Hjelp
Logg på

Tilgjengelighet for temaer

Når du tilpasser temaet ditt, må du ta design- og innholdsvalg som bidrar til å holde nettbutikken tilgjengelig. Et tilgjengelig nettsted er utformet slik at det kan brukes av alle, inkludert personer med nedsatt funksjonsevne. Ved å ta valg for nettbutikken din med tanke på tilgjengelighet, kan du bidra til å gi en inkluderende opplevelse for alle kundene dine.

Retningslinjene nedenfor ble opprettet med Web Content Accessibility Guidelines (WCAG) i tankene. Siden det er mange faktorer å vurdere når du oppretter et tilgjengelig nettsted, garanterer ikke det å bare følge retningslinjene nedenfor at nettbutikken din er fullt tilgjengelig. Du kan finne ut mer om nettilgjengelighet ved å besøke WCAG-nettstedet, eller ved å se ressursene som er oppført nedenfor.

På denne siden

Teksttilgjengelighet

Det er viktig at teksten i nettbutikken din er lesbar for kunder som er svaksynte eller har problemer med å lese tette tekstblokker.

Fargekontrast

Når du redigerer fargene for nettbutikken, må du sørge for at all tekst er tilgjengelig for kunder som er fargeblinde eller på annen måte svaksynte. Disse kundene er avhengige av tilstrekkelig fargekontrast for å visuelt skille en ting fra en annen. Du kan bruke et kontrastforholdsverktøy på nettet for å sjekke kontrasten i de ulike delene av butikken.

I eksempelet nedenfor har teksten et kontrastforhold på 2,4:1 mot bakgrunnen, og er vanskelig å lese for noen kunder.

En blokk med lysegrå tekst og en heldekkende hvit bakgrunn.

I det neste eksempelet har teksten et kontrastforhold på 4,8:1 og er enklere å lese for mange kunder.

En blokk med mørkegrå tekst på en heldekkende hvit bakgrunn.

Test kontrasten på all tekst, inkludert brødtekst, overskrifter, koblinger og skjemafelt. Bruk følgende retningslinjer:

  • Fargen på brødtekst og knappetekst har et kontrastforhold på minst 4,5:1 mot bakgrunnen.
  • Fargen på overskrifter og annen stor tekst (skriftstørrelse 24 piksler og oppover) har et kontrastforhold på minst 3:1 mot bakgrunnen.
  • Fargen på all tekst over bilder, inkludert lysbildefremvisninger, bannere og videoer, har tilstrekkelig kontrastforhold mot bakgrunnen. For stor tekst (skriftstørrelse 24 piksler og oppover) er kontrasten minst 3:1. For mindre tekst er kontrasten minst 4,5:1.
  • Fargen på elementer som ikke er tekst, inkludert inndatabokser og ikoner, har et kontrastforhold på minst 3:1 mot bakgrunnen.

Tekstoverskrifter

Når du legger til overskrifter på siden med rich text-redigeringsprogrammet, er det viktig å beholde dem i rekkefølge (1–6). Overskrifter brukes av assisterende teknologier for å formidle hvordan sideinnholdet er organisert. Å hoppe over nivåer, for eksempel et overskriftsnivå 2 etterfulgt av et overskriftsnivå 4, kan være forvirrende for brukere. Bruk følgende retningslinje:

  • Overskrifter brukes i rekkefølge og hopper ikke over nivåer.

Tekststørrelse og justering

Når du redigerer temats typografiinnstillinger, må du sørge for at teksten er stor nok til at kundene enkelt kan lese den.

Tekst bør også ha jevn avstand mellom ord og bokstaver for å gjøre den lett å lese. I eksempelet nedenfor er tekstjusteringen blokkjustert, noe som skaper ujevn avstand mellom ordene.

En blokkjustert tekstblokk. Hver tekstlinje fyller plassen fra kant til kant, noe som tvinger frem varierende avstand mellom ordene for å få den til å passe.

I neste eksempel er tekstjusteringen venstrejustert, noe som skaper konsekvent avstand mellom ordene.

En venstrejustert tekstblokk. Det er konsekvent avstand mellom hvert ord.

Bruk følgende retningslinjer når du tilpasser størrelsen og justeringen av tekst:

  • Minste skriftstørrelse for brødtekst tilsvarer 16 px.
  • Tekstjusteringen er ikke blokkjustert. Blokkjustert tekst skaper inkonsekvent avstand mellom ordene.

Tekstlenker

Tekstlenker bør være understreket eller ha en annen visuelt distinkt stil sammenlignet med vanlig tekst. Ettersom noen kunder har problemer med å se farger, kan du ikke stole på en fargeendring alene for å skille en lenke fra vanlig tekst.

Tekstlenker bør åpnes i samme fane. Lenker som åpnes i en ny fane eller et nytt vindu kan skape forvirring, spesielt på mobil der det gamle vinduet ikke er synlig, og er ikke inkluderende for kunder, spesielt kunder som bruker skjermforstørrelse eller er mindre teknisk kyndige.

Hvis du redigerer temats stilark, må du sørge for at du ikke fjerner stiler for tekstlenker. Bruk følgende retningslinjer:

  • Tekstlenker er enten understreket eller har en annen visuell identifikator enn bare farge, slik at kundene kan skille lenker fra vanlig tekst.
  • Tekstlenker åpnes i samme fane når de klikkes på.

Alternativ tekst for bilder

Når du legger til bilder i nettbutikken, er det viktig å gjøre dem tilgjengelige for kunder som er blinde eller har nedsatt syn. Dette kan du gjøre ved å legge til alternativ tekst som beskriver hvert bilde nøyaktig. Kunder som bruker skjermlesere, er avhengige av alt. tekst for å formidle innholdet i bildene i nettbutikken.

Du kan legge til alt. tekst for produktbildene dine fra Shopify-administrator. Du kan legge til alt. tekst for de andre bildene i temaet ditt fra temaredigeringsprogrammet.

Når du legger til alt. tekst til et bilde, er det god praksis å late som du beskriver bildet til noen som har øynene lukket. Hjelp dem med å skape et bilde i tankene sine. Måten du beskriver et bilde på avhenger også av konteksten på nettsiden. Du vil for eksempel beskrive et bilde annerledes om bedriften din er et reisebyrå enn om det er en butikk for turutstyr. Se på følgende bilde:

To venner med ryggsekker som holder armene rundt hverandre og ser utover havet

For et reisebyrå kan du referere til landet og området de to vennene reiser i, og til navnet på havet de ser på. For en butikk for turutstyr, kan du på den annen side fokusere på merkevarene og egenskapene til de to vennenes ryggsekker.

Hvis bedriften din er et reisebyrå, kan et eksempel på dårlig alt. tekst være: «To personer foran havet.» For det samme byrået kan et eksempel på god alt. tekst være: «To venner på reise i Lagos, Portugal, som ser utover sandbukten Praia do Camilo på en solskinnsdag.»

Tilgjengelighet for lysbildefremvisning og video

Når du legger til videoer i nettbutikken, må du sørge for at du tar hensyn til behovene til kunder med nedsatt syn, kunder som er døve eller har nedsatt hørsel, eller kunder som kan være utsatt for vestibulære lidelser.

Noen av disse kundene er avhengige av tekst-til-tale-funksjonaliteten i skjermlesere, som leser innholdet på en nettside høyt. Ekstra lyd fra videoer og musikk, spesielt når den er uventet, kan gjøre denne opplevelsen vanskelig. For kunder som er døve eller har nedsatt hørsel, er det lurt å legge til teksting for hørselshemmede i videoene dine, slik at disse kundene får tilgang til innholdet.

Kunder med vestibulære lidelser kan oppleve svimmelhet av bevegelig innhold. Derfor er det viktig at lysbildefremvisninger og videoer ikke spilles av automatisk, og at kunden kan styre lysbildefremvisningen med kontrollknapper.

Lysbildefremvisninger

Bruk følgende retningslinjer når du legger til en lysbildefremvisning i nettbutikken:

  • Lysbildefremvisninger spilles ikke av automatisk.
  • Hvis lysbildefremvisninger spilles av automatisk, må de inneholde kontroller som kundene kan bruke til å pause, gå videre i eller stoppe lysbildefremvisningen.

Videoer

Bruk følgende retningslinjer når du legger til en video i nettbutikken:

  • Videoer spilles ikke av automatisk.
  • Hvis videoer spilles av automatisk, er lyden dempet.
  • For videoer som inneholder lyd, må videoen være fullt synlig og ikke blokkert av andre sideelementer. Dette gjør at teksting for hørselshemmede forblir synlig.
  • For videoer som inneholder dialog, må tekstutskrifter være tilgjengelige. Disse er inkludert enten på siden, eller i en lenke til en separat side.

Disse retningslinjene gjelder også for videoer som er i en lysbildefremvisning.

Tastaturstøtte

Kunder med syns- eller motoriske funksjonsnedsettelser kan bruke et tastatur for å navigere og fullføre oppgaver på nettet. Disse kundene er avhengige av en visuell indikator for å formidle hvor tastaturfokuset er på en nettside. I eksempelet nedenfor har E-post-feltet en visuell fokusindikator:

En kundeinnloggingsskjerm i en nettbutikk som viser skjemafelt for E-post og Passord. E-post-feltet er markert med blått.

Hvis du redigerer temats stilark, må du sørge for at du ikke fjerner stilen for tastaturfokus fra noen sideelementer. Bruk følgende retningslinje:

  • Alle interaktive sideelementer har en tydelig visuell indikator når de har tastaturfokus. Disse elementene inkluderer lenker, knapper og skjemafelt.

Ressurser

For å finne ut mer om nettilgjengelighet for emnene som er omtalt i denne artikkelen, kan du se følgende ressurser.

Ressurser for fargekontrast

Tekstressurser

Ressurser for alternativ tekst

Ressurser for lysbildefremvisning og video

Ressurser for tastaturstøtte

I denne seksjonen