Everything

Well, almost everything. Just a page with a lot of errors and warnings. 🤠

Headings

Empty headings

Expected: Error

Heading via aria-level

Expected: no annotation and should appear in Page Outline.

This is a Heading 4 via ARIA.

Ignored headings

Using prop headerIgnore to ignore this heading.

Expected: no annotation and doesn't appear in Page Outline.

This H6 is ignored.

Skipped headings

Expected: Error

This should be a Heading 4!

Headings that are too long

Expected: Warning

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.

What about hyperlinked headings? 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.

Expected: Warning

About the team
"To be, or not to be, that is the question."

Empty heading contains a decorative image

Expected: Error and Warning

Heading contains an image without alt text

Expected: 2 errors

Heading contains an image with alt text

Expected: Pass

A beautiful square.

Bolded text used as heading

Looking for <p><strong>Some text</strong></p>

Expected: Warning

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 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.

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

Expected: 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.

This will not be flagged. Has punctuation, maybe sentence?
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.

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.

Address
105 Bond Street
Toronto, ON
M5B 2K3

This won't be flagged either since this line of text is over 120 characters and not necessarily a heading it could just be a long sentence that was bolded for 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. 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 pretending to be a heading

If a paragraph tag has a font size of at least 25px.

About us

Expected: Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut consectetur arcu, vitae luctus lacus. Ut euismod arcu sed leo porta suscipit. Donec maximus eleifend diam vel pulvinar. Sed turpis mauris, eleifend et volutpat non, varius nec leo. Donec nec ligula in dui elementum venenatis.

How are you doing?

Expected: nothing.

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.

About us

Expected: nothing.

A paragraph with 24px text nested within a Heading 4. This should not get flagged. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut consectetur arcu, vitae luctus lacus.

Images

Images without links

Pass

Large mountains of sand in the Nambian desert.

Image has alt text.

Expected: Pass

Warnings

An image of a bird.

Alt text has suspicious stop word.

Expected: Warning

Image is decorative.

Expected: Warning

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

Expected: Warning

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.

Alt text is too long.

Expected: Warning

Errors

Missing alt text.

Expected: Error

birdy.jpg

Alt text has file extension.

Expected: Error

image

Alt text has placeholder text.

Expected: Error

Hyperlinked images

Pass

Learn more about Tigers

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

Expected: Pass

Learn more about Tigers

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

Expected: Pass

Warnings

Large mountains of sand in the Nambian desert.

Hyperlinked image with alt text.

Expected: Warning

An image of a bird.

Hyperlinked image has alt text that contains a stop word.

Expected: Warning

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.

Hyperlinked image alt that is too long.

Expected: Warning

Fix it again Tony!Learn more about Fiat.

Hyperlinked image that contains both alt text and link text.

Expected: Warning

Errors

Hyperlinked image missing alt text.

Expected: Error

Hyperlinked image that is decorative.

Expected: Error

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

Expected: Error

Learn more about Dahlias

Hyperlinked image with missing alt and contains surrounding link text.

Expected: Error

image

Hyperlinked image has alt text containing placeholder text.

Expected: Error

doggy.jpg

Hyperlinked image's alt text contains file extension.

Expected: Error

<figure> images

Alt text for figure.
Figure's caption text.

Figure image with different alt and caption text.

Expected: Pass

two zebras black and white

Figure image without figcaption.

Expected: Pass

Decorative image within a <figure> element.

Expected: Warning

Fig. 1: Nambian desert (Source: unknown)

Decorative image within a <figure> element with a <figcaption>.

Expected: Warning

two zebras
Two zebras

Figure element has duplicate alt and caption text.

Expected: Warning

two zebras black and white

Hyperlinked figure element without figcaption.

Expected: Warning

A bear flying in a space ship.
Learn more about space ships!

Hyperlinked figure element with figcaption.

Expected: Warning

Other

Learn more about the Canary Islands

Hyperlinked image contains skipped heading. Error is appended after the hyperlink to prevent nesting button inside hyperlink.

Expected:
Pass & Error

Hyperlinked image contains skipped heading. Error is appended after the hyperlink to prevent nesting button inside hyperlink.

Expected:
Warning & Error

Fix it again Tony!

Hyperlinked image opens in new tab.

Expected: 2 warnings if Links (Advanced) is enabled.

Two zebras. Opens in new tab.

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

Expected: Warning

test

Bug testing. Ignore <noscript> tags.

Expected: Warning

test Text ignored.

Image link should ignore text within link.

Expected: Warning

Images with ARIA hidden

Image has aria-hidden="true"

Expected: Nothing.

Hyperlinked image where anchor has aria-hidden="true" and tabindex="-1"

Expected: Nothing!

Hyperlinked image where anchor has aria-hidden="true" and tabindex="-1" and has alt text.

Expected: Nothing!

Hyperlinked image where anchor has aria-hidden="true" and is still focusable.

Expected: Error

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.

Expected: 3 errors

this page
More »
Learn more >

Pass

However, if used with additional text it will not be flagged as an error.

Learn more about Sa11y

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.

Expected: Error

learn more (External link)

Empty hyperlinks

Expected: 4 errors

  • Empty hyperlink:
  • Empty hyperlink with space:
  • Single character: .
  • Non-breaking space:  

Empty hyperlinks with children

Expected: 4 errors

  • 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", ">", "<"

Expected: 5 warnings

Click here to view our programs
Next >
< Previous
← Left
« Previous

Long URLs

Long URLs will be flagged only.

https://sa11y.netlify.app/developers/custom-checks/

Expected: Warning

https://sa11y.netlify.app

Links that have the same name but different URL

Expected: Warning

some link or some link

Expected: Warning

uses aria label or learn more

Links to DOI

Expected: Warning

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 https://pubmed.ncbi.nlm.nih.gov/23782161/ test for Computing Machinery, New York, NY, USA, Article. 6, 1–2. doi.org/10.1145/3493612.3520468

Hyperlinks with ARIA

ARIA label

  • Code: <a href="#" aria-label="Learn more about Sa11y">Learn more</a>
  • Expected result: Learn more about Sa11y Pass
Learn more

Child with ARIA label

  • Code: <a href="#">Learn more <span aria-label="about Sa11y"></span></a>
  • Expected result: Learn more about Sa11y Pass
Learn more

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) Pass
Learn more

Single ARIA-labelledby attribute

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

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 Pass
Learn more about

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 Pass
Learn more about

ARIA Hidden

  • Code: <a href="#" aria-hidden="true">Learn more</a>

Expected: Error

Expected:

Miscellaneous testing

Other weird test cases.

Link that has an SVG with a <title>foo</title> tag.
Expected: No annotation.

Learn more about testing

A link with pseudo elements.

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

Expected: Error

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

Expected: Error

Time Location
Keynote 9:00 AM Auditorium
Lunch 12:00 PM Skyline Room
Closing Dinner 5:00 PM Metropolitan Room

Table with semantic headings

Expected: 3 errors

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 prompt about PDFs is added to any hyperlinks that have a .pdf file extension.

Expected: Warning

Documents

A warning is added to any hyperlinks that have a .doc, .xls, .ppt, or docs.google.com within the HREF.

Expected: Warning

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, blockquote.

Expected: 4 warnings

FOR EXAMPLE, THIS WILL BE FLAGGED.

FOR EXAMPLE, this WILL NOT be flagged.

  • UPPERCASE TEXT WITHIN BULLETS will be flagged too.

LET'S NOT FORGET ABOUT HEADINGS TOO!

UPPERCASE TEXT WITHIN HYPERLINKS

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.

Expected: Warning

This will be flagged for sure.

Expected: Warning

<u>underlined</u> this way will be flagged.

Expected: Warning

  • Underlined text wihin lists will be flagged too.

Expected: Warning

This heading will be flagged.

Expected: Warning

What about a span within a paragraph.

Linked text will not be flagged.

Non-semantic lists

Expected: 2 warnings

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

Expected: Error

Element 1 and Element 2 have the same id attribute.

Subscript and superscript formatting

Expected: 2 warnings

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.