Headings
Empty heading
Skipped heading
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas, asperiores esse ut quo adipisci.
Laboriosam hic corrupti repellendus nemo perferendis nesciunt at nostrum!
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 in the beginning
Alt text has suspicious stop word towards the end
Decorative image
Decorative image within a carousel component
The default source is .carousel, .slideshow
This only has one image, so it should be a general decorative image warning.
Alt text is too long
Missing alt text
Image using empty space for alt
Linked image using empty space
Image using unpronounceable character for alt
Linked image using unpronounceable character for alt
Linked image using unpronounceable character for alt with surrounding text
Alt has file extension
Alt has image dimensions
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 image missing alt text but has aria-hidden
Linked image missing alt text but has presentation role
Linked image missing alt text but has aria-hidden with surrounding text
Linked image missing alt text but has presentation role with surrounding text
Regular image with missing alt but has aria-hidden
Regular image with missing alt but has role="presentation"
Linked decorative image
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
Image's alt supplied via aria-label
Image with empty aria-label=""
Image with empty space for aria-label=" "
Image with invalid aria-labelledby
Image with valid aria-labelledby
Linked image with valid aria-label
Ignore tracking pixels
If width and height is explicitly set as 1px and has display: none;
Excluded image via prop
Image excluded by class via prop imageIgnore
Alt text that may be bad
Basically an alt text that is a single word greater than 15 characters that contains non-alpha characters.
Non-english characters, single word, long alt text
Linked image that has potentially bad alt text
Placeholder alt accompanied with random number
Links
Non descript link text
Non descript link text (Cyrillic i18n test)
Ukrainian "learn more" string passed in via linkStopWord prop.
Descriptive link text
Non descript links using exclusions prop
Non descript link uses string ignore prop
Flag custom links via prop linksToFlag
Non-descript link check text strips "new window" phrases
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 open in new tab without warning
Links to file without warning
Links where link text is "opens new tab" or similar phrase
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
Link with aria-labelledby referencing invalid ID
Link with aria-label that doesn't contain visible text
Label in name with linkIgnoreStrings
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 |
Table with role="presentation"
| Event Name |
|---|
Table explicitly hidden with display:none
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
Justify-aligned text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex sequi tempora consequuntur debitis ratione quae quis esse, iure numquam dolorum deleniti explicabo. Explicabo veritatis hic modi odio qui nisi rerum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur nemo ipsa officiis, ad sit adipisci, totam illo, iusto repudiandae natus quis temporibus deleniti doloremque necessitatibus at numquam qui! Quo, eveniet?
Text is too small
1em
Lorem ipsum dolor sit amet consectetur adipisicing elit.
.75em
Lorem ipsum dolor sit amet consectetur adipisicing elit.
0.6em which is roughly 10px
Lorem ipsum dolor sit amet consectetur adipisicing elit.
50%
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ignore if font-size: 0;
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.
Underlined text within a hyperlink
Underlined text within a ABBR element.
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
+ Bananas
+ Pears
+ Apples
Previous false positive within a table
In an earlier version, multiple warnings would appear within a table like this.
|
Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
Sun |
|
|---|---|---|---|---|---|---|---|
|
1. Bedtime |
11:00 pm |
11:30 pm |
11:05 pm |
10:35 pm |
10:55 pm |
12:15 am |
10:15 pm |
|
2. Time to fall asleep |
25 |
20 |
40 |
60 |
35 |
15 |
95 |
|
3. Time awake during night |
20 |
25 |
15 |
35 |
20 |
45 |
60 |
|
4. Wake time |
7 am |
7 am |
7 am |
7 am |
7 am |
8:40 am |
7:50 am |
|
5. Rise time |
7:15 am |
7:20 am |
7 am |
7:25 am |
7:15 am |
10:50 am |
11:45 am |
Uncontained list items
List items may be contained in either unordered (bullet) lists or ordered (sequentially numbered) lists.
Same-page links
Link with empty href or <a href>
Link used as button without roles
Link used as button with proper role
Link with onclick handler
Link with valid aria-controls
Link with valid name attribute
Valid links with encoded or decoded href or id values
Encoded href and id
Encoded href
Encoded id
Emoji href and id
Encoded emoji href and id
Emoji encoded href and decoded id
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
Learn more about 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.
Double nested interactive layout components
Details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste autem numquam ullam illum, aliquid quaerat dolor.Surprise!
Rome is the capital city of Italy. It is also the capital of the Lazio region, the centre of the Metropolitan City of Rome Capital, and a special comune (municipality) named Comune di Roma Capitale.Using [role="tablist"]
Contrast
This colour fails at normal size.
This colour also fails at a large size.
Lorem ipsum dolor. Low opacity text.
Contrast warning
Text on background image requires manual review!
Contrast ignore
Ignore elements with exactly 1:1 contrast ratio
In most cases, any time there's been a 1:1 ratio it's because it's a background image... as no one should intentionally make something 1:1...
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam quasi ipsa assumenda aliquam dolore amet mollitia similique ab consequuntur magnam id veritatis explicabo accusamus, ipsum iusto ea eligendi necessitatibus iure?
Large size text with 1:1
Lorem ipsum dolor.
Ignore specific elements
Ignore specific elements via prop
Ignore via contrastIgnore prop.
SVG contrast
Simple SVGs
SVG with good contrast
SVG with bad fill but good stroke
SVG with good fill but bad stroke
SVG foreground is same as background
Large SVG with bad fill but good stroke
Complex SVG but all of the paths are the same colour (good contrast)
SVG with poor fill contrast (no stroke)
SVG with poor fill contrast and poor stroke contrast
SVG with poor fill contrast and skinny stroke (with good contrast)
Complex SVG but all of the paths are the same colour (poor contrast)
Simple SVG with poor stroke/no fill
SVG with unsupported colour space foreground
SVG with unsupported colour space background
SVG with background image
Complex SVGs has different fill colours
Unsupported background colour
Unsupported foreground colour
SVG with <text>
Complex SVGs has different fill colours and poor contrast
Complex SVG but all of the paths are same fill BUT different stroke
SVG with linear gradient for fill
SVG without a <path> node
Empty svg
SVG with linear gradient background
SVG with background: url()
Other SVGs, like filters
Other SVGs, like animations
Inputs
Hidden inputs
Inputs that have labels
Input has id and label has corresponding for attribute
Input that is type='submit' or type='button'
Implicit label has text
Text area
Select
Inputs missing labels
Input without a label or missing id
Implicit labels without text
<textarea> without label
<select> without label
Input where accessible name is empty
Input with ID although label does not have a for attribute
Input where type="image" does not have accessible name
Input warnings
Input is using title, aria-label or aria-labelledby attribute
Input that is type='reset'
iFrames
iFrame purposely have broken src attributes so they delay page load.
iFrame has aria-hidden="true" and tabindex="-1"
iFrame has tabindex="-1"
iFrame has missing accessible name
General iFrame
iFrame with video source
iFrame with audio source
iFrame with data visualization source
HTML5 video and audio
Video without track element
Video with track element (empty src)
Video with track element
Audio
Misc developer checks
Tabindex attribute greater than 0
[tabindex="1"]
[tabindex="0"]
[tabindex="-1"]
Buttons
Buttons without an accessible name
Empty button
Empty button with icon font
Button with broken aria-labelledby attribute
Button with aria-hidden
With negative tabindex
Button has "button" within the accessible name
Uses visually hidden class to hide "button".
Uses aria-label to hide "button".
Button has accessible name
Button has visible text
Button has aria-label
Label in name
Visible text not within aria-label
Visible text not within aria-label (within an accordion)
(Testing visually hidden function)