Rapport 2026-10 för Demobutiken

Skapad 14 oktober 2026 · 9 sidor granskade

Problem

12 av 12 problem visas.

• KritiskWCAG 4.1.2

  Knappen saknar namn som kan läsas upp.

  /kassa och 8 sidor till

  button

  Åtgärd: Ge knappar ett tillgängligt namn, till exempel synlig text eller aria-label på ikonknappar. Ändringen görs i sajtens egen mallkod.

  <button type="button" aria-label="Stäng meny"><svg aria-hidden="true">...</svg></button>

• KritiskWCAG 2.1.2

  Fokus fastnar i en grupp om 2 element och går inte att flytta vidare med Tab.

  /kassa

  body > main > div.cookie-ruta > button.acceptera

  Åtgärd: Se till att det går att lämna varje komponent med Tab, Skift+Tab eller Esc. Modala dialoger ska fånga fokus bara medan de är öppna och lämna tillbaka det när de stängs. Ändringen görs i sajtens egen mallkod.

  dialog.addEventListener('keydown', (e) => { if (e.key === 'Escape') stang(); });
  // Använd gärna <dialog> med showModal(), som sköter fokus själv.

• AllvarligWCAG 1.4.3

  Kontrasten är 1,66:1 när muspekaren är över elementet (krav 4,5:1, text rgb(201, 201, 201) på rgb(255, 255, 255)).

  /kassa och 8 sidor till

  html > body > header > a.knapp

  Åtgärd: Behåll minst 4,5:1 kontrast även när muspekaren är över länken eller knappen. Ändringen görs i sajtens egen mallkod.

  a:hover { color: #00405c; } /* kontrollera mot bakgrunden */

• KritiskWCAG 1.1.1

  Bilden saknar alternativtext.

  / och 2 sidor till

  img

  Åtgärd: Ge varje informativ bild en alt-text som beskriver vad bilden visar. Dekorativa bilder får alt="". Ändringen görs i sajtens egen mallkod.

  <img src="stol.jpg" alt="Matstol i ek med svart sits">

• AllvarligWCAG 2.4.7

  Elementet får fokus med Tab men ingen synlig fokusmarkering.

  /varukorg och 7 sidor till

  body > header > nav > a

  Åtgärd: Visa tydligt vilket element som har fokus. Ta bort outline:none utan ersättning och lägg en egen fokusmarkering med minst 3:1 kontrast. Ändringen görs i sajtens egen mallkod.

  :focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }

• AllvarligWCAG 1.4.3

  Texten har för låg kontrast mot bakgrunden.

  /kategori/stolar och 2 sidor till

  span

  Åtgärd: Öka kontrasten mellan text och bakgrund till minst 4,5:1 (3:1 för stor text, minst 24 px eller 18,66 px fet). Ändringen görs i sajtens egen mallkod.

  /* Exempel: grå text #999 på vitt ger 2,8:1. #595959 ger 7:1. */
  .pris-gammalt { color: #595959; }

• AllvarligWCAG 2.1.1

  Elementet går att klicka på men kan inte nås eller aktiveras med tangentbord.

  /produkt/bjorkstol och 1 sida till

  html > body > main > div.snabbkop

  Åtgärd: Använd riktiga knappar och länkar för allt som går att klicka på, så att de nås med Tab och aktiveras med Enter eller mellanslag. Ändringen görs i sajtens egen mallkod.

  <!-- Fel: <div class="lagg-till" onclick="...">Köp</div> -->
  <button type="button" class="lagg-till">Lägg i varukorg</button>

• AllvarligWCAG 1.4.10

  Sidan kräver sidledsscroll i 320 px bredd (innehållet är 648 px brett). Elementet sträcker sig till 648 px.

  /

  html > body > main > div.kampanj

  Åtgärd: Innehållet ska gå att läsa i 320 px bredd utan sidledsscroll. Leta efter fasta bredder, breda tabeller och bilder utan max-width. Ändringen görs i sajtens egen mallkod.

  img, video { max-width: 100%; height: auto; }
  .tabell-ruta { overflow-x: auto; }
  .behallare { width: auto; max-width: 1200px; }

• AllvarligWCAG 1.4.4

  Vid 200 procent zoom kräver sidan sidledsscroll (innehållet är 648 px brett i stället för 640 px).

  /

  html > body > main > div.kampanj

  Åtgärd: Sidan ska fungera med 200 procent zoom: inget innehåll får försvinna eller kräva sidledsscroll. Ändringen görs i sajtens egen mallkod.

  /* Använd relativa enheter och flexbox eller grid med radbrytning */
  .rad { display: flex; flex-wrap: wrap; gap: 1rem; }

• AllvarligWCAG 3.3.1, 4.1.3

  Felmeddelanden visas (till exempel ”Fyll i e-post och meddelande.”) men annonseras inte för skärmläsare och fälten markeras inte som felaktiga.

  /kontakt

  html > body > main > form.kontaktform

  Åtgärd: Visa felmeddelanden i text vid fältet, koppla dem med aria-describedby, sätt aria-invalid="true" och flytta fokus till första felet eller annonsera en sammanfattning med role="alert". Ändringen görs i sajtens egen mallkod.

  <label for="pnr">Postnummer</label>
  <input id="pnr" aria-invalid="true" aria-describedby="pnr-fel">
  <p id="pnr-fel">Skriv postnumret med fem siffror.</p>

• AllvarligWCAG 3.3.2, 1.3.1

  Fältet har bara platshållartext och ingen etikett. Texten försvinner när man börjar skriva.

  /kontakt

  body > main > form.kontaktform > input

  Åtgärd: Koppla en synlig etikett till varje formulärfält med <label for> eller genom att lägga fältet inuti etiketten. Platshållartext räcker inte. Ändringen görs i sajtens egen mallkod.

  <label for="epost">E-postadress</label>
  <input id="epost" name="email" type="email" autocomplete="email" required>

• AllvarligWCAG 3.1.1

  Sidan saknar språkangivelse.

  /villkor

  html

  Åtgärd: Ange sidans språk på html-elementet. Ändringen görs i sajtens egen mallkod.

  <html lang="sv">

Metod: tg-motor 1.1. Teknisk granskning mot WCAG 2.1 nivå AA (den nivå EN 301 549 hänvisar till). 9 sidor granskades med axe-core i Chromium i bredderna 1280 och 390 px, plus egna kontroller: tangentbordsnavigering (fokusfällor, synligt fokus, element som bara nås med mus), sidledsscroll vid 320 px och vid 200 procent zoom, kontrast vid hovring och fokus, och om formulärfel annonseras. Plattform: ej identifierad. Poängen räknas enligt formeln i METOD.md (tg-motor 1.1). Automatiska tester hittar inte alla brister. Granskningen är inte juridisk rådgivning och visar inte att webbplatsen uppfyller lagen.