Accessibility Self-Audit Training Sessions

Print icon Print

Session 4 WCAG 2.1.1 through 2.4.2

Overview

Training Topic and Success Criteria

This session covers the following WCAG guidelines:

There are eight different criterion that will be covered in this session. They cover the following topics:

  • Keyboard access for all interactable controls
  • Time limits and automatic content
  • Flashing content
  • Page Titles

Prep Work and Session Recording

Recording

What You Need for this Session

For this part of the audit you will need:

Session 4 Audit: WCAG 2.1.1 through 2.4.2

WCAG 2.1.1 through 2.4.2 cover some of the following:

  • Keyboard access
  • Time limits
  • Content that plays automatically
  • Flashing content
  • Navigation

Below is each criterion, a brief explanation of it, how to test for it, and how to score it in your survey spreadsheet.

Success Criterion 2.1.1 – Keyboard Access

All links, buttons, edit fields, and other controls need to be operable through the keyboard interface.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.1.1

Example

Testing SC 2.1.1

Use the keyboard to make sure everything is in the tab order. Press tab to navigate from item to item. Links, buttons, and other interactable controls should be in the keyboard tab order. If the mouse can click on it, then it should be in the keyboard tab order.

The order should go from left to right and top to bottom starting from the top of the page.

Note

If you are using a screen reader, make sure focus is at the top of the page before starting this test. On windows, press control and home to go to the top of the page. On Mac, press control, option, command and home.

Scoring for SC 2.1.1

  • Score 1 = All controls are in the keyboard tab order.
  • Score .5 = One or more items are missing from the tab order but they are not critical to the current page. Examples include items from the footer or header that are not in the keyboard tab order.
  • Score 0 = One or more elements that are critical to this page are not in the keyboard tab order. Examples include items in the body, main content, navigation links or an item from a series of form fields that need to be filled out.

Success Criterion 2.1.2 – No Keyboard Traps

If elements can receive keyboard focus through a keyboard interface then focus can be moved away from that element using the keyboard interface. Keyboard users should not get stuck in an element or area of the webpage.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.1.2

Example

Testing SC 2.1.2

Repeat the test from 2.1.1 and make sure that the keyboard focus does not get stuck on any element or does not cycle through the same area continuously.

Scoring for SC 2.1.2

  • Score 1 = No keyboard traps.
  • Score 0 = At least one keyboard trap is on the page.

Success Criterion 2.1.4 – Character Key Shortcuts

If there is a keyboard shortcut that uses a single letter, number or punctuation symbol, it can be turned off, remapped or is only active when on certain elements.

When to Test

On pages that have custom keyboard shortcuts that use a single letter or number. This doesn’t exist on most nyc.gov pages.

WCAG Guidelines

Understanding Success Criterion 2.1.4

Example

  • IDNYC PSA’s the embedded YouTube player has single key shortcuts. However, they only work when focus is on the video player.

Testing SC 2.1.4

If there are keyboard shortcuts that use a single character or number, they must adhere to one of the following:

  • They can be turned off
  • They can be remapped
  • The shortcut is active only on focus

Scoring for SC 2.1.4

  • Score 1 = If there are character keyboard shortcuts, all of them adhere to one of the three rules. They can be turned off, remapped to a different key or they are only active when focus is on a specific element.
  • Score 0 = If there are character keyboard shortcuts, they do not adhere to any of the three rules.
  • N/A: Put N/A in the score field if there are no single character keyboard shortcuts on the page.

Success Criterion 2.2.1 – Timing Adjustable

Time limits can be turned off or adjusted to become 10 times the original limit. Does not apply for real-time interactions such as auctions or time limits that are longer than 20 hours.

When to Test

Only on pages that have a time limit. This includes activities such as:

  • Filling out forms
  • Purchasing tickets
  • Staying logged into a website

Note

This criterion includes timeouts after a period of inactivity. Social media feeds are considered real-time events and are not applicable here.

WCAG Guidelines

Understanding Success Criterion 2.2.1

Testing SC 2.2.1

If there are time limits that are less than 20 hours, users should have the option to do one of the following:

  • Disable the time limit
  • Adjust the time limit over a wide range that is at least 10 times the original time limit
  • Extend: the user is given at least 20 seconds to extend the time limit

Scoring for SC 2.2.1

  • Score 1 = If there is a time limit, than it can be disabled, adjusted or extended unless the time limit is longer than 20 hours.
  • Score 0 = If there is a time limit, it cannot be disabled, adjusted, or extended and it is not longer than 20 hours.
  • N/A: Put N/A in the score field if there is no time limit on the page.

Success Criterion 2.2.2 – Pause, Stop, Hide

Any content that automatically plays, lasts longer than 5 seconds or and is presented in parallel with other content can be paused, stopped or hidden. Automatic content includes content that is:

  • Moving
  • Blinking
  • Scrolling or auto updating

When to Test

Pages with automatic content that moves, scrolls or blinks.

WCAG Guidelines

Understanding Success Criterion 2.2.2

Example

Testing SC 2.2.2

If there is automatic content on the page, there should be a way to pause, stop or hide it. Automatic content includes moving carousels, stock tickers, countdowns, and advertisements.

Scoring for SC 2.2.2

  • Score 1 = If there is automatic content, it can be paused, stopped or hidden.
  • Score 0 = If there is automatic content, it cannot be paused, stopped or hidden.
  • N/A: Put N/A in the score field if there is no automatic content on the page.

Success Criterion 2.3.1 – Flashes Below Threshold

Webpage does not contain anything that flashes faster than 3 times a second.

When to Test

On all pages with flashing content.

WCAG Guidelines

Understanding Success criterion 2.3.1

Testing SC 2.3.1

Option 1: Search for flashing content and make sure it is less than three flashes per second.

Option 2: Use the Photosensitive Epilepsy Analysis Tool (PEAT), a tool used to measure flashing content. Checkout the PEAT user guide for more info.

Scoring for SC 2.3.1

  • Score 1 = Flashes are less than three times per second.
  • Score 0 = Flashes are 3 or more flashes per second.
  • N/a: Put N/A in the score field if there is no flashing content.

Success Criterion 2.4.1 – Bypass Blocks

A mechanism is provided to bypass blocks of repeated content such as the navigation section. Example mechanisms include skip to links, headings, and landmark regions.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.4.1

Testing SC 2.4.1

Make sure there is at least one of the following mechanisms to skip repeated content.

  • Headings
  • Skip to links
  • Regions

This can be done with a Screen Reader in the ways below.

Headings

Navigate by heading or pull up a list of headings.

  • JAWS
    • Press the H key to navigate by heading
    • List of headings: press the JAWS key and f6
    • Note: The JAWS key is insert on desktop keyboards and caps lock on laptop keyboards.
  • NVDA
    • Press the H key to navigate by heading
    • List of headings: press the NVDA key and f7. Then choose headings.
    • Note: the NVDA key is insert on desktops and caps lock on laptop keyboards.
  • Voiceover
    • Press Control, option, command and H to navigate by heading
    • List of headings: press Control, option and the U key. Then press right or left to navigate to headings.
Skip to Links

If there is a skip to link at the top of the page, press tab to get to it. Press enter to activate it. The page should scroll to the main content and screen reader focus should also move there.

Regions

To test for regions, use the following keyboard commands:

  • JAWS
    • Press the R key to navigate to regions
    • Regions list: press the JAWS key, Control and R
    • Note: JAWS key is insert on desktop keyboards and caps lock on laptop keyboards.
  • NVDA
    • Press the D key to navigate to regions
    • Regions list: press the NVDA key and f7. Then choose landmark regions.
    • Note: The NVDA key is insert on desktop keyboards and caps lock on laptop keyboards.
  • Voiceover
    • custom command
    • List of regions: Control, option and U. Then use left or right to find landmark regions
    • Note: Landmark regions must be added to the web roter in Voiceover utility.

Scoring for SC 2.4.1

  • Score 1 = At least one mechanism is provided to bypass blocks.
  • Score 0 = No mechanisms provided to bypass blocks.

Success Criterion 2.4.2 – Page Titled

Webpage has a title that describes topic or purpose.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.4.2

Testing SC 2.4.2

Make sure that page titles are descriptive for every page.
Option 1: Hover the mouse over the tab for that page and the title should appear.
Option 2: Use a screen reader command. It should read the title of the page aloud.

  • JAWS: Press JAWS key + T to read the page title.
    • Note: The JAWS key is insert on desktop keyboards and caps lock on laptop keyboards.
  • NVDA: Press NVDA key + T to read the page title.
    • Note: The NVDA key is insert on desktop keyboards and caps lock on laptop keyboards.
  • Voiceover: Press Control + Option + F2 to read the page title.
Title Format
  • Page – website
    • About – MOPD
    • Contact – MOPD

Note

Home pages are exempt from having the page in the title. A homepage can pass with just the website name as the title.

Scoring for SC 2.4.2

  • Score 1 = Page title has both the page and the website; and the title is appropriate to the content of the page.
  • Score .5 = Title only has either the website or the page.
  • Score 0 = There is no title, for example, the URL shows up instead of a page title. Or the title is not appropriate to the content of the page.

Homework

Continue testing and fill in WCAG 1.1.1 through 2.4.2 by the next session. For assistance, email Walei at wsabry@doitt.nyc.gov.