Tilgjengelighet for temaer

Også i denne seksjonen

• Legge til alternativ tekst for temabilder

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.

Tips

Hvis du er en utvikler, kan du tilpasse temaet ditt ytterligere for tilgjengelighet med Shopify-verktøy og beste praksis. Finn ut mer på Shopify.dev.

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.

Tips

I noen temaer kan du legge et fargeoverlegg mellom teksten og et bilde for å forbedre kontrasten og lesbarheten til teksten.

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.

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.

Merk

Forskjellige skrifttyper kan se større eller mindre ut, selv om de har samme skriftstørrelse. Hvis skrifttypen du bruker ser mindre ut enn andre skrifttyper ved 16 piksler, bør du bruke større skriftstørrelse.

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. Tekst må være understreket, slik at den ikke er avhengig av fargeendringen for å kommunisere at teksten 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 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 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:

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

• 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

Ressurser for tastaturstøtte

• Keyboard Compatibility, en artikkel fra Web Accessibility Initiative
• Introduction to Focus, en artikkel fra Google Developers