## Everything

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

On this page: Headings Images Links Tables Other issues

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

## Visually hidden heading

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

####

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

Image has alt text.

#### Warnings

Alt text has suspicious stop word.

Image is decorative.

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

Alt text is too long.

#### Errors

Missing alt text.

Alt text has file extension.

Alt text has placeholder text.

### Hyperlinked images

#### Pass

Learn more about Tigers

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

Learn more about Tigers

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

#### Warnings

Hyperlinked image with alt text.

Hyperlinked image has alt text that contains a stop word.

Hyperlinked image alt that is too long.

Learn more about Fiat.

Hyperlinked image that contains both alt text and link text.

#### Errors

Hyperlinked image missing alt text.

Hyperlinked image that is decorative.

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

Learn more about Dahlias

Hyperlinked image with missing alt and contains surrounding link text.

Hyperlinked image has alt text containing placeholder text.

Hyperlinked image's alt text contains file extension.

### <figure> images

Figure's caption text.

Figure image with different alt and caption text.

Figure image without figcaption.

Decorative image within a <figure> element.

Fig. 1: Nambian desert (Source: unknown)

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

Two zebras

Figure element has duplicate alt and caption text.

Hyperlinked figure element without figcaption.

Learn more about space ships!

Hyperlinked figure element with figcaption.

### Other

###### Learn more about the Canary Islands

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

### Ignore me

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

Hyperlinked image opens in new tab.

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

Bug testing. Ignore <noscript> tags.

Text ignored.

Image link should ignore text within link.

#### Images with ARIA hidden

Image has `aria-hidden="true"`

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

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

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

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

apples

- 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

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

Learn more

Expected:

Learn more

#### Miscellaneous testing

Other weird test cases.

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

Learn more

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

- Download the Admissions Handbook (PDF)
- Course Outline (PDF)
- Cheatsheet (PDF)

### Documents

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

Expected: Warning

- testing 123 123 (Word)
- Google Sheet

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