Headings
Empty heading
Skipped heading
This is a heading five
Ignored headings
This Heading 6 is ignored.
Headings that are too long
Lorem ipsum dolor sit amet consectetur adipisicing elit. At ea ullam reiciendis quis veritatis recusandae ducimus laudantium culpa incidunt? Hic, dignissimos blanditiis accusantium sed accusamus voluptates perferendis nobis fuga aliquid!
Blockquotes used as headings
About the team
"To be, or not to be, that is the question."
Empty heading contains a decorative image
Heading contains an image with alt text
Bolded text used as heading
About the team
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.
This will be flagged
Because it's uses a line break and has a large paragraph following.
Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Eum, harum? Sit ut quidem sequi odit
consequatur eveniet provident illo a voluptatibus suscipit obcaecati
praesentium necessitatibus, vero at excepturi sapiente nobis!
This shouldn't be flagged since it's long and not necessarily a heading but just a bolded sentence for extra emphasis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.
Large paragraph text as heading
About us
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis blanditiis repellat ducimus dolores suscipit itaque provident eos, mollitia explicabo maxime quae ab recusandae velit, odit quibusdam incidunt quidem quas ipsum.
How are you doing?
Since it has punctuation, assume it's not a heading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut consectetur arcu, vitae luctus lacus. Ut euismod arcu sed leo porta suscipit.
Shadow DOM
Images
Image has alt text
Alt text has suspicious stop word
Decorative image
Decorative image using using empty space
Alt text is too long
Missing alt text
Alt has file extension
Alt has placeholder text
Linked decorative image with surrounding link text
Linked image with alt text
Linked image has alt text that contains a stop word
Linked image has long alt
Linked image contains both alt and link text
Linked image missing alt text
Linked decorative image
Linked decorative image using empty space
Linked image with missing alt and contains link text
Linked image has alt text containing placeholder stop words
Linked image has alt text containing file extension
Figure image with different alt and caption text
Figure image with alt but without figcaption
Decorative figure image
Decorative figure image and figcaption
Figure element has duplicate alt and caption text
Linked figure with alt but without figcaption
Linked image opens in new tab
Linked image opens in new tab, alt text provides warning
Ignore noscript tags
Linked image should ignore text within link
Linked image should ignore text within link via string match
Linked image has aria-hidden, but still focusable
Image has aria-hidden
Linked image has aria-hidden and negative tabindex
Linked image with aria-hidden, negative tabindex, and alt
Links
Non descript link text
Descriptive link text
Non descript links using exclusions prop
Non descript link uses string ignore prop
Empty links
Empty icon links
Empty hyperlinks with accessible name via title attribute
Link text contains warning word
Long URLs used as link text
Links that have the same name but different URL
Links to DOI
Adam Chaboryk. 2022. Creating an open source, customizable
accessibility checker for content authors. In Proceedings of
the 19th International Web for All Conference (W4A '22). Association for
Computing Machinery, New York, NY, USA, Article. 6, 1–2.
doi.org/10.1145/3493612.3520468
Links to file without warning
Hyperlinks with ARIA
Testing ARIA computation.
Link with aria-label
Child with aria-label
Multiple children with aria-label
Single aria-labelledby attribute
Multiple ARIA-labelledby attributes
Child with ARIA-labelledby attributes
Link with pseudo content
Links with aria-hidden
Link with aria-hidden, but still focusable
Link with aria-hidden and not focusable
aria-labelledby referencing invalid ID
Tables
Table without issues
Event Name | Time | Location |
---|---|---|
Keynote | 9:00 AM | Auditorium |
Lunch | 12:00 PM | Skyline Room |
Closing Dinner | 5:00 PM | Metropolitan Room |
Missing table headers
Event Name | Time | Location |
Keynote | 9:00 AM | Auditorium |
Lunch | 12:00 PM | Skyline Room |
Closing Dinner | 5:00 PM | Metropolitan Room |
Table with empty header
Time | Location | |
---|---|---|
Keynote | 9:00 AM | Auditorium |
Lunch | 12:00 PM | Skyline Room |
Closing Dinner | 5:00 PM | Metropolitan Room |
Table with semantic headings
Event |
Time |
Location |
---|---|---|
Keynote | 9:00 AM | Auditorium |
Lunch | 12:00 PM | Skyline Room
fake heading |
Closing Dinner | 5:00 PM | Metropolitan Room |
PDFs
PDF link with trailing characters
Documents
Uppercase text
FOR EXAMPLE, THIS WILL BE FLAGGED.
- UPPERCASE TEXT WITHIN BULLETS will be flagged too.
LET'S NOT FORGET ABOUT HEADINGS TOO!
FOR EXAMPLE, this WILL NOT be flagged.
Underlined text
This will be flagged.
This will be <u>flagged.</u>
- List items
Headings
Spans within a paragraph.
Non-semantic lists
a) Sometimes people will manually create a list
b) using fake list prefixes
c) instead of using a semantic list.
(1) Bananas
(2) Pears
(3) Apples
1. Bananas
2. Pears
3. Apples
а) Іноді люди створюють список вручну
б) використовуючи підроблені префікси списку
г) замість використання семантичного списку.
👉 Bananas
👉 Pears
👉 Apples
(a) Bears
(b) Beats
(c) Battlestar gallactica
- First
- Second
- Third
#1 Bears
#2 Beats
#3 Battlestar gallactica
In-page links
Link with empty href or <a href>
Link used as button without roles
Link used as button with proper role
Duplicate IDs
Elements with duplicate IDs but not referenced by anything
Element 1 and Element 2 have the same id attribute but are not referenced by any label, aria-labelledby, etc.
In-page link referencing duplicate IDs
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nam voluptate doloribus, iure alias possimus distinctio recusandae impedit asperiores necessitatibus! Amet perferendis laborum accusantium, dignissimos iste voluptatum nam id alias!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nam voluptate doloribus, iure alias possimus distinctio recusandae impedit asperiores necessitatibus! Amet perferendis laborum accusantium, dignissimos iste voluptatum nam id alias!
Interactive element using aria-labelledby referencing duplicate IDs
Apples
Pears
Two buttons with same ID
Duplicate ID within the Shadow DOM
Subscript & superscript
A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.
A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.
Contrast
This colour fails at normal size.