Everything
Well, almost everything. Just a page with a lot of errors and warnings. ðŸ¤
Headings
Empty headings
Skipped headings
This should be a Heading 4!
Headings that are too long
Is a heading really a heading if it's a long sentence? Or is a content author just going for visual aesthetics? Headings longer than 160 characters will be flagged as a warning.
Blockquotes used as headings
If a blockquote is less than 25 characters it will be flagged as an warning.
About the team
"To be, or not to be, that is the question."
Empty heading contains a decorative image
Heading contains an image without alt text
Heading contains an image with alt text
Bolded text used as heading
Looking for <p><strong>Some text</strong></p>
About us
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 shouldn't be flagged since it's long and not necessarily a heading. It could just be a big block of bolded text. It is over 120 characters.
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.
Bolded text used as heading with line breaks
Looking for something like... <p><strong>Fake
heading<br></strong> Followed by some
text.</p>
This check has been designed to be somewhat forgiving to prevent too many warnings.
Warning
This will be flagged!
Because it's a pretty substantial paragraph. Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Elit duis tristique sollicitudin nibh. 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.
Pass
About us
Will not be flagged because it's a small paragraph. Lorem ipsum dolor sit
amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis
tristique sollicitudin nibh.
Address
105 Bond Street
Toronto,
ON
M5B 2K3
This won't be flagged either since this bolded text is long and not necessarily a heading. It
could
just be a big block of bolded text. It is over 120 characters.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis
tristique sollicitudin nibh. 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.
Images
Images without links
Pass
1. Image has alt text.
Warnings
2: Alt text has suspicious stop word.
3. Image is decorative.
4. Image is decorative using empty space (alt=" ").
5: Alt text is too long.
Errors
6: Missing alt text.
7: Alt text has file extension.
8: Alt text has placeholder text.
Hyperlinked images
Pass
9: Hyperlinked image with null alt text, but has surrounding link text below image.
10: Hyperlinked image with null alt text, but has surrounding link text above image.
11: Figure image with different alt and caption text.
12: Figure image without figcaption.
Warnings
16: Hyperlinked image that contains both alt text and link text.
17: Decorative image within a <figure> element.
18: Figure element has duplicate alt and caption text.
20: Hyperlinked figure element with figcaption.
Errors
24: Hyperlinked image with missing alt and contains surrounding link text.
26: Hyperlinked image where anchor has aria-hidden="true".
27: Hyperlinked image's alt text contains file extension.
Other
28: Hyperlinked image where anchor has aria-hidden="true" and tabindex="-1"
29: Hyperlinked image where anchor has aria-hidden="true" and tabindex="-1" and the image has alt text.
Learn more about the Canary Islands
30: Hyperlinked image contains skipped heading. Error is appended after the hyperlink to prevent nesting button inside hyperlink.
Links
Partial stop words
Errors
Using any of the words above on it's own will result in an error since it's not descriptive enough.
Pass
However, if used with additional text it will not be flagged as an error.
Partial stop words with exclusions
Sometimes a website theme may automatically append text to a link. For example, "(External Link)" will be ignored, which will correctly flag this link as an error for not being descriptive enough.
Empty hyperlinks
- Empty hyperlink:
- Empty hyperlink with space:
- Single character: .
- Non-breaking space:
Empty hyperlinks with children
Empty hyperlinks with accessible name via title attribute
Link text best practices
Stop words
Link contains: "click here", ">", "<"
Long URLs
Long URLs will be flagged only.
Hyperlinks with ARIA
ARIA label
- Code:
<a href="#" aria-label="Learn more about Sa11y">Learn more</a>
- Expected result: Learn more about Sa11y
Child with ARIA label
- Code:
<a href="#">Learn more <span aria-label="about Sa11y"></span></a>
- Expected result: Learn more about Sa11y
Multiple children with ARIA label
- Code:
<a href="#">Learn more <span aria-label="about Sa11y"></span> <i aria-label="(External)" class="bi bi-box-arrow-up-right"></i></a>
- Expected result: Learn more about Sa11y (External)
Single ARIA-labelledby attribute
apples- Reference ID:
<span id="app">apples</span>
- Code:
<a href="#" aria-labelledby="app">Learn more</a>
- Expected result: apples
Multiple ARIA-labelledby attributes
and bananas- Reference IDs: itself,
<span id="app">apples</span>
,x
which does not exist,<span id="ban">bananas</span>
- Code:
<a href="#" id="self" aria-labelledby="self app x ban">Learn more about</a>
- Expected result: Learn more about apples and bananas
Child with ARIA-labelledby attributes
- Reference ID:
<span id="app">apples</span>
,x
which does not exist,<span id="ban">bananas</span>
- Code:
<a href="#">Learn more <span aria-labelledby="app x ban"></span></a>
- Expected result: Learn more about apples and bananas
ARIA Hidden
- Code:
<a href="#" aria-hidden="true">Learn more</a>
- Expected result:
Tables
Proper table
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 |
Other issues
A warning is added to any hyperlinks that have a .pdf file extension. A warning icon is only appended to the first PDF detected on the page to avoid overwhelming a content author. All other PDF links are visually highlighted.
Uppercase text
This warning is to discourage the use of uppercase text. This is not a WCAG 2.1 requirement, however is a discouraged practice for readability. Secondly, some capitalized words may be mistaken for an acronym and ready out character by character with a screen reader. This condition uses regex to find uppercase words that are at least 3 characters in length, however it will only be indicated as a warning if at least 5 uppercase words within an element is found. It only checks for uppercase words within the following elements: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.
FOR EXAMPLE, THIS WILL BE FLAGGED.
FOR EXAMPLE, this WILL NOT be flagged.
- UPPERCASE TEXT WITHIN BULLETS will be flagged too.
Underlined text
This warning is to discourage the use of underlined text as it is easily confused with links. This condition checks for underlined text created with <u> markup and css styles within the following elements: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.
This will be flagged.
<u>underlined</u> this way will be flagged.
- Underlined text wihin lists will be flagged too.
This heading will be flagged.
Linked text will not be flagged.
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
Duplicate IDs
Element 1 and Element 2 have the same id attribute.
Subscript and superscript formatting
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.