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

A beautiful square.

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

Large mountains of sand in the Nambian desert.

1. Image has alt text.

Warnings

An image of a bird.

2: Alt text has suspicious stop word.

3. Image is decorative.

4. Image is decorative using empty space (alt=" ").

Zebras are several species of African equids (horse family) united by their distinctive black-and-white striped coats. Their stripes come in different patterns, unique to each individual. They are generally social animals that live in small harems to large herds. Unlike their closest relatives, horses and donkeys, zebras have never been truly domesticated. Source: Wikipedia.

5: Alt text is too long.

Errors

6: Missing alt text.

birdy.jpg

7: Alt text has file extension.

image

8: Alt text has placeholder text.

Hyperlinked images

Pass

Learn more about Tigers

9: Hyperlinked image with null alt text, but has surrounding link text below image.

Learn more about Tigers

10: Hyperlinked image with null alt text, but has surrounding link text above image.

Alt text for figure.
Figure's caption text.

11: Figure image with different alt and caption text.

two zebras black and white

12: Figure image without figcaption.

Warnings

Large mountains of sand in the Nambian desert.

13: Hyperlinked image with alt text.

An image of a bird.

14: Hyperlinked image has alt text that contains a stop word.

Zebras are several species of African equids (horse family) united by their distinctive black-and-white striped coats. Their stripes come in different patterns, unique to each individual. They are generally social animals that live in small harems to large herds. Unlike their closest relatives, horses & donkeys, zebras have never been truly domesticated. Source: Wikipedia.

15: Hyperlinked image alt that is too long.

Fix it again Tony!Learn more about Fiat.

16: Hyperlinked image that contains both alt text and link text.

Fig. 1: Nambian desert (Source: unknown)

17: Decorative image within a <figure> element.

two zebras
Two zebras

18: Figure element has duplicate alt and caption text.

two zebras black and white

19: Hyperlinked figure element without figcaption.

two zebras black and white
Black and white photo of two zebras.

20: Hyperlinked figure element with figcaption.

Errors

21: Hyperlinked image missing alt text.

22: Hyperlinked image that is decorative.

23: Hyperlinked image that is decorative using empty space (alt=" ").

Learn more about Dahlias

24: Hyperlinked image with missing alt and contains surrounding link text.

image

25: Hyperlinked image has alt text containing placeholder 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.

Fix it again Tony!

31: Hyperlinked image opens in new tab.

Two zebras. Opens in new tab.

32: Hyperlinked image opens in new tab. Alt text indicates link opens in new window.

test

33: Bug testing. Ignore <noscript> tags.


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 hyperlink with icon font:
  • Empty hyperlink with icon font (opens new tab):
  • Empty hyperlink with SVG:
  • Empty hyperlink with SVG (opens new tab):

Empty hyperlinks with accessible name via title attribute

  • Empty hyperlink with title:
  • Empty hyperlink with space and title:
  • Non-breaking space and title:  
  • Empty hyperlink with icon font and title:
  • Empty hyperlink with icon font (opens new tab) and title:
  • Empty hyperlink with SVG and title:
  • Empty hyperlink with SVG (opens new tab):

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

  • Reference ID: <span id="app">apples</span>
  • Code: <a href="#" aria-labelledby="app">Learn more</a>
  • Expected result: apples

Multiple ARIA-labelledby attributes

  • 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

PDF

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.