All Rulesets

This page explains and demonstrates all conditions and rulesets. Navigate between different pages to view all three states (Errors, Warnings and No Errors).

Headings

Sa11y's heading structure ruleset has the following conditions:

  • The first heading on a page must be a <h1>.
  • There must only be one <h1> on a page.
  • Headings must not skip levels.
  • Headings must not be empty.
  • Headings must not exceed 160 characters.
  • Blockquotes must not be used as headings.

The first heading on a page must be a Heading 1

Sa11y's heading structure ruleset is based on the condition that the first heading on a page must be a Heading 1. However, it is technically not a WCAG failure if it is not. Please refer to Technique H42: Using h1-h6 to identify headings. Please visit the demo to view this condition in action.

There must only be one Heading 1 on a page

Example #1 - This is a Heading 1

Headings must not skip levels

Headings should be structured in a way that conveys hierarchy. This condition is based on WCAG 2.1 Technique H42: Using h1-h6 to identify headings.

Example #1 - This heading skips a level.

This error is also visually reflected in the "Show Outline" feature.

Headings must not be empty

This error sometimes happens in content management systems or WYSIWYG editors. For example when a content author accidently presses the Enter key twice or sometimes intentionally for more spacing.

Headings that are too long

If a heading is greater than 160 characters it will be flagged as an error. This condition was created to prevent content authors from using headings for visual aesthetics instead of good hierarchy.

Note: This condition is not a WCAG 2.1 criterion. The 160 character limit is arbitrary and empirically derived.

Example #1: Integer ut quam ut nibh tristique bibendum eget sit amet ex. Sed elementum mauris neque, vitae consectetur tellus pellentesque vel. Pellentesque consequat orci.

Blockquotes used as headings

This error might be common in content management systems where there are templated components. Sometimes content authors may use a component for visual aesthetics. For example, a stylized blockquote in place of a semantic header.

Note: This condition is not a WCAG 2.1 criterion. The 25 character limit is arbitrary and empirically derived.

Example #1

If a blockquote is less than 25 characters it will be flagged as an error.

Lorem ipsum dolor sit am

Example #2

A blockquote greater than 25 characters will not be flagged as an error.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Images

Images without hyperlinks

Large mountains of sand in the Nambian desert.

Condition 1: Image containing alt text.

Condition 2: Image missing alt text.

An image of a bird.

Condition 3: Image whose alt text contains a stop word.

Condition 4: Image that is marked as decorative.

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.

Condition 5: Alt text that is too long.

Images with hyperlinks

Large mountains of sand in the Nambian desert.

Condition 6: Hyperlinked image containing alt text.

Condition 7: Hyperlinked image missing alt text.

An image of a bird.

Condition 8: Hyperlinked image whose alt text contains a stop word.

Condition 9: Hyperlinked image that is marked as decorative.

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.

Condition 10: Hyperlinked image text that is too long.

Learn more about Tigers

Condition 11: Hyperlinked image with null alt text, although contains surrounding link text below image.

Learn more about Tigers

Condition 12: Hyperlinked image with null alt text, although contains surrounding link text above image.

Learn more about Dahlias

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

Fix it again Tony!Learn more about Fiat.

Condition 14: Hyperlinked image that contains both alt text and link text.

Learn more about the Canary Islands

Condition 15: Hyperlinked image containing an incorrect heading level. The error is appended after the hyperlink to prevent nesting a button inside hyperlink.


Links

Stop words

If hyperlinks contain any of the following words or characters within a hyperlink, it will be flagged as an error. Stop words: click here < > http:// https:// .aspx .html .php

Example 1

Hyperlink contains descriptive text, although it will still be flagged as an issue since 'click here' is a stop word:
Click here to view Ryerson's programs

Example 2

It's very common for content authors to use HTML symbols for visual aesthetics, especially on a button link.

About Ryerson >

Example 3

It's also very annoying to hear a really long URL being read out character-by-character using a screen reader. https://www.ryerson.ca/programs/undergraduate/accounting-finance/

Partial stop words

If the following words are used as the hyperlink text alone, it will be flagged as an error. If used with other text, it will not be flagged as an error. Partial stop words: learn more register register now learn more this page check out learn to view view our read more . , : page this page download form link here this

Example 1

Using any of the words above on it's own will result in an error since it's not descriptive enough.

Learn more

Example 2

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

Learn more about Ryerson

Example 3

Just another example of a partial stop word being used in a sentence. Visit this page to learn more about our history, or you can visit this page to learn about the future.

Hyperlinks with ARIA

Hyperlinks featuring an aria-label or aria-labelledby attribute will be indicated as a pass and show the accessible label conveyed to assistive technology.

Example 1

The following link uses an ARIA label.

Learn more

Example 2

The following link uses an ARIA labelledby attribute.

Learn more
about Adam.

Example 3

Links containing both aria-hidden="true" and tabindex="-1" will be ignored. This condition assumes developer wants to hide a duplicate visual call-to-action.


Tables

There are 3 simple accessibility tests for a table.

  1. Table must contain at least one table heading or th
  2. Table must not contain an empty table heading or empty th
  3. Table must not contain any semantic headings (H1, H2, H3...)

Example 1 - Pass

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

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

Example 3 - Table containing empty table header

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

Example 4 - Table containing semantic headings

Event

Time

Location

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

Contrast

jQuery contrast plugin was created by jasonday. To prevent false positives, a simple condition was added to exclude any elements whose width and height is less than 1px and contains overflow:hidden;. Some contrast plugins falsely indicate visually hidden text for screenreaders as a contrast fail.

Tooltips will indicate whether it's large or normal size text, including the snippet of text that fails.

Example 1 - Normal text

This colour fails at normal size.

Example 2 - Large text

This colour also fails at a large size.

Example 3 - Form input

Input's text color is too low.

Example 4 - Warning

Warnings for text that uses CSS backgrounds.

Text on background image requires manual review


Inputs

Accessibility tests for form inputs.

Example 1

Input without a label or missing id.

Example 2

Input with ID, although previous label does not have a for attribute.

Example 3

Inputs using aria-label pass. However if you are a developer, it's not recommended to use this method since there is no visual label.

Example 4

Pass. Input has id and label has corresponding for attribute.


Other

Other accessibility checks that are easy to test for.

Page language

Checks for presence of lang attribute on <html> tag. If attribute is missing, an error banner will be appended at the top of the page. View this error in action on the Errors page.

Duplicate IDs

Checks for presence of duplicate id attributes (unique identifier).

Example

Two inputs with the same id.


Content

Warning for 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. For example:

Warning for links that open in a new tab/window

Links containing target="_blank" are marked as a warning unless the link text contains the text new tab or new window. This condition was added to discourage excessive use of this attribute for usability and accessibility reasons.

People who use screen readers are not warned when a page opens in a new window. This may cause confusion if they try to go back a page. Secondly, it's not good practice to control a user's experience or make decisions for them.

Relevant articles

Example

All 5 links below contain target="_blank".

Warning for uppercase text

This warning is to discourage the use of uppercase text. This is not a WCAG 2.1 requirement, however based on research it is a strongly 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.

Example #1

FOR EXAMPLE, THIS WILL BE FLAGGED.

Example #2

FOR EXAMPLE, THIS WILL not be flagged.

Example #3

  • UPPERCASE TEXT WITHIN BULLETS will be flagged too.
  • UPPERCASE text WITHIN BULLETS will be FLAGGED TOO.

Warning for Video and Audio content

This condition is meant to act as a friendly reminder. Videos will recieve a warning to ensure captions are available. Audio will recieve a warning to ensure the podcast/audio has a transcript. This condition does not test whether captions or transcripts are present. Customize this condition by adding your own media streaming sources.

Example #1 - Video

This condition tests for the presence of an HTML <video> tag, YouTube and Vimeo.

Example #2 - Audio

This condition tests for the presense of an HTML <audio> tag and SoundCloud.

Warning for Twitter widgets

This condition is meant to encourage users to optimize the default Twitter widget for accessibility and usability. This condition might be helpful in large organizations (like a University or College) where there are many social media channels. This condition is not based on WCAG 2.0, however is strongly recommended.

Example #1

Default Twitter widget embed code.

Example #2

Optimized Twitter widget.

Detect bad links

Customize this condition to create an error for any links that point to a development environment. This does not detect dead (404) links. Using W3Schools CSS Selector Reference, customize this condition to add your own.

For example, a hyperlink that points to wp-admin incorrectly: About Ryerson