Demo

View a video introduction to the checker's history and features, or try editing the demo content below, opening and dismissing alerts, and using the toolbar (Screenshot of the Editoria11y toolbar, showing 4 errors.) to view the heading outline. This demo includes both the core tests and the CSA suite.

This demo uses a TinyMCE editor. Editoria11y is compatible with most text editors, and has turnkey implementations for CKEditor and Gutenberg in WordPress and Drupal.

Headings

This heading skipped a level:

Oops

This heading has no text at all:

This short blockquote might be heading:

I'm a fake heading

This all-bold paragraph might be a heading:

I am a fake heading

This heading is really long:

Headings and subheadings create a navigable table of contents for assistive devices. The numbers indicate indents in a nesting relationship. Very long headings probably mean the author is saying too much in the heading.

Text alternatives for images

This heading is made of an image of text with no alt:

Image with no alt attribute at all:

Image with an invalid alt attribute, e.g., alt="'"

'

Image with a filename as an alt

filename.jpg

Image with redundant text in its alt, such as “image of:”

Image of a dog.

Linked image with redundant text in its alt, such as “image of:”

Image of a dog.

Image with placeholder alt:

TBD

Linked image with placeholder alt:

TBD

Image with machine code alt:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Linked image with machine code alt:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Image with very long alt text:

Look at this doggy. This doggy is so happy. This doggy got to go on a walk and the walk went to a lake and there were all kinds of fascinating smells. What an amazing day this doggy had.

Images in links where the alt text may be describing the image instead of the link

This link has text and an image.A lovely gray box

Hello there

Image in figure marked decorative:

Figcaption is present.

Image in figure with an alt the same as the figcaption:

Figcaption is the same as alt
Figcaption is the same as alt

Image in a carousel without an alt:

Contrast

Illegible color combination:

Super legible.

Color needs a manual check:

And incalculable.

SVG graphic without enough contrast

SVG graphic where contrast needs a manual check

Embeds & Media

Video flagged as manual check needed for captioning:

Playback disabled to prevent cookies.

Audio needs a transcript:

Iframe missing a title that also needs a manual check:

Unfocusable iframe:

Nested interactive components

Accordion
AccordionSurprise!

Tables

Tables without valid headers

A table without a TH header is invalid

Outline headers do not count

Disable should be content header test inside tables
Empty headers
I found 700 Videos of Turtles
Each 2 Seconds Long

Legibility

SEVERAL WORDS IN A ROW OF CAPS LOCK TEXT WILL TRIGGER A MANUAL CHECK WARNING.

Underlined text

A little italics is fine, but large blocks of of emphasized text are not very legible. A little is acceptable of course, but there are limits, and a whole paragraph is way too much. This, for example, is a whole paragraph. It's kind of hard to read, isn't it? But this test does not trip until it is this long, so you should not see false positives in your content unless you write really big paragraphs like this regularly.

Justified text

Excessive superscript or subscript; subscript should be used for small references and footnotes, not entire sentences or paragraphs.

Teeny fonts

* Fake lists using common characters,

* letters, numbers and emoji.

  • Missing UL tag

    • Forms

    Button with no label

    Inputs with an invisible label, asking if there is also a visible label.

    Inputs with only a placeholder label, asking if there is also a visible label.

    Button with an accessible label different from its visible label.

    Button with an invalid aria-labelledby attribute.

    Button with redundant label.

    Reset button.

    Jumbling the tab index