Todo:
Short bold lines
with a carriage return can be missed.
I'm a fake heading
Headings
Outline structure & 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 be excluded from the outline.
This should not be visible in the page 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 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
This link has text and an
image.
Ignore handling on images
Aria hidden image
Image inside an aria-labelled link.
Aria labelled image
Uses chart but not too bad.
Figures
Contrast
Super legible.
And incalculable.
Embeds
Flagged as manual check needed for captioning:
Also flagged: embedded audio and social media.
Meaningful Links
Links with no text at all
Image with deadspace:
Content is image in CSS ::before:
Links titled with a URL
https://www.youtube.com/watch?v=DLzxrzFCyOs
Links only titled with generic text
“Click here,” “learn more,” “download,” etc.
Download But should only be yellow
Link with ignored substring: Click here (opens in new window)
Link with new window icon: You were warned (opens in new window)
Links that open in a new window without an external link icon or text warning
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 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 text and empty image text
Links with accessible text added programmatically
These should all pass.
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 |
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.
* not two.
* or three
Spacer between lists.
1 This is split
2 with HR
3 but non-contiguous p are detected.
(1) A parenthesis list
(2) Two
(3) Three
I want an apple.
I want a turtle.
-
•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.
11
12
1 thing
20 things
10 things
20 things
1 thing
1 thing
3 thing
1. This has rich text after the BR
2. Fancy.
1. This has nothing after the BR
1.
🍅 Oh tomato...
Caps lock
SEVERAL WORDS IN A ROW OF CAPS LOCK TEXT WILL TRIGGER A MANUAL CHECK WARNING.
Forms
Shadow root handling 1
Shadow root handling 2
JS Recursion handling
- Caps lock test should not flag LI parent
- ONLY THE INTERIOR LI SHOULD BE FLAGGED
ALL CAPS HEADING OUTLINE IN TABLE OUT OF ORDER SHOULD HAVE 3 HITS |
Shadow root handling 3
Edge Cases & Crash Tests
Shadow root as check root
The shadow-root-as-checkroot element below tests that a checkRoot with a shadowRoot doesn't throw "read-only" TypeError.
Images with unusual alt text
Invisible Unicode braille spaces:
Only whitespace alt:
Only special characters alt:
Alt text is the word null:
Links with unusual structures
Link containing only an empty span:
Link with zero-width space only:
Link with only an empty icon element:
Headings with unusual content
Tables with unusual structures
|
Form inputs with edge-case labeling
Buttons with no accessible name
Focusable hidden elements
Headings with unusual role/level
Embedded content edge cases
SVG edge cases
Empty SVG (should not crash contrast checker):
SVG with only title:
Contrast edge cases
Transparent text should not crash
RGBA zero alpha text
Inherited styles