Tilgjengelighet for temaer

Når du tilpasser temaet ditt, er det en god idé å ta design- og innholdsvalg som gjør nettbutikken din tilgjengelig. Et tilgjengelig nettsted er designet slik at det kan brukes av hvem som helst – inkludert personer med nedsatt funksjonsevne. Tilgjengelighet for nettbutikken din er viktig for å gi en inkluderende opplevelse til kundene dine.

Veiledningene nedenfor ble opprett med hensyn til veiledningene for tilgjengelighet for nettinnhold (WCAG). Siden det er mange faktorer å ta hensyn til ved opprettelse av et tilgjengelig nettsted, garanteres det ikke at nettbutikken din blir helt tilgjengelig ved å bare følge veiledningene nedenfor. Du kan finne ut mer om tilgjengelighet på nettet ved å gå til WCAG-nettstedet eller sjekke ressursene som er oppført nedenfor.

Tilgjengelighet for tekst

Det er viktig at teksten på nettbutikken din kan leses av kunder som ser dårlig eller som har vanskeligheter med å lese tette blokker med tekst.

Fargekontrast

Når du redigerer fargene for nettbutikken din må du sørge for at all teksten er tilgjengelig for kunder som er fargeblinde eller som har andre synshemninger. Disse kundene er avhengig av tilstrekkelig fargekontrast for å kunne skille ting fra hverandre. Du kan bruke et nettbasert verktøy for kontrastforhold for å sjekke kontrasten til de forskjellige delene av butikken din.

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

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

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

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

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

  • Fargen til brødteksten og knappeteksten har et kontrastforhold på minst 4,5:1 mot bakgrunnen.
  • Fargen til overskrifter og annen stor tekst (skriftstørrelse 24 piksler eller større) har et kontrastforhold på minst 3:1 mot bakgrunnen.
  • Fargen til all tekst over bilder, inkludert lysbilder, bannere og videoer, har tilstrekkelig kontrastforhold mot bakgrunnen. For stor tekst (skriftstørrelse 24 piksler eller større) er kontrasten minst 3:1. For mindre tekst er kontrasten minst 4,5:1.
  • Fargen på andre elementer enn tekst, inkludert inndatagrenser og ikoner, har et kontrastforhold på minst 3:1 mot bakgrunnen.

Tekstoverskrifter

Når du legger til overskrifter på siden med redigeringsprogrammet for rik tekst, er det viktig å holde dem i rekkefølge (1–6). Overskrifter brukes av assisterende teknologi til å kommunisere hvordan sideinnholdet er organisert. Hvis du hopper over nivåer, for eksempel overskriftnivå 2 etterfulgt av overskriftnivå 4, kan det være forvirrende for brukere. Bruk følgende retningslinjer:

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

Tekststørrelse og justering

Når du redigerer temaets typografiinnstillinger, må du sørge for at teksten er stor nok til at det er komfortabelt for kunden å lese den.

Teksten bør også ha konsekvent avstand mellom ord og bokstaver for å gjøre det enkelt å lese den. I eksempelet nedenfor er tekstinnrettingen justert, noe som gir inkonsekvent avstand mellom ord.

En blokk med tekst med justert innretting. Hver tekstlinje fyller området fra ende til ende, noe som tvinger frem variert avstand mellom ord for å få den til å passe.

I det neste eksempelet er tekstinnrettingen venstrejustert, noe som gir konsekvent avstand mellom ord.

En blokk med venstrejustert tekst. Det er konsekvent avstand mellom hvert ord.

Bruk følgende retningslinjer når du justerer størrelsen og innrettingen av teksten:

  • Minimumsstørrelsen til tekst i brødteksten tilsvarer 16 piksler.
  • Tekstinnretting er ikke justert. Justert tekst skaper inkonsekvent avstand mellom ord.

Tekstkoblinger

Når du legger til koblinger i teksten din, må du sørge for at de kan identifiseres av alle kundene dine. Siden noen kunder har problemer med å se farger, kan du ikke stole på at en fargeendring er tilstrekkelig for å skille en kobling fra vanlig tekst. I eksemplet nedenfor er Oppdag historien vår-teksten understreket, slik at den ikke er avhengig av fargeendringen for å vise at teksten er en kobling:

En velkomstmelding som sier «Oppdag historien vår og møt personene som gjør merkevaren vår til det den er». Teksten «Oppdag historien vår» er rød og understreket for å vise at det er en kobling.

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

  • Tekstkoblinger er enten understreket eller har andre visuelle særtrekk slik at den skilles fra vanlig tekst.

Alternativ tekst for bilder

Når du legger til bilder på nettbutikken din, er det viktig at du gjør det tilgjengelige for kunder som er blinde eller ser dårlig. Du kan gjøre det ved å legge til alternativ tekst som beskriver hvert bilde på en nøyaktig måte. Kunder som bruker skjermlesere, er avhengige av alternativ tekst for å få med seg innholdet på bilder på nettbutikken din.

Du kan legge til alternativ tekst til produktbildene dine fra Shopify-administratoren. Du kan legge til alternativ tekst i de andre bildene i temaet ditt fra redigeringsprogrammet for temaer.

Når du legger til alternativ tekst for et bilde, er det god praksis å late som om du beskriver bildet til noen som har lukket øynene. Hjelp vedkommende med å skape et bilde i hodet. Måten du beskriver et bilde på er også avhengig av sammenhengen til nettsiden. Du kan for eksempel beskrive et bilde på en annen måte hvis forretningen er et reisebyrå enn hvis forretningen din selger utendørsutstyr. Tenk på følgende bilde:

To venner med ryggsekk med armene rundt hverandre ser på havet

For et reisebyrå kan du henvise til landet og området de to vennene reiser i, og oppgi navnet til havet eller sjøen de ser på. Hvis forretningen din selger utendørsutstyr kan du derimot fokusere på merkevaren og funksjonene til ryggsekkene til de to vennene.

Hvis forretningen din er et reisebyrå, kan et eksempel på dårlig alternativ tekst være «To personer foran havet». For samme byrå kan et eksempel på god alternativ tekst være «To venner som reiser i Lagos i Portugal og ser ut på sandkanten av Praia do Camilo på en solrik dag».

Tilgjengelighet for lysbilder og videoer

Når du legger til videoer i nettbutikken din, må du sørge for at du tar hensyn til behovene til kunder med dårlig syn, kunder som er døve eller hører dårlig, eller kunder som kan være utsatt for balanseforstyrrelser.

Noen av disse kundene er avhengig av tekst til tale-evnen til skjermlesere som leser opp inneholdet til en nettside. Ytterligere lyd fra videoer og musikk – spesielt når det er uventet – kan gjøre denne opplevelsen vanskelig. For kunder som er døve eller hører dårlig, er det en god idé å legge til teksting i videoene dine, slik at disse kundene har tilgang til innholdet.

Kunder med balanseforstyrrelser kan oppleve svimmelhet med innhold i bevegelse. Derfor er det viktig at lysbildefremvisning og videoer ikke spilles av automatisk.

Lysbildefremvisninger

Bruk følgende retningslinjer når du legger til lysbilder på nettbutikken din:

  • Lysbildefremvisninger spilles ikke av automatisk.
  • Hvis lysbildefremvisningene spilles av automatisk, inkluderer de en innstilling kunder kan bruke til å sette lysbildefremvisningen på pause eller stoppe den.

Videoer

Bruk følgende retningslinjer når du legger til videoer på nettbutikken din:

  • Videoer spilles ikke av automatisk.
  • Hvis videoer spilles av automatisk, er lyden slått av.
  • For videoer som inkluderer lyd, er videoen helt synlig og ikke blokkert av andre sideelementer. Dette gjør at teksting forblir synlig.
  • Tekstutskrifter er tilgjengelige for videoer som inkluderer dialog. Disse inkluderes enten på siden eller i en kobling til en egen side.

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

Tastaturstøtte

Kunder som ser dårlig eller har nedsatt motoriske evner, kan bruke et tastatur for å navigere og fullføre oppgaver på nettet. Disse kundene er avhengig av en visuell indikator for å se hvor tastaturet fokuserer på en nettside. I eksemplet nedenfor har E-post-feltet en visuell fokusindikator:

Påloggingsskjermen for kunder i en nettbutikk som viser skjemafeltene for e-postadresse og passord. E-post-feltet er fremhevet i blått.

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

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

ressurser

Bruk følgende ressurser for å finne ut mer om tilgjengelighet på nettet for emnene som diskuteres i denne artikkelen.

Ressurser for fargekontrast

Tekstressurser

Ressurser for alternativ tekst

Ressurser for lysbilder og videoer

Ressurser for tastaturstøtte

Er du klar til å begynne å selge med Shopify?

Prøv det gratis