Session 5 WCAG 2.4.3 through 2.5.4

Overview

• Training topic and success criteria
• Prep work and Session Recording
• WCAG 2.4.3 through 2.5.4
• Homework

Training Topic and Success Criteria

The WCAG criteria that are covered in this session include:

• 2.4 Navigable
• 2.5 Pointer Accessible

There are nine different criterion that are in this session. They deal with the following:

• Keyboard focus order and visual focus
• Link labels, heading labels, form field labels and accessibility labels
• Pointer gestures (mobile)
• Pointer cancelations (mouse an  mobile)
• Motion actuation (mobile)

Prep Work and Session Recording

Recording

What You Need for this Session

For this part of the audit you will need:

• Download the new Survey Spreadsheet
• Download WAVE extension
• Get familiar with Chrome inspector tools
• Download our Screen Reader Testing Guide

Session 5 Audit: WCAG 2.4.3 through 2.5.4

WCAG 2.4.3 through 2.5.4 cover things such as keyboard focus order, visual focus, accessibility labels as well as mouse and pointer gestures.

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.4.3 – Focus Order

Keyboard focus order is logical for content, links, forms and objects. Dom order follows visual order.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.4.3

Example

• Sean’s example page has examples of items that are out of order. Check under the heading “Tab order.”

Testing SC 2.4.3

Use the keyboard to make sure all interactive elements receive keyboard focus in a logical order. Press the tab key to go through all interactive elements such as links, buttons, edit fields etc.
Logical order means from left to right and then top to bottom starting from the top of the page. Note: this applies to one area at a time. For example, focus order would go through header items, followed by navigation items and then main content items.

Scoring for SC 2.4.3

• Score 1 = Focus order is logical and goes from left to right, then top to bottom within each section of the page.
• Score .5 = At least one item is out of order or missing. However, it is not a significant item to this page. Examples include an item on the header or footer. Navigation links are considered significant.
• Score 0 = At least one item is out of order or missing and that item is significant to the page. Examples include items on the main content area of the page, navigation links or form field elements within a set of form fields.

Success Criterion 2.4.4 – Link Purpose and Context

The purpose of a link can be determined from the link text alone or from link text together with it's context.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.4.4

Example

• MOPD Homepage has links with bad labels in the programs and initiatives section

Testing SC 2.4.4

Screen reader instructions
Use the links list feature to inspect all the labels for links. They should be unique and descriptive.

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

Unique and Descriptive

Unique and descriptive means that the user should be able to understand where the link will take them just by reading the label. Some examples are below:

• Examples that fail
  • Click here
  • Read more
  • Learn more
• Examples that pass
  • Read more about Project Open House
  • Watch the IDNYC Public Service Announcement
  • Download Accessible NYC

Scoring for SC 2.4.4

Calculate score by doing the following:

• Count the total number of links, record in spreadsheet.
• Count the total number of links that have unique and descriptive labels, record in spreadsheet.
• Divide number of unique and descriptive labels by total number of links for a score between 0 and 1. (This will be done automatically.)

Success Criterion 2.4.5 – Multiple Ways to Locate

More than one way is available to locate a webpage within a set of webpages. Examples include a navigation section, site search and site map.

Note

Step-based processes are exempt. This means applications that have multiple pages to complete a form, wizards, and other web applications.

When to Test

On websites that do not have a step based process. This will be most websites.

Any set of web pages that are a series of steps in a larger task are exempt from this criterion. Examples include job applications, screeners and appointment schedulers.

WCAG Guidelines

Understanding Success Criterion 2.4.5

Examples

• MOPD website has navigation links and site search. This is a good example.
• NYC Vaccine finder example of step based process. This is exempt from this criterion. Put N/A in the score field

Testing SC 2.4.5

There should be at least two ways to find a webpage on this website.

• Navigation links that repeat on all pages
• Site search
• Site map
• List of related links
• Table of contents

Scoring for SC 2.4.5

• Score 1 = There are at least two ways to find a webpage on the website.
• Score .5 = Only one way to find a webpage within the website.
• Score 0 = There are no ways to consistently find a webpage within the website.
• N/A: Put N/A in the score field if website is a wizard or a step based process.

Success Criterion 2.4.6 – Headings and Labels

Labels for headings and forms are informative.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.4.6

Examples

• MOPD Contact the Commissioner page
• MOPD Accessible Virtual Activities

Testing SC 2.4.6

Screen readers:
Use the screen reader feature for displaying a list of headings and list of form fields

Headings

• JAWS
  • 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
  • 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
  • List of headings: press Control, option and the U key. Then press right or left to navigate to headings.

Form Fields

• JAWS
  • List of form fields: press the JAWS key and f5
  • Note: The JAWS key is insert on desktop keyboards and caps lock on laptop keyboards.
• NVDA
  • List of form fields: press the NVDA key and f7. Then choose form fields.
  • Note: the NVDA key is insert on desktops and caps lock on laptop keyboards.
• Voiceover
  • List of form fields: press Control, option and the U key. Then press right or left to navigate to form fields.

WAVE Accessibility Checker

The WAVE tool can display heading structure. Visit www.wave.webaim.org and plug-in the URL of the page. Choose the “Structure” tab to see all headings. Under the “Details” tab, check for errors that mention missing form labels.

Note

Automated checkers can often report false errors. It is good to double check with a screen reader.

Appropriate Labels

• Headings should not be longer than one sentence.
• Form labels should describe the function of the button, combo box, checkbox etc.
  • “Submit” as a label for a button
  • “Next” or “Previous” as button labels
  • “State” as the label for a combo box to choose which state the address is in

Scoring for SC 2.4.6

Calculate a score by doing the following:

• Count the total number of headings and form fields, record in spreadsheet.
• Count the number with appropriate labels, record in spreadsheet.
• Divide the number of appropriate labels by the total number of headings and labels for a number between 0 and 1. (The spreadsheet will automatically calculate the score.)

Success Criterion 2.4.7 – Focus Visible

Any keyboard operable user interface has a mode of operation where the keyboard focus is visible. When a link or interactable element receives keyboard focus, it should be visually apparent.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.4.7

Example

• MOPD Contact the Commissioner page

Testing SC 2.4.7

Tab through the content of the page and make sure every interactable control has a noticeable focus.

Noticeable focus means that the visual focus has one of the following:

• Contrast ratios of 3:1 against the element that it is currently focused on.
• Underlines the item that is currently in focus.
• Adds a border around the item that is currently focused.

Scoring for SC 2.4.7

• Score 1 = All interactable elements have a clear and noticeable visual focus.
• Score .5 = Some items in the header or footer have bad visual focus. This doesn’t include navigation links.
• Score 0 = Some items in the main content or navigation links have bad visual focus.

Success Criterion 2.5.1 – Pointer Gestures

Where there are pointer gestures, they do not only have multipoint inputs such as pinch or drag. Users must be able to perform the same actions using a single point gesture such as a single tap, long press or double tap.

When to Test

On pages with multi-point gestures or path-based gestures.

Multi-Point Gestures

Any gestures that require multiple touch points. Examples include a two finger tap or pinch the screen to zoom.

Path-Based Gestures

A gesture that covers three points. Starting point, middle point and end point. Examples of path-based gestures include swiping, sliders and carousels dependent on the direction of interaction, and other gestures which trace a prescribed path such as drawing a specific shape. Such paths may be drawn with a finger or stylus on a touchscreen, graphics tablet, or trackpad, or with a mouse, joystick, or similar pointer device.

WCAG Guidelines

Understanding Success Criterion 2.5.1

Examples

• Find a testing site has alternatives for zooming in
• Map Quest has alternatives for zooming and panning

Testing SC 2.5.1

Find out if the page has multi-point or path-based gestures. Make sure they have alternatives such as a zoom-in button and ability to pan independently of the gestures. Examples include using arrow keys to pan on a map.

Scoring for SC 2.5.1

• Score 1 = All multi-point and pass-based gestures have alternatives.
• Score .5 = Only some gestures have alternatives.
• Score 0 = Most or none of the gestures have alternatives.
• N/A: Put N/A in the score field if there are no multi-point or path-based gestures.

Success Criterion 2.5.2 – Pointer Cancelations

For clicks and gestures, the action is not completed until the mouse click is complete and the finger gesture has lifted off the screen. The down action should not complete the event but rather the up event. The up event being releasing the click or lifting finger away from screen.

Note

This is generally done well on nyc.gov. Most TeamSite websites have this functionality built in.

When to Test

On all pages.

WCAG Guidelines

Understanding Success criterion 2.5.2

Example

• MOPD Resources

Testing SC 2.5.2

Using a mouse, click on links and buttons that are on the page. Click and hold down the left click button, move the mouse away and then let go of the button. The expected behavior is that the button or link will not activate.

Scoring for SC 2.5.2

• Score 1 = All interactable elements are activated on the mouse up event.
• Score 0 = At least one item does not activate on the up event.

Success criterion 2.5.3 – Label in Name

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

This includes:

• Regular text links pass this criterion.
• Links with images of text need alt-text that matches the visual label.
• Buttons need an accessibility label or name that matches the visual label.
• If an element does not have a name and accessibility label, it fails this criterion.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 2.5.3

Example

• MOPD website has combo box missing a label

Testing SC 2.5.3

Screen Reader Instructions

Use a screen reader to pull up a list of form fields and make sure the labels match the visual label.

• JAWS
  • List of form fields: press the JAWS key and f5
  • Note: The JAWS key is insert on desktop keyboards and caps lock on laptop keyboards.
• NVDA
  • List of form fields: press the NVDA key and f7. Then choose form fields.
  • Note: the NVDA key is insert on desktops and caps lock on laptop keyboards.
• Voiceover
  • List of form fields: press Control, option and the U key. Then press right or left to navigate to form fields.

Wave

Use Wave and look for missing labels for links or form fields. Also look for ARIA labels in the ARIA section.

Chrome Inspector Instructions

Open the Chrome Inspector pane by right-clicking anywhere on the page and choosing ‘Inspect’ at the bottom of the menu. In the upper-left corner of the Inspector pane, select the ‘Inspect Elements’ icon (it looks like a square with a mouse pointer hovering over it). Hover the mouse over all interactable controls. A tooltip pops up with accessibility information including Accessibility name.

Scoring for SC 2.5.3

• Score 1 = All interactable controls have a name or accessibility label.
• Score .5 = Some interactable controls are missing labels or have labels that do not match the visual label.
• Score 0 = Most or all interactable controls are missing labels or do not match the visual label.

Success Criterion 2.5.4 – Motion Actuation

Actions that can be done through device motion or user motion have an alternative and can be turned off.

When to Test

On pages with device motion gestures such as shake your device. Nyc.gov websites do not have this functionality.

WCAG Guidelines

Understanding Success Criterion 2.5.4

Testing SC 2.5.4

If there are motion-based gestures, do they have an alternative? Can they be reassigned? Can they be turned off? If the answer is no to all of these, then this criterion fails.

Scoring SC 2.5.4

• Score 1 = Actions that can be performed through device motion can be changed, have an alternative, or can be turned off.
• Score 0 = Actions that are performed through device motion cannot be changed, do not have alternatives, and cannot be turned off.
• N/A = Put N/A in the score field if there are no actions that can be performed through device motion.

Homework

Continue filling out the spreadsheet with WCAG 1.1.1 through 2.5.4 by the next session. For assistance, email Walei at wsabry@doitt.nyc.gov.