Hjælp
Log ind

Tilgængelighed for temaer

Når du tilpasser dit tema, skal du træffe design- og indholdsvalg, der er med til at holde din webshop tilgængelig. Et tilgængeligt website er designet, så det kan bruges af alle, herunder personer med handicap. Når du træffer valg for din webshop med tilgængelighed for øje, kan du være med til at give alle dine kunder en inkluderende oplevelse.

Retningslinjerne nedenfor er udarbejdet med Web Content Accessibility Guidelines (WCAG) for øje. Da der er mange faktorer, der skal tages i betragtning, når man skaber et tilgængeligt website, garanterer det ikke, at din webshop er fuldt tilgængelig, hvis du kun følger nedenstående retningslinjer. Du kan få mere at vide om webtilgængelighed ved at besøge WCAG's website eller se de ressourcer, der er angivet nedenfor.

På denne side

Teksttilgængelighed

Det er vigtigt, at teksten i din webshop er læsbar for kunder, der er synshandicappede eller har svært ved at læse tætte tekstblokke.

Farvekontrast

Når du redigerer farverne i din webshop, skal du sørge for, at al din tekst er tilgængelig for kunder, der er farveblinde eller på anden måde synshandicappede. Disse kunder er afhængige af tilstrækkelig farvekontrast for visuelt at kunne skelne én ting fra en anden. Du kan bruge et online værktøj til kontrastforhold til at tjekke kontrasten på de forskellige dele af din butik.

I eksemplet nedenfor har teksten et kontrastforhold på 2,4:1 i forhold til baggrunden, og den er svær at læse for nogle kunder.

En blok med lysegrå tekst og en helt hvid baggrund.

I det næste eksempel har teksten et kontrastforhold på 4,8:1, og den er nemmere at læse for mange kunder.

En blok med mørkegrå tekst på en helt hvid baggrund.

Test kontrasten af al tekst, herunder brødtekst, overskrifter, links og formularfelter. Brug følgende retningslinjer:

  • Farven på brødtekst og knaptekst skal have et kontrastforhold på mindst 4,5:1 i forhold til baggrunden.
  • Farven på overskrifter og anden stor tekst (skriftstørrelse 24 px og derover) skal have et kontrastforhold på mindst 3:1 i forhold til baggrunden.
  • Farven på al tekst over billeder, herunder diasshows, bannere og videoer, skal have tilstrækkelige kontrastforhold i forhold til baggrunden. For stor tekst (skriftstørrelse 24 px og derover) skal kontrasten være mindst 3:1. For mindre tekst skal kontrasten være mindst 4,5:1.
  • Farven på elementer, der ikke er tekst, herunder inputkanter og ikoner, skal have et kontrastforhold på mindst 3:1 i forhold til baggrunden.

Tekstoverskrifter

Når du føjer overskrifter til din side med rich text-editoren, er det vigtigt at holde dem i rækkefølge (1-6). Overskrifter bruges af teknologiske hjælpemidler til at kommunikere, hvordan sideindholdet er organiseret. Hvis du springer niveauer over, f.eks. en overskrift på niveau 2 efterfulgt af en overskrift på niveau 4, kan det være forvirrende for brugerne. Brug følgende retningslinje:

  • Overskrifter bruges i rækkefølge, og der springes ikke niveauer over.

Tekststørrelse og justering

Når du redigerer indstillingerne for typografi i dit tema, skal du sørge for, at teksten er stor nok til, at kunderne nemt kan læse den.

Teksten bør også have ensartet afstand mellem ord og bogstaver, så den er nem at læse. I eksemplet nedenfor har teksten lige margener, hvilket skaber uensartet afstand mellem ordene.

En tekstblok med lige margener. Hver tekstlinje fylder hele bredden, hvilket skaber varierende afstand mellem ordene.

I det næste eksempel er teksten venstrejusteret, hvilket skaber ensartet afstand mellem ordene.

En venstrejusteret tekstblok. Der er ensartet afstand mellem hvert ord.

Når du tilpasser størrelsen og justeringen af teksten, skal du følge disse retningslinjer:

  • Den mindste skriftstørrelse for brødtekst svarer til 16 px.
  • Teksten er ikke justeret med lige margener. Tekst med lige margener skaber uensartet afstand mellem ordene.

Tekstlinks

Tekstlinks bør være understregede eller have en anden visuelt markant typografi sammenlignet med almindelig tekst. Da nogle kunder har svært ved at se farver, kan du ikke udelukkende benytte en farveændring til at adskille et link fra almindelig tekst.

Tekstlinks bør åbne i den samme fane. Links, der åbner i en ny fane eller et nyt vindue, kan skabe forvirring, især på mobilenheder, hvor det gamle vindue ikke er synligt. De er heller ikke inkluderende for kunder, især kunder, der bruger skærmforstørrelse eller er mindre teknisk kyndige.

Hvis du redigerer dit temas typografiark, skal du sørge for ikke at fjerne typografien for tekstlinks. Følg disse retningslinjer:

  • Tekstlinks er enten understregede eller har en anden visuel markør, der ikke kun er en farve, så kunder kan skelne links fra almindelig tekst.
  • Tekstlinks åbner i den samme fane, når der klikkes på dem.

Alternativ tekst til billeder

Når du føjer billeder til din webshop, er det vigtigt at gøre dem tilgængelige for kunder, der er blinde eller svagtseende. Det kan du gøre ved at tilføje alternativ tekst, der beskriver hvert billede præcist. Kunder, der bruger skærmlæsere, er afhængige af alternativ tekst til at formidle indholdet af billederne i din webshop.

Du kan føje alternativ tekst til dine produktbilleder fra din Shopify-administrator. Du kan føje alternativ tekst til de andre billeder i dit tema fra temaeditoren.

Når du føjer alternativ tekst til et billede, er det en god fremgangsmåde at lade som om, du beskriver billedet for en person med lukkede øjne. Hjælp vedkommende med at danne sig et billede i hovedet. Måden, du beskriver et billede på, afhænger også af konteksten på din webside. Du kan f.eks. beskrive et billede anderledes, hvis din virksomhed er et rejsebureau, end hvis den er en butik med outdoor-udstyr. Se på følgende billede:

To venner med rygsække på, der har armene om hinanden og kigger ud over havet

For et rejsebureau kan du henvise til det land og det område, hvor de to venner rejser, samt navnet på det hav, de kigger ud på. For en butik med outdoor-udstyr kan du derimod fokusere på de brands og funktioner, som de to venners rygsække har.

Hvis din virksomhed er et rejsebureau, kan et eksempel på en dårlig alternativ tekst være: “To personer foran havet.” For det samme bureau kan et eksempel på en god alternativ tekst være: “To venner, der rejser i Lagos i Portugal og kigger ud over den sandede bugt Praia do Camilo på en solskinsdag.”

Tilgængelighed for diasshow og videoer

Når du føjer videoer til din webshop, skal du sørge for at tage hensyn til behovene hos kunder med nedsat syn, kunder, der er døve eller har nedsat hørelse, eller kunder, der kan være modtagelige over for vestibulære lidelser.

Nogle af disse kunder er afhængige af skærmlæseres tekst-til-tale-funktionalitet, der læser indholdet på en webside højt. Yderligere lyd fra videoer og musik, især når den er uventet, kan gøre denne oplevelse vanskelig. For kunder, der er døve eller har nedsat hørelse, er det en god idé at føje undertekster til dine videoer, så disse kunder kan få adgang til indholdet.

Kunder med vestibulære lidelser kan opleve svimmelhed ved indhold, der bevæger sig. Derfor er det vigtigt, at diasshows og videoer ikke afspilles automatisk, og at kunden kan styre diasshowet med kontrolknapper.

Diasshows

Når du føjer et diasshow til din webshop, skal du følge disse retningslinjer:

  • Diasshows afspilles ikke automatisk.
  • Hvis diasshows afspilles automatisk, skal de indeholde kontrolelementer, som kunderne kan bruge til at sætte diasshowet på pause, gå frem eller stoppe det.

Videoer

Når du føjer en video til din webshop, skal du følge disse retningslinjer:

  • Videoer afspilles ikke automatisk.
  • Hvis videoer afspilles automatisk, er deres lyd slået fra.
  • For videoer, der indeholder lyd, skal videoen være fuldt synlig og ikke blokeret af andre sideelementer. På den måde forbliver underteksterne synlige.
  • For videoer, der indeholder dialog, skal der være tekstudskrifter tilgængelige. Disse skal være inkluderet enten på siden eller i et link til en separat side.

Disse retningslinjer gælder også for videoer, der er i et diasshow.

Tastatursupport

Kunder med nedsat syn eller motoriske handicap bruger muligvis et tastatur til at navigere og udføre opgaver online. Disse kunder er afhængige af en visuel markør, der viser, hvor deres tastaturfokus er på en webside. I eksemplet nedenfor har feltet Mail en visuel fokusmarkør:

En kundeloginskærm i en webshop, der viser formularfelter for mail og adgangskode. Mailfeltet er markeret med en blå kant.

Hvis du redigerer dit temas typografiark, skal du sørge for, at du ikke fjerner typografien for tastaturfokus fra nogen sideelementer. Følg denne retningslinje:

  • Alle interaktive sideelementer har en tydelig visuel markør, når de har tastaturfokus. Disse elementer omfatter links, knapper og formularfelter.

Ressourcer

Hvis du vil vide mere om webtilgængelighed i forbindelse med de emner, der er diskuteret i denne artikel, kan du se følgende ressourcer.

Ressourcer til farvekontrast

Ressourcer til tekst

Ressourcer til alternativ tekst

Ressourcer til diasshow og video

Ressourcer til tastatursupport

I dette afsnit