Headings

Outline structure & empty headings.

skipped heading

Skipped heading level

Empty headings

space character (with hidden handler)

empty alt

CMS-provided-placeholder alternative for null alt

null alt

empty linked heading

Suspiciously long heading. Headings should not be used for emphasis, but rather for a document outline, so if you find yourself talking this much, this probably is being used for visual formatting, not a heading.

Skipped and empty heading (duplicate alert check)

This heading has a blank aria-label, but that should be ignored by config (needed for Gutenberg)

Heading with alt

Heading hidden from screen readers

This should be excluded from the outline.

Possible fake headings

Short quote needs check

Longer quotes are OK and should not be flagged.

All <strong> paragraph needs manual check

You can aggregate Posts by a specific category and display the posts in a grid or in a standard list layout. In the example below, we created a Post Category named Announcement and used the Post List Block to list Posts tagged with the Announcement category.

All <b>old paragraph needs manual check

Short lines with spans, non-breaking whitespace should still be flagged

Short bold line
With a carriage return.

Headings with certain punctuation are assumed to be sentences, and not flagged. (!?)

A bold paragraph of very many characters is probably not a heading and probably shouldn't be flagged even if it does not end in a period

Image Text alternatives

Image with no alt attribute at all

Screen readers end up reading this as a filename.

Image marked as decorative with an empty alt

This might be OK; flagged as needing manual review.

Image with an invalid alt attribute

E.g., alt="'"

Image with a filename as an alt

Image with redundant text in its alt

E.g., “image of.”

Image of a photo of a turtledove.

Bob photo.

Image with placeholder alt

TBD

Image with very long alt text

Alt text should be brief. Screen readers cannot jump from sentence to sentence in alt text, so listeners just hear one monster pile of text and if they miss something they have to start over.

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

Ignore handling on images

Aria hidden image

Image inside an aria-labelled link. tbd

Aria labelled image

Figures

Embeds

Flagged as manual check needed for captioning:

YouTube

HTML5 video

E.g., a social media feed

[iframe commented out during development]

Also flagged: embedded audio and social media.

Meaningful Links

Links with no text at all

No characters

Space character

Image with deadspace:

Content is image in CSS ::before:

Content is in CSS ::before:

Links titled with a URL

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

Click here

Links only titled with generic text

“Click here,” “learn more,” “download,” etc.

Download But should only be yellow

Click here

Link with ignored substring: Click here (opens in new window)

Link with new window icon: You were warned (opens in new window)

A great video

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

An informative video.

A link in a tab

Link that is only an aria-label:

Link with inner download icon with aria-label: Aria label on inner span ^

An informative video (opens in new window).

Links to a documents

Note that you can set what Editoria11y should look for in your preferences file. By default it checks for PDF and DOC files.

A fake PDF link.

A fake PDF link with a different url.

Silent but interactive links

linked image with empty alt.

linked image with no alt.

Linked image with an unpronounceable (unvoiced characters) alt text.

linked image with filename.

linked image with click here.

linked image with giant alt.

Link text with image text a butterfly

Link text with text and empty image text

Links with accessible text added programmatically

These should all pass.

Title
Aria-label [todo]
Aria-label overriding [todo]Click here
Aria-labelledby [todo]

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

No table header, but table has role="presentation."

	Numbers in tables Should not be checked for lists
1.	2. Turtles	And Peggy
2.	Bears

Numbers in tables

Should not be checked for lists

2. Turtles

And Peggy

Bears

Empty table header cells

Empty table heading cells will also be flagged:

Legibility

Lists

a. Fake lists

b. use letters or numbers.

c. rather than real formatting.

1. Fake lists
2. Sometimes use
BR instead of P tags.

* Fake lists

* Should only

* be flagged

* one time.

(a) apple
(b) banana
(c) pear

1 This is split

2 with HR

3 but non-contiguous p are detected.

(1) A parenthesis list

(2) Two

(3) Three

National Science Foundation: •Engineering Research Centers
•Science and Technology Centers
•Materials Research Science & Engineering Centers
•Harnessing the Data Revolution (HDR) Institutes
NSF INCLUDES
*Innovation Corps (I-Corps)
*Mid-scale Research Infrastructure
*National Artificial Intelligence Research Institutes
*Research Coordination Networks
•NSF Research Traineeships
•Major Research Instrumentation
•Research Experiences for Undergraduates
National Institutes of Health

B bear.

A turtle.

Apple

Appeal

Apple

Bear

A Bear

A turtle

Aardvark

Bad

🥑 Fake lists with emoji

🍅 Oh tomato...

🦄 Shiny Unicorn

⊙ Math symbol

⊙ Detect on repeat

🚜 Now emoji again, with a line break
🛵 Any other emoji

1 thing

20 things

10 things

20 things

1 thing

🥑 Fake lists with emoji

🍅 Oh tomato...

🦄 Shiny Unicorn

⊙ Math symbol

⊙ Detect on repeat

🚜 Now emoji again, with a line break
🛵 Any other emoji

1. This has rich text after the BR
2. Fancy.

1. This has nothing after the BR

🍅 Oh tomato...

Caps lock

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

Shadow root handling 1

Shadow root handling 2

This shadow component has no elements to find.

This custom component has no shadow root.

JS Recursion handling

Alert within a link should be drawn outside the link.

Caps lock test should not flag LI parent
- ONLY THE INTERIOR LI SHOULD BE FLAGGED

Headings

Outline structure &amp; empty headings.

Skipped heading level

Empty headings

Suspiciously long heading. Headings should not be used for emphasis, but rather for a document outline, so if you find yourself talking this much, this probably is being used for visual formatting, not a heading.

Skipped and empty heading (duplicate alert check)

This heading has a blank aria-label, but that should be ignored by config (needed for Gutenberg)

Heading hidden from screen readers

This should not be visible in the page outline

Possible fake headings

Image Text alternatives

Image with no alt attribute at all

Image marked as decorative with an empty alt

Image with an invalid alt attribute

Image with a filename as an alt

Image with redundant text in its alt

Image with placeholder alt

Image with very long alt text

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

Ignore handling on images

Figures

Embeds

Meaningful Links

Links with no text at all

Links titled with a URL

Links only titled with generic text

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

Links to a documents

Silent but interactive links

Links with accessible text added programmatically

Tables

Tables without valid headers

Outline headers do not count

Empty table header cells

Legibility

Lists

Caps lock

Shadow root handling 1

Shadow root handling 2

JS Recursion handling

Alert within a link should be drawn outside the link.

ALL CAPS HEADING OUTLINE IN TABLE OUT OF ORDER SHOULD HAVE 3 HITS

Shadow root handling 3

All tips

Outline structure & empty headings.