Tilgjengelighet for temaer
Når du tilpasser temaet ditt, ta design- og innholdsvalg som gjør nettbutikken din tilgjengelig. Et tilgjengelig nettsted er designet slik at det kan brukes av alle, inkludert personer med nedsatt funksjonsevne. Når du tar valg med tanke på tilgjengelighet for nettbutikken din, kan det bidra til å gi en inkluderende opplevelse for alle kundene dine.
Veiledningene nedenfor ble opprett med hensyn til veiledningene for tilgjengelighet for nettinnhold (WCAG). Siden det er mange faktorer å ta høyde for når man oppretter et tilgjengelig nettsted, vil det ikke garantere at nettbutikken er fullstendig tilgjengelig hvis du bare følger retningslinjene nedenfor. Du kan finne ut mer om tilgjengelighet på nettet ved å gå til WCAG-nettstedet eller sjekke ressursene som er oppført nedenfor.
På denne siden
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.
I neste eksempel har teksten et kontrastforhold på 4,8:1 og er enkelt å lese for mange kunder.
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 at de er i rekkefølge (1–6). Overskrifter brukes av assisterende teknologi til å kommunisere hvordan sideinnholdet er organisert. Hvis du hopper over nivåer, for eksempel overskriftsnivå 2 etterfulgt av overskriftsnivå 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.
I det neste eksempelet er tekstinnrettingen venstrejustert, noe som gir konsekvent avstand mellom 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
Tekstkoblinger skal være understreket, eller ha en annen visuell distinkt stil sammenlignet med vanlig tekst. 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.
Tekstkoblinger bør åpnes i samme fane. Koblinger som åpnes i en ny fane eller vindu kan føre til forvirring, spesielt på mobil der det forrige vinduet ikke er synlig, og er ikke inkluderende for kundene, spesielt kunder som bruker skjermforstørrelse eller som er mindre tekniske.
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 en annen visuell differensiator ut over farge, slik at kundene kan skille koblinger fra vanlig tekst.
- Tekstkoblinger åpnes i samme fane når de klikkes på.
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 produktbilder fra Shopify-administrator. Du kan legge til alternativ tekst i de andre bildene i temaet fra temaredigeringsprogrammet.
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:
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 vestibularforstyrrelser kan oppleve svimmelhet med innhold i bevegelse. Derfor er det viktig at lysbildefremvisninger og videoer ikke spilles av automatisk, og at kunden kan kontrollere lysbildefremvisningen med kontrollknapper.
Lysbildefremvisninger
Bruk følgende retningslinjer når du legger til lysbilder på nettbutikken din:
- Lysbildefremvisninger spilles ikke av automatisk.
- Hvis lysbildefremvisninger spilles av automatisk, må de inkludere lysbildekontroller, slik at kundene kan pause, gå videre eller stanse lysbildefremvisningen.
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:
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 å få mer informasjon om nettilgjengelighet for emnene som diskuteres i denne artikkelen.
Ressurser for fargekontrast
- Colors with Good Contrast, en artikkel fra Web Accessibility Initiative
- Contrast Ratio, et nettbasert verktøy du kan bruke til å finne kontrastforholdet mellom to farger.
- Color Contrast Analyzer, en app for kontrastforhold som kan lastes ned, som ble utviklet av Paciello Group
Tekstressurser
- 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, en artikkel fra Smashing Magazine
- Text alignment, en artikkel fra Web AIM
- Link Appearance, en artikkel fra Web AIM
- Using Headings for Content Structure, en artikkel fra Web AIM
Ressurser for alternativ tekst
- Text to Speech, en artikkel fra Web Accessibility Initiative
- Alternative Text, en artikkel fra Web AIM
- Considerations when writing alt text, en artikkel på Medium.
Ressurser for lysbilder og videoer
- A Primer to Vestibular Disorders, en artikkel fra The A11Y Project
- Text to Speech, en artikkel fra Web Accessibility Initiative
- Video Captions, en artikkel fra Web Accessibility Initiative
- Use automatic captioning, en artikkel fra YouTube Help
- Captions and subtitles, en artikkel fra Vimeo Help Center
- Brukervennlighet for karuseller, en artikkel fra Nielsen Norman Group
Ressurser for tastaturstøtte
- Keyboard Compatibility, en artikkel fra Web Accessibility Initiative
- Introduction to Focus, en artikkel fra Google Developers