Rettelser af tilgængelighed i koden til dit tema på Shopify

Et layout, hvis <html>-element ikke har nogen lang-attribut eller har en tom eller ugyldig lang-attribut, får det sprog, som din webshop viser, så skærmlæsere udtaler siden på det rigtige sprog. Hvor temaet allerede gemmer en sides eget sprog i et metafelt, for eksempel til juridiske sider på tysk i en engelsksproget webshop, bruger layoutet det metafelt, når det er udfyldt. Uden et sådant felt gætter opskriften ikke på en sides sprog.

Et link med teksten »Skip to content« bliver det første element på hver side. Det er skjult, indtil en tastaturbruger når det, og det fører til hovedindholdet, som markeres som sidens hovedområde. Navigationsområder, der optræder på samme side, får forskellige navne, for eksempel Main menu, Footer menu eller Breadcrumbs, og indhold uden for alle sidens områder, for eksempel en meddelelsesbjælke, bliver en navngivet region. Et eksisterende spring over-link, der ikke peger på noget, får hovedindholdet som mål. Hvilke af disse ændringer der foretages, afhænger af, hvad scanningen fandt.

Hvert layout, hvis <title> mangler, er tom eller har den samme faste tekst på alle sider, får en titel bygget af Shopifys variabler. Hvis dit hovedlayout allerede har en titel, der navngiver siden, får de øvrige layouts den samme. Ellers består titlen af sidens titel, sidetallet på en liste med sideinddeling og webshoppens navn, og ordet for »side« oversættes via temaets sprogfiler.

En overskrift, der springer et niveau over, for eksempel en h4 lige efter en h2, får det niveau, der ligger lige under den foregående overskrift, i den sektionsfil, hvor den er skrevet. Hvor temaet styler overskrifter efter deres niveau, bevarer en lille stilregel overskriftens gamle udseende. På en side uden hovedoverskrift bliver det element, der allerede ligner sidens titel, til h1; på forsiden er det temaets egen indstilling til at vise logoet som h1. Har en side intet sådant element, tilføjer opskriften ingen skjult overskrift, fordi det er en beslutning om indhold.

Hovedstilarket får én markering af tastaturfokus: en ubrudt streg på 2 pixels, 2 pixels fra elementet, i dit temas accentfarve (eller dets tekstfarve, eller sort eller hvid, hvor temaet ikke har nogen accentfarve), gjort lysere eller mørkere i samme farvetone, indtil den har en kontrast på mindst 3:1 mod sidens baggrund. Temaregler, der stadig ville skjule markeringen, mister deres outline: none, medmindre de viser fokus på anden måde, for eksempel med en kant eller en skygge. Markeringen har samme farve i hele temaet, så på sektioner med et mørkt farveskema kan den have brug for en lysere farve; det kontrollerer din udvikler i forhåndsvisningen.

Et tabindex over 0 trækker et element forrest i tastaturrækkefølgen. Opskriften fjerner det fra links, knapper, formularfelter og andre elementer, der alligevel kan få fokus, og sætter det til 0 på andre elementer, så de stadig kan nås, mens Tab-tasten følger sidens rækkefølge. Et tabindex, som temaets skabelonkode skriver, overlades til et menneske. Opskriften håndterer også de fund fra kontrollen af fokusrækkefølgen (vs-focus-order), der handler om et tabindex over 0; resten af den kontrol forbliver på niveau MANUAL.

Elementer, der kan klikkes på, men som kun virker med en mus, for eksempel prikkerne i et slideshow eller valgene i et cookiebanner bygget af <div>- eller <span>-elementer, bliver til rigtige <button>-elementer. Alle klasser og attributter bevares, så temaets script fortsat virker, og Enter og mellemrumstasten gør nu det samme som et klik. En knap uden navn får et ud fra sit formål, for eksempel »Load slide 2 of 3«, og en lille nulstilling af knappens standardstil bevarer dens udseende. Et element, som intet script lytter til, eller hvis formål er uklart, bliver, som det er.

Opskriften fjerner user-scalable=no og enhver maximum-scale under 5 fra viewport-taggene i temaets Liquid-filer, så besøgende kan zoome ind med to fingre, op til 500 %. De øvrige viewport-indstillinger forbliver nøjagtig, som de var. En zoombegrænsning, som temaets skabelonkode sætter, overlades til et menneske.

Betjeningselementer, som scanningen fandt for små, for eksempel ikoner i sidehovedet, farveprøver eller knapper til antal, får en minimumsstørrelse på 24 × 24 pixels i hovedstilarket, udpeget via deres klasse. Ikonerne inde i dem bevarer deres størrelse. Et link eller et andet element, som temaet lader være inline, gøres til inline-flex med ikonet centreret, fordi inline-elementer ignorerer en minimumsstørrelse.

Når en tekst ikke består kontrastkontrollen, og dens farve kun er defineret ét sted, ændres farven til den nærmeste lysere eller mørkere nuance i samme farvetone, der giver den krævede kontrast mod alle de baggrunde, som scanningen rapporterede for den. Stedet kan være den stilarksregel, der styler teksten, eller en CSS-variabel eller en farveindstilling i config/settings_data.json, som intet andet i temaet bruger. En farve, der beregnes i Liquid eller er defineret flere gange, overlades til et menneske, og det samme gælder en delt farve, fordi en ændring ville påvirke farvepar, som scanningen ikke har målt.

Når en besøgendes enhed er indstillet til at reducere bevægelse, lader en blok sidst i hovedstilarket hver CSS-animation kun køre én gang, for kort til at kunne ses, forkorter overgange og slår blød scrolling fra. Hvor temaets script selv starter et slideshows automatiske afspilning, springes starten over for de besøgende. Bevægelse, som et tredjepartsscript styrer, ændres ikke af denne opskrift.

Et slideshow, der bevæger sig af sig selv, får blandt sine betjeningselementer en synlig, oversat knap til pause og afspilning, som kun vises, når automatisk afspilning er slået til. Et kort script i temaets hovedscriptfil forbinder knappen med slideshowets egen automatiske afspilning: Dawns slideshow, Swiper, Slick, Flickity, Splide eller en CSS-animation. For besøgende, hvis enhed beder om reduceret bevægelse, er slideshowet sat på pause fra starten.

<blink>- og <marquee>-elementer i temaet bliver til statiske elementer med samme indhold, klasser og id’er: en <span> for blink, en <div> for marquee eller en <span>, hvor marqueen sidder inde i et afsnit eller et link. Marqueens rulleindstillinger fjernes, så ingen tekst bevæger sig af sig selv.

En video, der afspilles af sig selv, får muted og playsinline, så den fortsætter med at spille lydløst, som en baggrundsvideo gør, og Shopifys video_tag-filter får muted: true. Lyd, der startede af sig selv, gør det ikke længere. Indlejrede YouTube- og Vimeo-afspillere overlades til et menneske. I en Validiscan-scanning rapporteres lyd, der starter af sig selv, af mediekontrollen vs-media, som erstatter den axe-core-regel, som denne opskrift dækker. vs-media har niveau MANUAL, og på Shopify bruges denne opskrift ikke til dens fund.

Et formularfelt, hvis etiket allerede er synlig som tekst på siden, men ikke er knyttet til feltet, bliver knyttet til det: Et <label>-element ved siden af får en for-attribut, der peger på feltet, eller en tekst lige før feltet, for eksempel navnet på et størrelses- eller farvevalg, bliver dets etiket via aria-labelledby, så layoutet ikke ændres. Skærmlæsere læser så etiketten op, når feltet får fokus. Et felt, der kun har en pladsholdertekst, overlades til et menneske, fordi det er en beslutning om indhold at skrive en etiket.

Adresse-, konto-, login- og kontaktfelter, som scanningen markerede, får den autocomplete-værdi, der svarer til det, de spørger efter, for eksempel e-mail, for- og efternavn, vejadresse, postnummer, land, telefonnummer eller adgangskode. Værdien udledes af feltets type, navn, etiket og pladsholdertekst. Hvor et snippet udskriver sine felter ud fra parametre, udskriver felterne en autocomplete-parameter, og hvert render-kald af snippettet sender den værdi, som kaldets egne argumenter tilsiger. Browsere kan så udfylde felterne, og hjælpemidler kan se, hvad hvert felt skal bruges til. Et felt, hvis formål koden ikke viser, bliver, som det er.

Den del af en side, som temaets script omskriver, når en kunde vælger en anden variant eller ændrer et antal, for eksempel prisen, beskeden om lagerstatus eller subtotalen i kurven, markeres som et statusområde. Skærmlæsere læser så den nye værdi op, uden at kunden behøver at gå derhen. Temaets script ændres ikke. Et område, der også rummer knapper eller links, som ville blive læst op sammen med det, bliver, som det er.

Knapper og links, der kun viser et ikon, for eksempel søgning, kurv, konto, pile i slideshows, knapper til antal og cookievalg, får et navn, der siger, hvad de gør, hvor koden viser deres formål. Navnet er visuelt skjult tekst inde i betjeningselementet eller en aria-label, hvor temaet ikke har nogen klasse til skjult tekst. Et logolink, hvis billede ikke har noget tekstalternativ, får din webshops navn. Et betjeningselement, hvis navn skulle komme fra dit eget indhold, overlades til et menneske.

Et billede markeres kun som dekorativt, når koden beviser, at det ikke tilføjer noget: Det sidder i et link eller en knap, der har sin egen tekst, det er et ikon ved siden af sin egen tekstetiket, eller det er en afstandsholder eller en skillelinje. Et <img>-element får så et tomt alt="", og et SVG-ikon får aria-hidden="true", så skærmlæsere springer det over i stedet for at læse et filnavn eller ordet »billede« op. Ethvert andet billede er indhold, og dets tekstalternativ overlades til et menneske.

En indlejret ramme uden titel, for eksempel et kort eller en YouTube- eller Vimeo-video, får en oversat titel, der siger, hvad den viser. Opskriften udleder det af rammens kildeadresse eller indhold. En ramme, hvis indhold koden ikke viser, får ingen generisk titel; den overlades til et menneske.