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

<html>-elementet i storefrontens basislayout får en gyldig lang-attribut, så skærmlæsere udtaler siden på det rigtige sprog. Hvor attributten mangler, tilføjer opskriften koden for webshoppens aktive sprog, for eksempel de-DE, som er den værdi, Shopwares egen basisskabelon udskriver. Hvor temaet udskriver en landestandardkode (locale) som en_GB, der ikke er et gyldigt sprogtag, omsætter skabelonen den nu til en-GB. En side, hvis indhold er skrevet på et andet sprog end webshoppens, for eksempel en tysk juridisk tekst i en engelsksproget webshop, overlades til dig: Indholdets sprog angives i Shopware-administrationen eller markeres i selve teksten.

Afhængigt af, hvad scanningen fandt, tilføjer opskriften et spring over-link, markerer hovedindholdet eller giver navigationsområderne navne. Spring over-linket bliver det første element, en tastaturbruger når på hver side. Det er skjult, indtil det får fokus, og det fører til hovedindholdet. Hvor ingen skabelon markerer hovedindholdet som <main>, bliver basislayoutets indholdsområde sidens <main>-område. Linkets tekst er snippetten general.skipToContent, på engelsk »Skip to main content«. Et eksisterende spring over-link får hovedindholdet som mål. Navigationsområder uden navn får et, hentet fra deres overskrift eller deres formål, for eksempel Main navigation, Service navigation eller Breadcrumb. Et navigationsområde, hvis formål er uklart, eller som ville få samme navn som et andet, overlades til et menneske.

Hvor temaets layout kun skriver sidens metatitel ind i <title>, får kategorier og CMS-sider uden metatitel en tom titel. Opskriften beholder temaets egen titel og giver den en reserveværdi: webshoppens navn, hentet dér, hvor temaet allerede udskriver det, eller, hvis det ikke gør det, fra webshoppens navn i Shopwares grundindstillinger. Ingen side har så en tom titel. En titel, der kun er webshoppens navn, siger stadig ikke, hvad siden er, så disse sider har brug for en metatitel i Shopware-administrationen. Titler, der allerede har en reserveværdi eller fast tekst, bliver, som de er.

En overskrift, der springer et niveau over, for eksempel en h3 lige efter en h1, flyttes op til det næste niveau, og skabelonens øvrige overskrifter på det niveau eller et dybere flyttes med, så skabelonens egen disposition bevares. Hvor skabelonen sætter overskriftens tag i en variabel, ændres variablen. Klasser bevares, og hvor ingen klasse bestemmer størrelsen, bevarer en Bootstrap-overskriftsklasse det gamle udseende. På en side uden hovedoverskrift bliver det element, der allerede er sidens titel i dens egen skabelon, til h1, og dets udseende bevares. Har en side intet sådant element, tilføjer opskriften ingen overskrift, fordi en ny overskrift først skal formuleres.

Hovedstilarket får én markering af tastaturfokus: en ubrudt streg på 2 pixels, 2 pixels fra elementet, i temaets brandfarve. Hvor den farve er for lys, bruges den nærmeste nuance i samme farvetone, som har en kontrast på mindst 3:1 mod sidens baggrund. Temaregler, der fjerner markeringen ved fokus, gælder nu kun for fokus med musen: Et klik bevarer temaets udseende, og tastaturfokus viser markeringen. Regler, der viser fokus på anden måde, bevares. På mørke områder, for eksempel en topbjælke, kan markeringen have brug for en lysere farve, og 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 skabelonens kode skriver, overlades til et menneske. En scanning rapporterer en sådan tvunget rækkefølge to gange: gennem axe-core-reglen tabindex, hvis fund får denne ændring, og gennem Validiscans kontrol vs-focus-order, hvis niveau er MANUAL, så dens fund kommer med vejledning.

Opskriften fjerner user-scalable=no og enhver maximum-scale under 2 fra viewport-tagget i storefrontens skabeloner, som regel i layout/meta.html.twig, så besøgende kan forstørre teksten til mindst 200 % på en mobil. For reglen for god praksis meta-viewport-large er grænsen 5. De øvrige viewport-indstillinger forbliver, som de var. Hvis låsen var der for at hindre, at iOS zoomer ind på formularfelter, opnår man det med en skriftstørrelse på mindst 16 pixels i felterne, uden at zoom blokeres.

Knapper og links, som scanningen fandt mindre end 24 × 24 pixels, for eksempel ikoner i sidehovedet, knapper til antal eller farveprøver, får en minimumsstørrelse på 24 × 24 pixels. Minimumsstørrelsen tilføjes i den stilregel i temaet, der gjorde elementet lille, lige ved siden af den deklaration, der formindskede det. Så forbliver rækkefølgen af temaets stilregler den samme, og ikonerne inde i elementerne bevarer deres størrelse. Et betjeningselement, der er lille uden en sådan regel, får en minimumsstørrelse for sin klasse i hovedstilarket. Et betjeningselement, som opskriften ikke kan udpege via dets klasse, overlades til et menneske.

Når en besøgendes enhed er indstillet til at reducere bevægelse, får en blok i hovedstilarket animationer og overgange til at slutte med det samme og slår blød scrolling fra. Blokken gælder for hvert element på siden, så den også dækker animationer, som andre stilark definerer, herunder dem fra plugins. Hvor temaets storefront-script kun starter en timer, for eksempel et slideshows automatiske afspilning, når en autoplay-indstilling er sat, kontrollerer den betingelse nu også den besøgendes indstilling. Anden bevægelse, som et script starter, føres på listen til den, der gennemgår ændringen, og der gættes ikke.

Shopwares basisslider, den slider, der ligger bag CMS’ets billedslider, får ved siden af pilene til forrige og næste en synlig, oversat knap til pause og afspilning. En kodeblok i temaets storefront-script forbinder knappen med sliderens automatiske afspilning gennem Shopwares eget sliderplugin. Hvor temaet styrer den automatiske afspilning med sin egen timer, får timeren én linje, der springer et trin over, mens slideren er på pause. Knappen forbliver skjult, indtil scriptet har forbundet den, så den aldrig vises uden en automatisk afspilning, der kan sættes på pause. For besøgende, hvis enhed beder om reduceret bevægelse, starter slideren på pause. Slidere bygget med andre biblioteker overlades til et menneske.

<blink>- og <marquee>-elementer i Twig-skabelonerne 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 lignende tekstelement. 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 afspilles inde på siden i Safari på mobilen i stedet for at åbne afspilleren i fuld skærm. Lyd starter ikke længere af sig selv; de besøgende starter den selv. Automatisk afspilning, som skabelonkode eller et script sætter, og afspillere i indlejrede rammer overlades til et menneske. I en Validiscan-scanning rapporteres lyd, der starter af sig selv, af Validiscans mediekontrol vs-media, som erstatter axe-core-reglen no-autoplay-audio. vs-media, som også dækker undertekster og transskriptioner, har niveau MANUAL, så et sådant fund på Shopware kommer med vejledning i stedet for denne ændring.

Et formularfelt, hvis etikettekst allerede står på siden lige før feltet, bliver knyttet til den tekst. Et <label> uden for får en for-attribut, der peger på feltet. Et tekstelement, som temaet via sin klasse markerer som titel eller etiket, for eksempel navnet på en variantgruppe på en produktside, bliver feltets <label> og beholder sine klasser og sin egen linje. 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.

Felter, der spørger efter kundens egne oplysninger, for eksempel i formularerne til registrering, adresse, login, kontakt og nyhedsbrev, får den autocomplete-værdi, der svarer til det, de spørger efter, for eksempel e-mail, for- og efternavn, postnummer, telefonnummer eller adgangskode. Værdien udledes af feltets type, navn, id, etiket og pladsholdertekst. Adgangskoder får new-password i registreringsformularer og current-password ellers. Felter til søgning, rabatkode, antal, captcha og beskeder bliver, som de er, og en værdi, som skabelonkode skriver, overlades til et menneske. Browsere kan så udfylde felterne, og hjælpemidler kan se, hvad hvert felt skal bruges til.

De dele af en side, som storefront-scriptet opdaterer på stedet, for eksempel prisen, når en kunde vælger en variant, lagerstatussen eller kurvens samlede beløb, bliver live-områder af typen »polite«. Skærmlæsere oplæser så den nye værdi én gang og i sin helhed uden at afbryde. Hvor et script erstatter selve elementet i stedet for dets indhold, ville et live-område ikke virke, så opskriften overlader det element til et menneske.

En indlejret ramme uden titel, for eksempel et kort eller en YouTube- eller Vimeo-video, får en oversat titel fra temaets snippet-filer, der siger, hvad den viser. Opskriften læser, hvad rammen viser, ud fra dens adresse, dens klasse og navn eller skabelonen omkring den. En ramme, hvis indhold koden ikke afslører, får ingen titel af opskriften, fordi en opfundet titel er værre end ingen.

Når en tekst ikke består kontrastkontrollen, og dens farve er defineret ét sted i temaet, ændres det sted til den nærmeste nuance i samme farvetone, som opnår den krævede kontrast, så designet forbliver genkendeligt. Ét sted kan være et farvefelt i theme.json sammen med den SCSS-variabel, der gentager det, en SCSS-variabel eller en CSS-variabel, der kun bruges til tekst, eller en enkelt color-deklaration. En farve, der bruges flere steder eller også som baggrund eller kant, og Shopwares centrale farvefelter til brandet, kanter, baggrunde, statusmeddelelser og købsknappen overlades til et menneske. En farve, der er gemt i temaindstillingerne i Shopware-administrationen, tilsidesætter theme.json: Hvis den er ændret dér, skal den ændres dér også. Reglen color-contrast har niveau ASSISTED, så i et projekt følger et kontrastfund ASSISTED-forløbet, og denne opskrift anvendes ikke på det.

Et billede markeres kun som dekorativt, når skabelonen beviser, at det ikke tilføjer noget: Det sidder i et link eller en knap, der har navn på anden måde, det er et ikon ved siden af sin egen tekstetiket, eller det er en afstandsholder eller en skillelinje. Et <img> får et tomt alt, et billede, der udskrives med Shopwares sw_thumbnails-tag, får et tomt alt i sine attributter, og SVG-ikoner får aria-hidden="true", så skærmlæsere springer dem over i stedet for at læse et filnavn op. Ethvert andet billede er indhold, for eksempel betalingslogoerne i en sidefod, og dets tekstalternativ kræver ord, som et menneske vælger. De regler, denne opskrift dækker, har niveau ASSISTED, så i et projekt følger deres fund ASSISTED-forløbet, og denne opskrift anvendes ikke på dem.

Klikbare <div>-, <span>-, <i>- og <li>-elementer i slidere og cookiebannere og links uden adresse, som kun reagerer på en mus, bliver til rigtige knapper. Klasser, data-attributter og id’er bevares, så temaets script finder dem som før, og Enter og mellemrumstasten gør nu det samme som et klik. Et listeelement beholder sin plads i listen og får knappen inde i sig. Et betjeningselement uden tekst får et oversat navn ud fra sit formål, for eksempel »Show slide 2«, og en lille nulstilling af stilen bevarer dets udseende. Et betjeningselement uden tekst, hvis formål er uklart, eller hvis styling afhænger af dets tag eller dets placering, overlades til et menneske. I et projekt prøves denne opskrift på slideshowfund fra vs-carousel; fund fra cookiebanner-kontrollen vs-cookie-banner har niveau ASSISTED og følger ASSISTED-forløbet.

Knapper og links, der kun viser et ikon, for eksempel søgning, kurv, konto, logolinket, pile i slidere, knapper til antal og cookievalg, får en oversat aria-label, der siger, hvad de gør. Formålet udledes af betjeningselementets klasser, dets linkmål, ikonet inde i det og den komponent, der omgiver det. Et betjeningselement, hvis formål koden ikke afslører, for eksempel et link til et socialt medie, hvis netværk er gemt som data, overlades til et menneske, fordi et opfundet navn er værre end intet. I et projekt prøves denne opskrift på de slideshowkontroller, som vs-carousel rapporterer; andre betjeningselementer, der kun består af et ikon, rapporteres af regler på niveau ASSISTED og følger ASSISTED-forløbet.