Eksempelrapport for tilgjengelighet
Dette statiske eksempelet viser hva slags rapport den automatiske skanneren vår kan lage: konkrete funn, WCAG-referanser, berørt kontekst og veiledning teamet ditt kan tilpasse.
Tydelige funn du kan handle på
Rapportene viser berørt selektor, alvorlighetsgrad, WCAG-kobling og berørte sider, slik at en utvikler kan avgjøre hva som bør rettes først.
Eksempel på funn: Manglende alt-tekst
HTML: <img src='logo.png'> Funn: Et informativt bilde har ikke noe tekstalternativ. WCAG: 1.1.1 Ikke-tekstlig innhold.
Eksempel på veiledning
Rapporten kan foreslå å legge til et meningsfullt alt-attributt, for eksempel <img src='logo.png' alt='Company name logo'>. Teamet ditt vurderer fortsatt om teksten er treffende i sammenhengen.
Utover automatisering
Rapporten markerer også sjekker som krever manuell gjennomgang, for eksempel logisk fokusrekkefølge, meningsfull alternativ tekst og oppførsel i ulike interaksjonstilstander.
Eksempel på annotert kontekst
Når det er tilgjengelig, kan rapporten vise det berørte grensesnittet ved siden av regelresultatet, slik at teamene kan koble et automatisk funn til siden de må undersøke.
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.
Tekniske detaljer
Markup med feil → eksempel på utbedring
<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>Eksempel på utbedring: veiledning for koden din, ikke tatt i bruk på nettstedet ditt.
Les wcagc-regelguiden: color-contrastLes axe-veiledningen: 1.4.3(åpnes i en ny fane)