Tilgængelighed på Magento: typiske WCAG-fejl og hvem der retter dem

På Magento kommer fundene typisk fra Luma-baserede temaer, tredjepartsmoduler og checkout, og de gentages på tusindvis af sider.

• image-alt1.1.1 Ikke-tekstbaseret indhold · A

  Billeder uden alt-attribut har intet tekstalternativ. Skærmlæserbrugere hører enten filnavnet (fx 'IMG_2043.jpg') eller ingenting og går glip af indholdet — fx et produktbillede, et kampagnebanner eller et betalingskort-ikon.

  Giv alle <img> en alt-attribut. Beskriv billedets indhold eller funktion i én kort sætning (uden 'billede af'). Er billedet rent dekorativt (rammer, skygger, spacer-gifs), så brug tom alt="" — så springer skærmlæseren det over. Et billede i et link skal beskrive linkets mål, ikke billedet. I webshops: produktbilleder bør nævne produktnavn og variant ('Sort uldfrakke, model Nora, set forfra'), og logoer bør have firmanavnet som alt.

  Før

  <img src="/img/frakke-nora-sort.jpg">

  Efter

  <img src="/img/frakke-nora-sort.jpg" alt="Sort uldfrakke, model Nora, set forfra">
  <img src="/img/border.gif" alt="">

• color-contrast1.4.3 Kontrast (minimum) · AA

  Tekstens kontrast mod baggrunden er under 4,5:1 (3:1 for stor tekst ≥ 18 pt eller ≥ 14 pt fed). Brugere med nedsat syn eller farvesynsdefekt — og alle på en mobil i sollys — kan ikke læse teksten. Rammer typisk lysegrå hjælpetekst, placeholder-tekst, priser på farvet baggrund og hvid tekst på pastelfarvede knapper.

  Mørkn tekstfarven eller lysn baggrunden, til kontrasten er mindst 4,5:1 (3:1 for stor tekst). axe angiver den målte kontrast og de præcise farver i fejlbeskrivelsen. Ret farven i design-tokens/CSS-variabler frem for pr. element, så det slår igennem overalt. Tjek også hover-, fokus- og disabled-tilstande (disabled-tekst er undtaget, men bør stadig kunne læses).

  Før

  .hint { color: #9ca3af; background: #ffffff; } /* 2,5:1 */

  Efter

  .hint { color: #4b5563; background: #ffffff; } /* 7,6:1 */

• button-name4.1.2 Navn, rolle, værdi · A

  Knappen har intet tilgængeligt navn. Skærmlæsere oplæser det tilgængelige navn (accessible name), når brugeren tabber til elementet. Uden navn hører brugeren blot elementtypen. Typisk ikon-knapper: luk (×), menu (burger), søg, +/− på antal og favorit-hjerter.

  Tilføj synlig tekst i knappen, eller aria-label, der beskriver handlingen. Skjul rent dekorative ikoner med aria-hidden="true". Brug aldrig title alene som navn.

  Før

  <button class="close">×</button>

  Efter

  <button class="close" aria-label="Luk"><span aria-hidden="true">×</span></button>

• label4.1.2 Navn, rolle, værdi · A

  Formularfeltet har ingen etiket (label). Skærmlæserbrugere hører 'redigér tekst' uden at vide, hvad de skal skrive — typisk søgefelter, nyhedsbrevsfelter, rabatkode og felter i checkout, hvor kun en placeholder er brugt.

  Kobl en synlig <label> til feltet med for/id. Placeholder tæller ikke som etiket (den forsvinder ved indtastning og har ofte for lav kontrast). Kan der ikke være synlig tekst (fx søgefelt med ikon), så brug aria-label.

  Før

  <input type="email" placeholder="Din e-mail">

  Efter

  <label for="nyhedsbrev-email">E-mail</label>
  <input id="nyhedsbrev-email" type="email" autocomplete="email">

• aria-allowed-attr4.1.2 Navn, rolle, værdi · A

  Elementet bruger en ARIA-attribut, som ikke er tilladt for dets rolle (fx aria-checked på et almindeligt <div>, eller aria-expanded på et <input>). Skærmlæsere ignorerer den eller opfører sig uforudsigeligt.

  Tjek attributten mod rollen i WAI-ARIA-specifikationen. Ofte er løsningen at give elementet den rigtige rolle (fx role="checkbox") eller at bruge det native HTML-element i stedet — <input type="checkbox"> understøtter alt uden ARIA.

  Før

  <div aria-checked="true">Husk mig</div>

  Efter

  <label><input type="checkbox" checked> Husk mig</label>

• duplicate-id4.1.1 Parsing · A

  Samme id bruges på flere elementer. Koblinger via id (label for, aria-describedby, ankerlinks) rammer så det forkerte element.

  Gør id'er unikke pr. side. Fejlen opstår typisk, når en komponent (produktkort, modal, formular) gentages med et fast id — generér id'et ud fra produkt-/komponent-id i stedet.

  Før

  <div id="product"><…></div>
  <div id="product"><…></div>

  Efter

  <div id="product-1042"><…></div>
  <div id="product-1043"><…></div>