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

Opskriften får <html>-elementet i dine header-skabeloner til at hente sit sprog fra WordPress’ language_attributes(), som udskriver webstedets sprog eller det sprog, et flersproget plugin angiver, så skærmlæsere udtaler siden rigtigt. En header-skabelon, der udelader sproget, får kaldet tilføjet, og en fast lang-værdi, der ikke er gyldig, erstattes af det. Hvis den forkerte værdi kommer fra indstillingen for webstedets sprog i din WordPress-administration, ændrer opskriften intet, fordi det er en indstilling og ikke temakode. Hvor temaet allerede læser et sprogfelt for hver side, for eksempel til tyske juridiske sider i en engelsksproget webshop, angiver et filter i functions.php den sides sprog, og sidehovedet og sidefoden på webstedet beholder webshoppens sprog. Uden et sådant felt gætter opskriften ikke på sproget.

Hver header-skabelon uden et spring over-link får et link med teksten »Skip to content« lige efter det åbnende <body>-tag eller efter kaldet til wp_body_open(), der følger efter det. Det er skjult, indtil det får fokus, og det fører til sidens indhold. Hvis dit tema er et child-tema af Storefront og har slået Storefronts spring over-links fra, slås de i stedet til igen. Hvor skabelonerne endnu ikke har noget hovedområde, bliver sideskabelonernes indholdscontainer, en <div> med id’et main eller klassen site-main, til et <main>-element, som markerer den som sidens hovedområde; hvor temaets stilregler eller scripts udpeger den container som en div, forbliver den, som den er. Navigationsområder, hvis formål fremgår af deres id eller klasse, får et navn, for eksempel Primary navigation, Breadcrumb, Footer navigation eller Pagination. Et eksisterende spring over-link, der ikke peger på noget, får indholdet som mål. Linkteksten og navnene tilføjes på engelsk.

WordPress bygger selv en sidetitel ud fra navnet på siden eller produktet, sidetallet på en liste med sideinddeling og webshoppens navn. Opskriften reparerer det, der i temaet forhindrer den titel i at blive vist. Et titelfilter, der returnerer en tilpasset titel, for eksempel fra et SEO-felt, bruger i stedet den genererede titel, når feltet er tomt. En fast <title>-tekst i en header-skabelon erstattes af den titel, WordPress genererer. Et tema, der ikke er et child-tema og slet ikke udskriver nogen titel, får WordPress’ titelunderstøttelse slået til i functions.php. Når titlen kommer fra et SEO-plugin eller fra en sides egne indstillinger, ændrer opskriften intet.

En overskrift, der springer et niveau over, for eksempel en h4 lige efter en h2, får det niveau, der ligger lige under overskriften før den, i skabelonen eller i den PHP-streng, der udskriver den. Widget-titler og overskrifter i sidefoden eller en sidebjælke bliver h2. Når springet kommer fra en WooCommerce-skabelon, der vises lige efter sidens titel, for eksempel Billing details og Shipping details i kassen, flytter overskrifterne på samme niveau i de nærliggende skabeloner med. Kun niveauet ændres: Hver overskrift beholder sine klasser, og en overskrift, som temaets stilregler eller scripts udpeger via dens niveau, bliver, som den er. En overskrift uden klasse får temaets udseende for sit nye niveau. På en side uden hovedoverskrift bliver det element, der allerede ligner sidens titel, til h1: et element med en titelklasse, der er sat til mindst 24 pixels. Har en side intet sådant element, tilføjer opskriften ingen overskrift og overlader det til et menneske.

Temaets hovedstilark får én markering af tastaturfokus: en ubrudt streg på 2 pixels, 2 pixels fra elementet, i en farve, som temaet allerede bruger. Det er en farvevariabel, hvis navn nævner focus, accent, brand, primary eller link, ellers farven på links eller på brødteksten. Den første af dem med en kontrast på mindst 3:1 mod sidens baggrund bruges; hvis ingen af dem har det, gøres den første lysere eller mørkere i samme farvetone, indtil den når det. På mørke områder med lys tekst, for eksempel en mørk topbjælke, får markeringen den lyse tekstfarve. En outline: none ved fokus, der ikke efterlader noget i stedet, fjernes fra temaets regler; regler, der kun skjuler markeringen ved museklik, bevares. Et tema, der allerede har en synlig fokusmarkering og ingen regel, der skjuler den, bliver, som det er.

Et tabindex over 0 trækker et element forrest i tastaturrækkefølgen. Opskriften fjerner det fra links, knapper og formularfelter, som 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. Kun det tag i skabelonen, der udskriver det rapporterede element, ændres. Et tabindex, som PHP-kode udskriver, eller som et script sætter, overlades til et menneske.

Inde i et cookiebanner eller et slideshow, der er en del af dit tema, bliver klikbare <span>-, <div>-, <li>- eller <i>-elementer, som kun virker med en mus, til rigtige <button>-elementer. Hver klasse og hver attribut bevares, så temaets stilregler og scripts fortsat virker, og Enter og mellemrumstasten gør nu det samme som et klik. En kort nulstilling af stilen for netop de klasser bevarer deres udseende. En knap med kun et ikon i samme banner eller slideshow får et navn på engelsk, som beskrevet under ikonnavnene nedenfor. Et element, som intet script lytter til, som temaets stilregler eller scripts udpeger via tagnavnet, eller som er tomt og har et uklart formål, bliver, som det er.

Opskriften fjerner user-scalable=no og en maximum-scale under 2 fra viewport-tagget, i header-skabelonerne eller i den PHP-kode, der udskriver tagget, så besøgende igen kan zoome ind på din webshop med to fingre. For axe-cores strengere regel meta-viewport-large fjernes enhver maximum-scale under 5. De øvrige viewport-indstillinger forbliver nøjagtig, som de var. Et viewport-tag, hvis indhold PHP beregner, eller som et plugin udskriver, overlades til et menneske.

Betjeningselementer, som scanningen fandt mindre end 24 × 24 pixels, for eksempel ikoner til sociale medier, farveprøver eller knapper til antal, får den minimumsstørrelse. Opskriften finder de stilregler i stilarkene, der giver netop de elementer en fast bredde eller højde under 24 pixels, og hæver den til 24 pixels; hvor elementet placerer sit ikon med flexbox eller grid, centreres ikonet, så det ikke sidder i et hjørne. Et betjeningselement, hvis størrelse kommer fra padding eller fra dets indhold, kan ikke måles ud fra stilarkene og overlades til et menneske.

Når en tekst ikke består kontrastkontrollen, og dens farve er defineret ét sted i temaets stilark, som en CSS-variabel eller som farven i den regel, der styler teksten, flyttes den farve til den nærmeste lysere eller mørkere nuance i samme farvetone, som opnår den kontrast, scanningen målte som krævet, på hver baggrund, den målte. En farve, der er defineret flere steder, der også ville ændre elementer, hvis kontrast scanningen ikke har målt, eller som temaet også bruger til baggrunde eller kanter, overlades til et menneske.

Når en besøgendes enhed er indstillet til at reducere bevægelse, lader en blok sidst i temaets hovedstilark hver animation køre én gang, for kort til at kunne ses, så den stopper i sin slutstilling; overgange bliver øjeblikkelige, og blød scrolling slås fra. Hvor temaets egne scripts starter et slideshows automatiske afspilning med Slick, Swiper, Splide, Owl eller Flickity, starter den automatiske afspilning kun for besøgende, der ikke har bedt om reduceret bevægelse. Bevægelse, der kommer fra et plugin eller et inline-script, ændres ikke.

Et slideshow i dit temas skabeloner, der bevæger sig af sig selv, får en synlig knap til at sætte det på pause og afspille det igen, med teksterne »Pause slideshow« og »Play slideshow« på engelsk. Knappen bliver slideshowets første element, så tastaturbrugere når den før de enkelte slides. Et kort script i temaets hovedscriptfil forbinder knappen med sliderens egen automatiske afspilning: en CSS-animation i temaet, Slick, Swiper eller Flickity. For besøgende, hvis enhed beder om reduceret bevægelse, starter slideshowet på pause. En slider, som et plugin eller et inline-script styrer, overlades til et menneske.

<blink>- og <marquee>-elementer i temaets skabeloner og i PHP-strenge, der udskriver dem, 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. Marqueens rulleindstillinger fjernes, så ingen tekst bevæger sig af sig selv. Et element, som koden åbner og lukker forskellige steder, overlades til et menneske.

En video i temaets skabeloner, der afspilles af sig selv, får muted og playsinline, så den fortsætter med at spille lydløst og afspilles inde på siden på iPhones i stedet for i fuld skærm; hvor videoen har betjeningsknapper, kan de besøgende stadig slå lyden til. Lyd starter ikke længere af sig selv. Medier, som et script starter, overlades til et menneske. I en Validiscan-scanning rapporteres lyd, der starter af sig selv, af Validiscans mediekontrol vs-media, som erstatter den axe-core-regel, denne opskrift dækker; vs-media har niveau MANUAL (se listen længere nede), så et sådant fund på WooCommerce kommer med vejledning i stedet for denne ændring.

Et formularfelt, hvis etikettekst allerede står i skabelonen, men ikke er knyttet til feltet, bliver knyttet til det: Det <label>, der står lige før feltet eller lige efter et afkrydsningsfelt eller en radioknap, får en for, der peger på feltet, eller et tekstelement, der er markeret som etiket, knyttes via aria-labelledby. Skærmlæsere læser så etiketten op, når feltet får fokus, og et klik på et tilknyttet <label> flytter fokus til feltet. Et felt, der kun har en pladsholdertekst, overlades til et menneske, fordi det er en beslutning om indhold at skrive en etiket.

Felter i temaets skabeloner, der spørger efter oplysninger om kunden, for eksempel felter til login, registrering og kassen, får den autocomplete-værdi, der svarer til det, de spørger efter, for eksempel e-mail, brugernavn, nuværende eller ny adgangskode, for- og efternavn, virksomhed, adresse, postnummer, land eller telefonnummer. Værdien udledes af feltets type, navn, id og etiket. En værdi, der mangler, eller som er off eller ugyldig, erstattes; en gyldig bliver stående. WooCommerces egne felter til fakturering og levering udskrives af WooCommerce, ikke af temaet, så et filter i functions.php sætter deres værdier. Det kører efter temaets egne filtre for de felter, og de filtre kan fjerne værdierne. Felter, der ikke spørger efter personoplysninger, for eksempel felter til søgning, rabatkode eller antal, bliver, som de er, og det samme gælder et felt, hvis formål koden ikke viser.

Når en kunde vælger en anden størrelse eller farve, omskrives det område, der viser prisen og lagerstatussen for den valgte variant, på stedet. Det område bliver et live-område, så skærmlæsere læser den nye pris og lagerstatus op, uden at kunden behøver at gå derhen. Kurvlinket i sidehovedet erstattes i sin helhed, når et produkt lægges i kurven, så det ikke selv kan bære oplæsningen. Ved siden af tilføjer opskriften en visuelt skjult statusbesked, og en kort blok i temaets script skriver »Product added to your cart.« eller »Product removed from your cart.« ind i den, når WooCommerce melder ændringen. Begge beskeder tilføjes på engelsk. Et område, der allerede er eller ligger inde i et live-område, eller som temaets eget script erstatter i sin helhed, bliver, som det er.

Knapper og links, der kun viser et ikon, får et navn, der siger, hvad de gør, hvor koden viser deres formål: ud fra ikonets eget navn, ud fra betjeningselementets klasse eller id eller ud fra, hvor et link fører hen, for eksempel kurven, kontosiden eller et socialt netværk. Eksempler er Search, Cart, My account, Show password, Close og Menu. Navnet er visuelt skjult tekst inde i betjeningselementet eller en aria-label, hvor temaet ikke har nogen klasse til skjult tekst, og det tilføjes på engelsk. Navne på sociale netværk er brandnavne og bliver, som de er. Et betjeningselement, hvis formål koden ikke viser, 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, for eksempel et logo ved siden af webshoppens navn, det er et lille ikon ved siden af sin egen tekstetiket, eller det er en afstandsholder eller en skillelinje. Et <img> 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 en grafik uden navn 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 titel på engelsk, der siger, hvad den viser. Opskriften henter den fra titlen på en indlejret fil i temaet, fra udbyderen i rammens adresse eller fra ord som map eller video i dens klasse eller id. En ramme, hvis indhold koden ikke viser, får ingen generisk titel; den overlades til et menneske.