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

På Wix sidder fundene i det, I selv har bygget i editoren: billeder, overskrifter, farver, tætte ikoner og indlejrede widgets.

• 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 */

• heading-order1.3.1 Information og relationer · A

  Overskriftsniveauer springer (fx h2 → h4). Skærmlæserbrugere, der navigerer via overskrifter, mister overblikket over sidens struktur.

  Brug overskriftsniveauer som en disposition: h1 for sidens emne, h2 for hovedafsnit, h3 for underafsnit. Vælg aldrig niveau efter udseende — styr størrelsen med CSS i stedet.

  Før

  <h2>Beskrivelse</h2>
  <h4>Materiale</h4>

  Efter

  <h2>Beskrivelse</h2>
  <h3>Materiale</h3>

• link-name2.4.4 Formål med links (i kontekst) · A4.1.2 Navn, rolle, værdi · A

  Linket har ingen tilgængelig tekst. Skærmlæsere oplæser 'link' uden mål — brugeren ved ikke, hvor det fører hen. Typisk et link, der kun indeholder et ikon eller et billede uden alt, fx logo, kurv-ikon eller sociale medier-ikoner.

  Giv linket en tekst: enten synlig tekst, alt på billedet inde i linket, eller aria-label på <a>. Teksten skal beskrive målet ('Gå til kurv', 'Nordally — forside'), ikke 'klik her'. Har linket ingen href, er det ikke et link — brug en <button>.

  Før

  <a href="/kurv"><svg>…</svg></a>

  Efter

  <a href="/kurv" aria-label="Indkøbskurv, 2 varer"><svg aria-hidden="true">…</svg></a>

• frame-title4.1.2 Navn, rolle, værdi · A

  En <iframe> har ingen title. Skærmlæserbrugere hører 'ramme' uden at vide, om det er en video, et kort, en betalingsformular eller en chat-widget.

  Giv hver <iframe> en beskrivende title. Rammer, der kun bruges til tracking (usynlige), skal have aria-hidden="true" og tabindex="-1".

  Før

  <iframe src="https://www.youtube.com/embed/…"></iframe>

  Efter

  <iframe src="https://www.youtube.com/embed/…" title="Video: Sådan måler du din størrelse"></iframe>

• target-size2.5.8 Målstørrelse (minimum) · AA

  Et klikbart element er mindre end 24×24 CSS-pixels uden tilstrækkelig afstand til naboerne. Brugere med motoriske vanskeligheder (og alle på mobil) rammer ved siden af — typisk små ikoner, +/−-knapper og tætte links i footeren.

  Gør klikfladen mindst 24×24 px (gerne 44×44 på mobil) via padding eller min-width/min-height, eller sørg for mindst 24 px afstand mellem små mål. Links i løbende tekst er undtaget.

  Før

  .qty-btn { width: 16px; height: 16px; }

  Efter

  .qty-btn { min-width: 24px; min-height: 24px; padding: 4px; }