Esimerkki saavutettavuusraportista
Tämä staattinen esimerkki näyttää, millaisen raportin automaattinen skannerimme voi tuottaa: täsmälliset havainnot, WCAG-viittaukset, havaintoihin liittyvä asiayhteys ja ohjeet, joita tiimisi voi mukauttaa.
Selkeät havainnot, joiden pohjalta voi toimia
Raporteissa näkyvät kyseinen valitsin, vakavuus, WCAG-vastaavuus ja ongelman koskemat sivut, jotta kehittäjä voi päättää, mitä korjata ensin.
Esimerkkihavainto: puuttuva alt-teksti
HTML: <img src='logo.png'> Havainto: Informatiivisella kuvalla ei ole tekstivastinetta. WCAG: 1.1.1 Ei-tekstuaalinen sisältö.
Esimerkkiohje
Raportti voi ehdottaa kuvaavan alt-määritteen lisäämistä, esimerkiksi <img src='logo.png' alt='Company name logo'>. Tiimisi tarkistaa silti, onko teksti asiayhteydessä tarkka.
Automaatiota pidemmälle
Raportti nostaa esiin myös kohdat, jotka vaativat manuaalisen tarkistuksen, kuten loogisen kohdistusjärjestyksen, kuvaavan vaihtoehtoisen tekstin ja toiminnan eri vuorovaikutustiloissa.
Merkinnöin varustettu asiayhteysesimerkki
Jos saatavilla, raportti voi näyttää ongelman koskeman käyttöliittymän kohdan sääntötuloksen rinnalla, jolloin tiimit voivat yhdistää automaattisen havainnon sivuun, jota heidän on tarkistettava.
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.
Tekniset tiedot
Virheellinen HTML → esimerkkikorjaus
<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>Esimerkkikorjaus on ohje koodiisi. Sitä ei ole otettu käyttöön sivustollasi.
Lue wcagc-sääntöopas: color-contrastLue axe-ohje: 1.4.3(avautuu uuteen välilehteen)