Demo
Bekijk een video-introductie
over de geschiedenis en functies van de checker,
of bewerk de demo-inhoud hieronder, open en sluit meldingen,
en gebruik de werkbalk () om de koppenstructuur te bekijken. Deze demo
bevat zowel de kerncontroles als de CSA-suite.
Deze demo maakt gebruik van een TinyMCE-editor. Editoria11y is compatibel met de meeste teksteditors en heeft kant-en-klare implementaties voor CKEditor en Gutenberg in WordPress en Drupal.
Koppen
Deze kop heeft een niveau overgeslagen:
Oeps
Deze kop heeft helemaal geen tekst:
Dit korte blokcitaat lijkt een kop te zijn:
Ik ben een nep-kop
Deze volledig vetgedrukte alinea lijkt een kop te zijn:
Ik ben een nep-kop
Deze kop is erg lang:
Koppen en subkoppen vormen een navigeerbare inhoudsopgave voor hulpmiddelen. De nummers geven de inspringing in een hiërarchische relatie aan. Zeer lange koppen betekenen waarschijnlijk dat de auteur te veel zegt in de kop.
Tekstalternatieven voor afbeeldingen
Deze kop bestaat uit een afbeelding van tekst zonder alt:
Afbeelding zonder alt-attribuut:

Afbeelding met een ongeldig alt-attribuut, bijv. alt=”'”

Afbeelding met een bestandsnaam als alt

Afbeelding met overbodige tekst in alt, zoals “afbeelding van:”

Gelinkte afbeelding met overbodige tekst in alt, zoals “afbeelding van:”
Afbeelding met tijdelijke alt-tekst:

Gelinkte afbeelding met tijdelijke alt-tekst:
Afbeelding met machinegegenereerde alt-tekst:

Gelinkte afbeelding met machinegegenereerde alt-tekst:
Afbeelding met zeer lange alt-tekst:

Afbeeldingen in links waarbij de alt-tekst de afbeelding beschrijft in plaats van de link
Deze link heeft tekst en een
afbeelding.
Elke gelinkte afbeelding (test standaard uitgeschakeld)
Afbeelding in figuur gemarkeerd als decoratief:
Afbeelding in figuur met een alt gelijk aan de figcaption:
Afbeelding in een carrousel zonder alt:
Contrast
Onleesbare kleurencombinatie:
Heel goed leesbaar.
Kleur vereist handmatige controle:
En onberekend.
SVG-afbeelding zonder voldoende contrast
SVG-afbeelding waarbij contrast handmatig gecontroleerd moet worden
Ingesloten inhoud & media
Video gemarkeerd voor handmatige controle op ondertiteling:
Audio heeft een transcript nodig:
Iframe zonder titel dat ook handmatige controle vereist:
Niet-focusbaar iframe:
Geneste interactieve componenten
Accordeon
Accordeon
Verrassing!Betekenisvolle links
Links zonder tekst
Links die alleen gelabeld zijn met een URL:
https://www.youtube.com/watch?v=DLzxrzFCyOs
Links die alleen gelabeld zijn met symbolen:
Links met dezelfde naam verwijzen naar verschillende plaatsen
Links die alleen gelabeld zijn met een DOI-nummer:
doi.org/10.1145/3493612.3520468
Links met betekenisloze labels:
Gelinkte pictogrammen zonder tekstalternatieven:
Links die in een nieuw venster openen zonder extern-link-icoon of tekstwaarschuwing
Links naar PDF's
Links naar andere documenten
Links met overbodige title-attributen
Links met attributen die ze uit de tabvolgorde verwijderen:
Links met aria-labelledby-attribuut naar elementen zonder tekst:
Links met generieke woorden in hun aria-label:
Gelinkte afbeelding zonder alt-tekst:
Gelinkte afbeelding met onuitspreekbare alt-tekst:
Gelinkte afbeelding zonder alt-tekst-attribuut:
Gelinkte afbeelding zonder alt-tekst-attribuut in een link met tekst:
Gelinkte afbeelding met alleen een bestandsnaam als alt-tekst:
Gelinkte afbeelding met verdacht lange alt-tekst:
Gebroken interne paginalinks
Links naar ontwikkelserver
Dubbele ankers
Tabellen
Tabellen zonder geldige koppen
| Een tabel zonder TH-kop is ongeldig |
Inhoudskoppen tellen niet mee |
Inhoudskoppen in tabellen uitschakelen |
| Lege koppen | |
|---|---|
| Ik vond | 700 video's van schildpadden |
| Elk | 2 seconden lang |
Leesbaarheid
MEERDERE WOORDEN ACHTER ELKAAR IN HOOFDLETTERS ACTIVEREN EEN HANDMATIGE CONTROLEWAARSCHUWING.
Onderstreepte tekst
Een beetje cursief is prima, maar grote blokken benadrukte tekst zijn niet erg leesbaar. Een beetje is natuurlijk acceptabel, maar er zijn grenzen, en een hele alinea is veel te veel. Dit is bijvoorbeeld een hele alinea. Het is een beetje moeilijk te lezen, nietwaar? Maar deze test wordt pas geactiveerd als de tekst zo lang is, dus u zou geen valse positieven in uw inhoud moeten zien, tenzij u regelmatig zulke grote alinea's schrijft.
Uitgevulde tekst
Overmatig superscript of subscript; subscript moet worden gebruikt voor kleine verwijzingen en voetnoten, niet voor hele zinnen of alinea's.
Kleine lettertjes
* Nep-lijsten met gewone tekens,
* letters, cijfers en emoji.
Formulieren
Knop zonder label
Invoervelden met een onzichtbaar label, waarbij gevraagd wordt of er ook een zichtbaar label is.
Invoervelden met alleen een plaatshouder als label, waarbij gevraagd wordt of er ook een zichtbaar label is.
Knop met een toegankelijk label dat verschilt van het zichtbare label.
Knop met een ongeldig aria-labelledby-attribuut.
Knop met overbodig label.
Resetknop.