Tillgänglighetskontroll
Granska HTML-utdrag avseende vanliga WCAG-tillgänglighetsproblem och få konkreta förslag på åtgärder
HTML-indata
Vad Vi Kontrollerar
Alternativtext för Bilder
Kontrollerar att alla <img>-element har alt-attribut så att skärmläsare kan beskriva bilderna för användarna.
Formuläretiketter
Verifierar att alla formulärfält har associerade etiketter via <label for>, aria-label eller aria-labelledby.
Rubrikhierarki
Säkerställer att rubriker följer en logisk ordning (h1, h2, h3...) utan att hoppa över nivåer.
Länktext
Identifierar tomma länkar och generiska länktexter som 'klicka här' som saknar betydelse för användare av skärmläsare.
Språkattribut
Kontrollerar om lang-attributet finns på <html>-elementet, vilket hjälper skärmläsare att använda rätt uttal.
ARIA och Interaktiva Element
Verifierar att interaktiva element har lämpliga roller och ARIA-etiketter för stöd av hjälpmedel.
Tillgänglighetskontroll
Granska HTML-utdrag avseende vanliga WCAG-tillgänglighetsproblem och få konkreta förslag på åtgärder
Funktioner
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
Så använder du
- Klistra in din HTML-kod i inmatningsfältet eller läs in ett av exempelutdragen för att se verktyget i praktiken.
- Klicka på 'Kontrollera Tillgänglighet' för att analysera din HTML mot vanliga WCAG-problem baserat på fler än 12 tillgänglighetsregler.
- Granska resultaten grupperade efter allvarlighetsgrad, läs åtgärdsförslagen och uppdatera din HTML för att åtgärda de problem som hittats.
Tips och bästa praxis
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
Vanliga frågor
Vilka tillgänglighetsproblem kontrollerar verktyget?
Verktyget kontrollerar fler än 12 vanliga WCAG-tillgänglighetsproblem, däribland: saknade alt-attribut på bilder, formulärfält utan associerade etiketter, brott mot rubrikhierarkin (överhoppade nivåer), tomma länkar och generiska länktexter, saknat lang-attribut på HTML-elementet, interaktiva element utan ARIA-roller eller -etiketter, tomma knappar, föråldrade HTML-element, positiva tabindex-värden som stör tab-ordningen, mediaelement med autoplay samt saknade dokumenttitlar. Varje problem kopplas till specifika WCAG-framgångskriterier.
Ersätter det här en fullständig WCAG-granskning?
Nej, verktyget kontrollerar endast vanliga problem på HTML-nivå som kan upptäckas genom att tolka markupen. En heltäckande WCAG 2.1- eller 2.2-granskning kräver tester med riktiga hjälpmedel som skärmläsare, kontroll av färgkontrastvärden, verifiering av tangentbordsnavigering, tester av dynamiska innehållsuppdateringar samt bedömning av kognitiv tillgänglighet. Det här verktyget är ett utmärkt första steg för att fånga upp de vanligaste problemen innan du gör en fullständig manuell granskning.
Vad är skillnaden mellan fel och varningar?
Fel anger tydliga tillgänglighetsbrister som definitivt påverkar användare av hjälpmedel. Till exempel är ett saknat alt-attribut på en bild ett fel eftersom skärmläsare inte kan beskriva bilden. Varningar anger potentiella problem som kan vara problematiska beroende på sammanhanget. Ett tomt alt-attribut är exempelvis en varning eftersom det är korrekt för dekorativa bilder men felaktigt för informativa bilder. Godkända kontroller bekräftar att ett specifikt krav är uppfyllt.
Kan jag kontrollera en URL till en live-webbplats istället för att klistra in HTML?
Verktyget är utformat för att kontrollera HTML-utdrag som du klistrar in direkt. För att testa live-webbplatser behöver du visa sidans källkod eller använda webbläsarens utvecklarverktyg för att kopiera HTML och sedan klistra in den här. För tester av live-webbplatser kan du överväga webbläsartillägg som axe DevTools eller Lighthouse, som kan inspektera den renderade DOM inklusive dynamiskt genererat innehåll.
Varför är lang-attributet på HTML-elementet så viktigt?
Lang-attributet talar om för skärmläsare och andra hjälpmedel vilket språk innehållet är skrivet på. Utan det kan en skärmläsare försöka läsa engelsk text med franska uttalsregler, vilket gör innehållet obegripligt. Det påverkar också hur webbläsare hanterar avstavning, stavningskontroll och andra språkberoende funktioner. Att ange lang är en av de enklaste men mest effektfulla tillgänglighetsförbättringarna du kan göra.
Skickas min HTML-kod till någon server för analys?
Nej, hela analysen sker helt i din webbläsare med hjälp av JavaScript. Din HTML-kod lämnar aldrig din enhet. Verktyget tolkar HTML med webbläsarens inbyggda DOMParser-API och kör alla tillgänglighetskontroller lokalt. Det gör att verktyget är säkert att använda med proprietär kod, interna projekt eller annan HTML som innehåller känsligt innehåll.