Page-level meta tag errors

Editoria11y: All Tests

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 marked decorative:

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 characters like åø´ñ'’$#'"<script>alert('hi')</script>.

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

Image of a turtledove.

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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Linked image with very long alt text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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:

Alt text contains a large number. ALT_MAYBE_BAD_WARNING:

1234567890

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 & Interactives

Video flagged as manual check needed for captioning:

Audio needs a transcript:

Iframe missing a title that also needs a manual check:

Iframe with suspicious dataviz:

Custom embed selector

?

Unfocusable iframe:

Nested interactive components

Accordion
AccordionSurprise!

Empty links

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

Links with the same names go different places

Turtles Turtles

doi.org/10.1145/3493612.3520468

Click here

Alert for opens-in test.

Have fun.

A fake doc link.

Hover me

Links with attributes that remove them from the tab index:

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:

http://jpg.gif

Broken in page links

There's no such ID.

Possible fake button

Menu

Links to dev server

Oops

Duplicate anchors

Anchor 1 Anchor 2

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