demo

Headings

This heading skipped a level:

This heading has no text at all:

This short blockquote might be heading:

This all-bold paragraph might be a heading:

I am a fake heading

This heading is really long:

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

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

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

Image with placeholder alt:

Linked image with placeholder
alt:

Image with machine code alt:

Linked image with machine code alt:

Image with very long alt text:

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

This link has
text and an
image.

Any linked image (test off by default)

Image in figure marked decorative:

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

Image in a carousel without an alt:

Contrast

Illegible color combination:

Color needs a manual check:

Color of placeholder cannot be calculated

SVG graphic without enough contrast

SVG graphic where contrast needs a manual check

Embeds & Media

Video flagged as manual check needed for captioning:

Audio needs a transcript:

Iframe missing a title that also needs a manual check:

Unfocusable iframe:

Nested interactive components

Meaningful Links

Links with no text at all

Empty links

Links only labelled with a URL:

https://www.youtube.com/watch?v=DLzxrzFCyOs

Links only labelled with symbols:

↣

Links with the same names go different places

Turtles Turtles

Links only labelled with a DOI number:

doi.org/10.1145/3493612.3520468

Links with meaningless labels:

Click here

Linked icons without text alternatives:

Links that open in a
new window without an external link icon or text warning

Alert for opens-in
test.

Links to PDFs

Have fun.

Links to other documents

A fake doc link.

Links with redundant title attributes

Hover me

Links with attributes that remove them from the tab index:

Aria-hidden links
without a negative
tabindex.

Links aria-labelledby attributes to elements with no text:

Links with generic words in their aria label:

learn
more

Linked image with no alt text:

Linked image with unpronounceable alt text:

Linked image with no alt text attribute:

Linked image with no alt text attribute in a link with text:

Search

Linked image with only a filename as alt text:

Linked image with suspiciously long alt text:

Broken in page links

There's no such ID.

Links to dev server

Oops

Duplicate anchors

Anchor 1 Anchor 2

Tables

Tables without valid headers

Legibility

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

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.

Jumbling the tab index