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 (Schermafbeelding van de Editoria11y-werkbalk
              met 4 fouten.) 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

filename.jpg

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

Afbeelding van een hond.

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

Afbeelding van een hond.

Afbeelding met tijdelijke alt-tekst:

TBD

Gelinkte afbeelding met tijdelijke alt-tekst:

TBD

Afbeelding met machinegegenereerde alt-tekst:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Gelinkte afbeelding met machinegegenereerde alt-tekst:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Afbeelding met zeer lange alt-tekst:

Kijk eens naar deze hond. Deze hond is zo blij. Deze hond mocht
                een wandeling maken en de wandeling ging naar een meer en er waren allerlei fascinerende geuren. Wat een
                geweldige dag had deze hond.

Deze link heeft tekst en een afbeelding.Een mooie grijze doos

Hallo
                  daar

Afbeelding in figuur gemarkeerd als decoratief:

Figcaption is aanwezig.

Afbeelding in figuur met een alt gelijk aan de figcaption:

Figcaption is hetzelfde als alt
Figcaption is hetzelfde als alt

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:

Afspelen uitgeschakeld om cookies te voorkomen.

Audio heeft een transcript nodig:

Iframe zonder titel dat ook handmatige controle vereist:

Niet-focusbaar iframe:

Geneste interactieve componenten

Accordeon
AccordeonVerrassing!

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.

  • Ontbrekende UL-tag
  • 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.

    Tabvolgorde door elkaar gooien