Exempel på tillgänglighetsrapport
Det här statiska exemplet visar vilken typ av rapport vår automatiska skanner kan ta fram: specifika fynd, WCAG-referenser, berört sammanhang och vägledning som ditt team kan anpassa.
Tydliga fynd att agera på
Rapporterna visar berörd selektor, allvarlighetsgrad, WCAG-mappning och berörda sidor så att en utvecklare kan avgöra vad som ska åtgärdas först.
Exempelfynd: alt-text saknas
HTML: <img src='logo.png'> Fynd: En informativ bild saknar textalternativ. WCAG: 1.1.1 Icke-textuellt innehåll.
Exempel på vägledning
Rapporten kan föreslå att ett meningsfullt alt-attribut läggs till, till exempel <img src='logo.png' alt='Company name logo'>. Ditt team måste fortfarande bedöma om texten är korrekt i sitt sammanhang.
Bortom automatiseringen
Rapporten markerar också kontroller som kräver manuell granskning, till exempel logisk fokusordning, meningsfull alternativtext och beteende i olika interaktionslägen.
Exempel på kommenterad kontext
När det är tillgängligt kan rapporten visa det berörda gränssnittet bredvid regelresultatet, så att team kan koppla ett automatiskt fynd till sidan de behöver granska.
1.4.3 Contrast (Minimum)
Fix any of the following: Element has insufficient color contrast of 2.94 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Ensure that text has a contrast ratio of at least 4.5:1 against its background color to be legible for people with moderately low vision.
Tekniska detaljer
Felaktig markup → exempel på åtgärd
<a href="/about" class="nav-link text-gray-400 bg-white">About Us</a><a href="/about" class="nav-link text-gray-700 bg-white">About Us</a>Exempel på åtgärd: vägledning för din kod, inte tillämpad på din webbplats.
Läs wcagc-regelguiden: color-contrastLäs axe-vägledningen: 1.4.3(öppnas i en ny flik)