Start een geautomatiseerde WCAG 2.2 AA audit voor een website of app.
Kies de website en het type onderzoek. Ca11y voert het onderzoek automatisch uit volgens de WCAG-EM methode.
| Pagina | URL | Status |
|---|---|---|
| Beginpagina | https://dip.online | ✓ Getoetst |
| Contactpagina | https://dip.online/contact | ✓ Getoetst |
| Producten | https://dip.online/product | ✓ Getoetst |
| Insights | https://dip.online/insights | ✓ Getoetst |
| Kennisbank | https://dip.online/kennisbank | ✓ Getoetst |
| Blog artikel | https://dip.online/blog/wcag-uitgelegd | ⟳ Bezig |
| Zoekresultaten | https://dip.online/?s=test | — Wacht |
| Toegankelijkheid | https://dip.online/toegankelijkheid | — Wacht |
Op alle onderzochte pagina's staat in de header het logo van dip. Dit logo is een afbeelding in een link naar de beginpagina. De afbeelding heeft een leeg alt-attribuut (alt="") en de link bevat geen andere tekst. Hierdoor heeft de link geen toegankelijke naam en is het voor gebruikers van hulpsoftware niet duidelijk waar deze link naartoe leidt.
<a href="/"><img src="logo.svg" alt=""></a>
Oplossing: Geef de afbeelding een tekstalternatief dat zowel het logo als het linkdoel beschrijft, bijvoorbeeld alt="dip, ga naar de beginpagina".
Hetzelfde probleem doet zich voor bij het dip-logo in de footer.
Op de beginpagina staan logo's van klanten en partners. Een groot deel van de logo's heeft een leeg alt-attribuut (alt=""). Deze afbeeldingen zijn niet decoratief en hebben een alternatieve tekst nodig met minimaal de naam van de organisatie.
Zie ook succescriterium 2.5.3.
Op de beginpagina is de visuele koppenstructuur niet goed opgebouwd met HTML-kopteksten. Er wordt een <h1> gevolgd door een <h3> zonder tussenliggende <h2>. Hierdoor missen gebruikers van hulpsoftware de hiërarchie van de content.
<h3 class="product-title">
Oplossing: Gebruik kopteksten in de juiste hiërarchische volgorde. Vervang <h3> door <h2> voor sectiebeschrijvingen, of voeg een tussenliggende <h2> toe.
Op meerdere pagina's is de contrastverhouding van grijze hulpteksten onvoldoende. De placeholder-tekst in formuliervelden heeft een contrastverhouding van 2.8:1, terwijl minimaal 4.5:1 vereist is.
#adb5bd op #ffffff = 2.8:1 (vereist: 4.5:1)
Oplossing: Gebruik een donkerder grijs voor placeholder-tekst, bijvoorbeeld #6c757d (contrastverhouding 4.6:1).
De rand van invoervelden op het contactformulier heeft een contrastverhouding van 1.8:1 ten opzichte van de achtergrond. Visuele aanduiding van formuliervelden moet minimaal 3:1 contrast hebben.
Oplossing: Gebruik een donkerder randkleur, bijvoorbeeld #999999.
Het mobiele hamburger-menu kan niet geopend worden met het toetsenbord. De knop is een <div> element zonder role="button" of tabindex. Toetsenbordgebruikers kunnen de navigatie niet bereiken.
Oplossing: Gebruik een <button> element of voeg role="button", tabindex="0" en een keydown handler toe.
Bij het sluiten van het mobiele menu springt de focus niet terug naar de menuknop maar naar het begin van de pagina. Dit is verwarrend voor toetsenbordgebruikers.
Oplossing: Verplaats de focus terug naar het element dat het menu opende wanneer het menu wordt gesloten.
Op meerdere interactieve elementen is geen zichtbare focusindicator aanwezig. Dit geldt voor links in de footer en knoppen in de productkaarten. Gebruikers die met het toetsenbord navigeren kunnen niet zien waar ze zijn.
Oplossing: Verwijder outline: none uit de CSS of voeg een duidelijke :focus-visible stijl toe.
Het zoekformulier heeft een invoerveld zonder zichtbaar label en zonder aria-label. Het invoerveld heeft wel een placeholder maar die verdwijnt bij invoer en is geen geldige labelmethode.
<input type="search" placeholder="Zoeken...">
Oplossing: Voeg een aria-label="Zoeken" toe aan het invoerveld of koppel een visueel verborgen <label>.
| Titel | URL of vindplaats |
|---|---|
| Beginpagina | https://www.dip.online |
| Contactpagina | https://www.dip.online/contact |
| Productpagina | https://www.dip.online/product |
| Insights | https://www.dip.online/insights |
| Kennisbank | https://www.dip.online/kennisbank |
| Blog artikel | https://www.dip.online/blog/wcag-uitgelegd |
| Zoekresultaten | https://www.dip.online/?s=test |
| Toegankelijkheid | https://www.dip.online/toegankelijkheid |