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

Magento angiver en sides sprog ud fra landestandarden (locale) for dens store view, for eksempel en for landestandarden en_US, og udskriver det gennem sin rodskabelon. Hvor dit tema overstyrer den skabelon og udskriver sin egen lang, typisk landestandardkoden en_US, som ikke er et gyldigt sprogtag, eller slet ingen lang, udskriver skabelonen igen Magentos egne attributter, så hver side får en gyldig lang. En lang, der er sat i layout-XML i landestandardformen, for eksempel de_DE, bliver til de-DE. En side, hvis indhold er på et andet sprog end dens store view, for eksempel en tysk juridisk side i en engelsksproget webshop, overlades til dig: Vis den fra et store view på det sprog, eller markér sproget i selve indholdet.

Magentos Luma-tema har et »Skip to Content«-link øverst på hver side, som fører til starten af hovedindholdet, og det indhold er sidens <main>-område. Et tema kan miste begge dele. Hvor temaet har fjernet linket i sin layout-XML, ophæver opskriften fjernelsen. Hvor temaets egen header-skabelon aldrig udskriver linket, tilføjer opskriften det dér med Lumas klasser; hvis temaets stilark ville efterlade det uden styling, tilføjer opskriften stilregler, der holder det skjult, indtil det får tastaturfokus. Hvor layout-XML gengiver hovedindholdet som et andet element, for eksempel en <div>, bliver det igen til <main>. Navigationsområder uden navn får et, der siger, hvad de rummer, for eksempel Main menu, Footer links eller Breadcrumbs; et område, hvis formål koden ikke viser, eller som ville få samme navn som et andet, overlades til et menneske. Indhold uden for sidehovedet, hovedområdet og sidefoden, for eksempel en kampagnebjælke, flyttes ikke: At flytte det er en ændring af dit layout, som din udvikler foretager i layout-XML.

Magento giver hver side sin egen titel, for eksempel navnet på produktet eller kategorien eller »Search results for:« og søgeordet, med det præfiks eller suffiks, der er angivet for din webshop. Et tema kan tilsidesætte den med en tom <title> i layout-XML, og siden har så ingen titel. Opskriften fjerner sådanne tomme titler, så Magentos egen titel igen gælder. Titler med tekst er din formulering og bliver, som de er. Hvis ingen layoutfil i temaet tømmer titlen, ændrer opskriften intet: Titlen kommer så fra selve siden og fra indstillingerne for HTML Head i Magento Admin.

En overskrift, der springer et niveau over, for eksempel en h4 lige efter en h2, flyttes op til det næste niveau, og de overskrifter, der følger efter den i samme skabelon på dens niveau eller dybere, flyttes op med den. Klasser bevares, så stilregler, som temaet sætter via klasse, stadig gælder; din udvikler kontrollerer stilregler, som temaet sætter via overskriftens tag. Hvor niveauet på overskriften før den hverken kan læses ud af scanningen eller ud af samme skabelon, overlades overskriften til et menneske. Magento udskriver hver sides titel som dens h1. Et tema, der skjuler titlen på en side med display: none, fjerner sidens eneste h1, så opskriften skjuler den i stedet visuelt, på samme måde som Magentos egne stilregler skjuler tekst, og h1-overskriften forbliver i den disposition, som skærmlæsere bruger. En titel, der er fjernet i layout-XML, overlades til et menneske, fordi det ville ændre sidens udseende at bringe den tilbage.

Temaets stilark får én markering af tastaturfokus: en ubrudt streg på 2 pixels, 2 pixels fra elementet, i temaets brandfarve. Farven hentes fra en variabel for brand- eller primærfarven, ellers fra den primære knap, ellers fra linkfarven, og den justeres, indtil den har en kontrast på mindst 3:1 mod sidens baggrund. Områder med deres egen baggrund, for eksempel en mørk topbjælke, får en markeringsfarve, der har den kontrast dér. Temaregler, der fjerner markeringen fra links, knapper og andre betjeningselementer ved fokus, tages ud, medmindre de viser fokus på anden måde, for eksempel med en kant eller en skygge.

Et tabindex over 0 trækker et element forrest i tastaturrækkefølgen. Sådanne værdier virker kun i forhold til hinanden på hele siden, så når et rapporteret element viser sig at have et i temaets skabeloner, fjerner opskriften hvert fast positivt tabindex i temaets skabeloner, også på elementer, som fundet ikke nævnte. Links, knapper og formularfelter mister attributten; andre elementer får tabindex="0", så de stadig kan nås, mens Tab-tasten følger sidens rækkefølge. Et tabindex, som PHP-kode beregner, overlades til et menneske. Validiscans kontrol vs-focus-order rapporterer også fokus, der hopper rundt på siden af andre årsager, for eksempel indhold, som stilreglerne viser et andet sted; den har niveau MANUAL, så dens fund kommer med vejledning, ikke med denne ændring.

Opskriften fjerner user-scalable=no og enhver maximum-scale under 2 fra viewport-tagget i temaets layout-XML, for eksempel default_head_blocks.xml, hvor Luma deklarerer det, eller i dets skabeloner, så besøgende kan zoome ind på siden på en mobil. For reglen for god praksis meta-viewport-large er grænsen 5. De øvrige viewport-indstillinger forbliver, som de var. En viewport-værdi, som PHP-kode beregner, føres på listen, så din udvikler kan kontrollere den. Hvis det tag, der blokerer zoom, ikke kommer fra temaet, for eksempel fra indstillingerne for HTML Head i Magento Admin eller fra et modul, ændrer opskriften intet.

Knapper og links, som scanningen fandt for små, for eksempel ikoner til sociale medier eller knapper til antal, får en minimumsstørrelse på 24 × 24 pixels i en blok sidst i temaets stilark. Blokken genbruger de selektorer, som temaet gjorde dem små med, eller deres egne klasser, og sætter en minimumsbredde og -⁠højde, som vinder over en mindre bredde eller højde. Ikonerne inde i dem og layoutet omkring dem forbliver, som de er. Et link eller et andet inline-element uden en display-regel bliver til inline-flex, fordi inline-elementer ignorerer en minimumsstørrelse. Et betjeningselement uden en klasse, som stilarket kan udpege, overlades til et menneske.

Når en besøgendes enhed er indstillet til at reducere bevægelse, slår en blok sidst i hvert af temaets stilark det fra, som netop det stilark starter: animationer, overgange på 5 sekunder eller mere og blød scrolling, selektor for selektor. Hvor temaets egne scripts i web/js starter en slider med automatisk afspilning slået til, starter slideren uden automatisk afspilning for de besøgende. En regel, der er indlejret i en anden LESS-regel, føres på listen til din udvikler. Animationer fra Magentos egen kode eller fra extensions ligger ikke i temaets filer og har brug for deres egen sikring.

På Magento tilføjer denne opskrift ingen pauseknap. Page Builder-slideren kører på Magentos egne scripts, og et tema kan ikke give den en pauseknap uden at overstyre Magentos kode. Opskriften bruger i stedet sliderens egen indstilling: På hver Page Builder-slider med automatisk afspilning i temaets filer slås den automatiske afspilning fra, som kontakten »Autoplay« i Page Builder gør, og pile slås til, hvor slideren ellers ikke ville have nogen måde at skifte mellem slides på. Endeløse CSS-animationer, der bevæger en slider af sig selv, fjernes. Så skifter slides kun, når den besøgende bruger prikkerne eller pilene: Intet bevæger sig af sig selv, så der er intet at sætte på pause. En slider, der er gemt i Magento-databasen, er ikke en fil i temaet: Du slår dens automatiske afspilning fra med indstillingen »Autoplay« i Page Builder. En slider, som temaets egne scripts starter med automatisk afspilning, for eksempel en Slick- eller Swiper-slider, har brug for en pauseknap, der er koblet ind i det script, og det overlades til et menneske.

<blink>- og <marquee>-elementer i temaets skabeloner bliver til statiske elementer med samme indhold, klasser og id’er: en <span> for blink og en <div> for marquee. Marqueens egne attributter, for eksempel rullehastighed og -⁠retning, fjernes, og det samme gælder stilen text-decoration: blink i temaets stilark, så ingen tekst bevæger sig eller blinker af sig selv.

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 inde på siden på mobilen. Lyd starter ikke længere af sig selv. Indlejrede YouTube- og Vimeo-afspillere, der starter af sig selv, indstilles til at starte uden lyd. Automatisk afspilning, som PHP-kode slår til, 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, som også dækker undertekster og transskriptioner, har niveau MANUAL, så et sådant fund på Magento kommer med vejledning i stedet for denne ændring.

Et formularfelt, hvis etikettekst allerede står på siden før feltet, bliver knyttet til den tekst. Et <label> uden for får en for-attribut, der peger på feltet. En etikettekst i en <span> eller <strong>, for eksempel en »Sort By«-tekst med Lumas klasse sorter-label ved siden af sorteringsmenuen på en kategoriside, bliver til et <label> med de samme klasser. En etikettekst i et blokelement, for eksempel <div class="label">, beholder sit tag og knyttes via aria-labelledby. Teksten skal stå i en container uden andre felter, så den ikke kan høre til et andet felt. 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 i temaets skabeloner, der spørger efter kundens egne oplysninger, i formularer til adresse, konto, login, kontakt og nyhedsbrev, får den autocomplete-værdi, der svarer til det, de spørger efter, for eksempel e-mail, navn, telefonnummer, vejadresse, postnummer eller adgangskode. Værdien udledes af feltets type, navn, id, etiket, pladsholdertekst og titel efter de samme regler som Validiscans formularkontrol, og felter til fakturering og levering får deres sektion, som i shipping given-name. Når ét felt i en formular er rapporteret, behandles hvert felt i den formular. Adgangskoder får new-password i registrerings- og nulstillingsformularer og i formularer med mere end ét adgangskodefelt, og current-password ellers. Felter til rabatkode, søgning, gavemodtager, kommentar, antal og CAPTCHA får aldrig en værdi. En værdi, som skabelonkode skriver, eller en gyldig værdi, der ser forkert ud for feltet, overlades til et menneske.

Magentos egne scripts omskriver teksten i faste containere, når en kunde vælger en størrelse eller farve eller lægger et produkt i kurven. Opskriften gør de containere i temaets skabeloner til live-områder, så skærmlæsere læser den nye værdi op, uden at kunden behøver at gå derhen. Prisboksen og minikurvens tæller læses op i deres helhed, når de ændres; lagerbeskeden og sidebeskederne, for eksempel meddelelsen om, at et produkt er lagt i kurven, får role="status". Selve scriptene ændres ikke. Hvor temaet markerer hele siden som et live-område, hvilket får skærmlæsere til at læse hver ændring op, fjernes den markering. Hvor en extensions script tilføjer markeringen, mens siden kører, overlades den til et menneske.

En indlejret ramme uden titel, for eksempel et kort, en YouTube- eller Vimeo-video, en kalender, en formular eller en widget med anmeldelser, får en oversættelig titel, der siger, hvad den viser. Opskriften læser, hvad rammen viser, ud fra dens adresse, herunder de faste dele af en adresse, som PHP-kode bygger, og ud fra dens klasser, id og navn. En ramme, hvis indhold koden ikke afslører, får ingen titel af opskriften og overlades til et menneske.

Når en tekst ikke består kontrastkontrollen, og dens farve er defineret ét sted i temaet, ændres det sted til den nærmeste farve i samme farvetone, som opnår den krævede kontrast mod hver baggrund, scanningen målte for den. Ét sted kan være en LESS-variabel eller en CSS-variabel, der kun bruges til tekstfarve, eller en enkelt color-regel. Hvor temaet leveres med en kompileret styles-m.css, får den den samme ændring. En farve, der bruges flere steder, også som baggrund eller kant, eller i regler, hvis baggrund scanningen ikke målte, overlades til et menneske.

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 allerede har tekst eller et navn, for eksempel et kampagnefelt med sin egen overskrift; det er et ikon på højst 48 pixels eller med en ikonklasse eller et ikonfilnavn 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 et filnavn op. Ethvert andet billede behandles som indhold, og dets tekstalternativ kræver ord, som et menneske vælger.

Klikbare <div>- og <span>-elementer i slidere og cookiebannere bliver til rigtige knapper. Opskriften regner kun et element for et betjeningselement, når koden siger det: Det har role="button", en klikhåndtering, en Knockout-klikbinding eller en klasse eller data-attribut, som temaets script udpeger til at håndtere klik. Klasser, data-attributter og ARIA-attributter bevares, så temaets stilark og scripts finder betjeningselementet som før, og Enter og mellemrumstasten gør nu det samme som et klik. En lille nulstilling af stilen sidst i temaets stilark bevarer dets udseende, også ved hover og fokus, og fokusmarkeringer røres ikke. Et betjeningselement, der rummer blokke, links eller felter, eller som ikke har nogen klasse, overlades til et menneske.

Knapper og links, der kun viser et ikon, for eksempel søgning, minikurv, konto, ønskeliste, sammenligning, menu, luk, forrige og næste samt valgene i et cookiebanner, får en aria-label, der siger, hvad de gør, med ordlyden fra Magentos Luma-tema, hvor Luma har en, for eksempel »Search«, »My Cart« eller »Allow Cookies«. Formålet udledes af betjeningselementets klasser, id, data-attributter og linkmål, af dets ikon og af den formular eller det cookiebanner, der omgiver det. Et betjeningselement, hvis formål koden ikke afslører, for eksempel et link til et socialt medie, der bygges i en løkke ud fra en adresse gemt som data, eller et link, hvis eneste indhold er et produktfoto, overlades til et menneske, fordi dets navn afhænger af dit indhold.