Sa11y Unit Tests

All annotations at a glance.

Headings

Empty heading

Skipped heading

This is a heading five

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

A beautiful square.

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

Large mountains of sand in the Namibian desert.

Alt text has suspicious stop word in the beginning

An image of a bird.

Alt text has suspicious stop word towards the end

A black and white image of a bird.

Decorative image

Decorative image using using empty space

Alt text is too long

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.

Missing alt text

Alt has file extension

birdy.jpg

Alt has placeholder text

image

Linked decorative image with surrounding link text

Learn more about Tigers

Linked image with alt text

Linked image has alt text that contains a stop word

An image of a bird.

Linked image has long alt

Linked image contains both alt and link text

Linked image missing alt text

Linked decorative image

Linked decorative image using empty space

Linked image with missing alt and contains link text

Linked image has alt text containing placeholder stop words

image

Linked image has alt text containing file extension

doggy.jpg

Figure image with different alt and caption text

Alt text for figure.
Figure's caption text.

Figure image with alt but without figcaption

Two australian shepherds.

Decorative figure image

Decorative figure image and figcaption

Fig. 1: Nambian desert (Source: unknown)

Figure element has duplicate alt and caption text

Two australian shepherds
Two australian shepherds

Linked figure with alt but without figcaption

Lorem ipsum.

Linked image opens in new tab

Beautiful square.

Linked image opens in new tab, alt text provides warning

Two australian shepherds. Opens in new tab.

Ignore noscript tags

Beautiful square.

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


Links

Non descript link text

Descriptive link text

Non descript links using exclusions prop

learn more (This is ignored)

Non descript link uses string ignore prop

learn more (External)

Empty links

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

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

some link and some link
has aria label and learn more

Links to DOI

Links to file without warning

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

aria-labelledby referencing invalid ID

References non-existent ID on page

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

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

Admissions Handbook (PDF)

PDF link with trailing characters

Course Outline (PDF)

Documents

Monthly expenditure (Google Sheet)
Brochure template (Word)

Uppercase text

FOR EXAMPLE, THIS WILL BE FLAGGED.

LET'S NOT FORGET ABOUT HEADINGS TOO!

UPPERCASE TEXT WITHIN HYPERLINKS

FOR EXAMPLE, this WILL NOT be flagged.

Underlined text

This will be flagged.

This will be <u>flagged.</u>

Headings

Spans within a paragraph.

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

In-page links

Link with empty href or <a href>

test

Link used as button without roles

User

Link used as button with proper role

Settings

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

Skip to Lorem Ipsum

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

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.


Contrast

This colour fails at normal size.

This colour also fails at a large size.

Text on background image requires manual review!

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