Accessibility Self-Audit Training Sessions

Print icon Print

Session 2 WCAG 1.3.1 through 1.4.3

Overview

Training Topic and Success Criteria

The WCAG criteria that is covered in this session includes:

Session 2 contains 8 criteria. 1.3.1 through 1.4.3. Topics include:

  • Formatting such as headings, links, lists, tables and form fields
  • Use of color including color contrast for text, color contrast for form fields and alternatives for use of color in instructions
  • Mobile access such as screen orientation and auto-fill

If you are able to perform testing on a mobile device, that is great. If not, tips on how to test for mobile accessibility on your desktop browser are included.

Prep Work and Session Recording

Recording

What You Need for this Session

For this part of the audit you will need:

Session 2 Audit: WCAG 1.3.1 through 1.4.3

WCAG 1.3 and 1.4 include visual design, formatting, writing instructions, responsiveness and mobile accessibility. 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 1.3.1 – Info and Relationships

Information and relationships that are conveyed by visual or auditory formatting are preserved when viewed by assistive technologies. Examples include:

  • Headings with proper <h1>, <h2>, <h3> tags
  • Links have proper link tags. Links take the user to a new page or download a file
  • Buttons and other form fields have proper roles. Buttons perform actions such as submit, reset, clear all, confirm, expand/collapse and sometimes next/previous buttons
  • ARIA landmark regions with proper labels
  • Tables have proper table row and header tags
    • Tables are only used for tabular data
    • Tables used for layout purposes fail this criteria
  • List with proper list tags
  • For forms: Required fields should have a text alternative.
  • Checkboxes, radio buttons, selectable controls, Accordions, toggle buttons and selectable tabs announce proper state.
    • Checkboxes: checked or unchecked
    • Accordions: expanded or collapsed
    • Radio buttons or selectable controls: selected or unselected
    • Toggle buttons: pressed or not pressed

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.3.1

Examples

Testing SC 1.3.1

Screen Reader Testing

Use a Screen reader to read different elements such as headings, links, form fields, tables etc. Use single key navigation or your screen reader can generate a list of elements for you. Below are two tables. One that has common screen reader keyboard shortcuts for navigating a website. The second one is screen reader keyboard shortcuts that view lists of links, headings, form fields etc.

Screen Reader Shortcuts for Navigating the Web

Command:

JAWS:

NVDA:

Voiceover(Mac):

Comments:

Shortcut to turn on screen reader

Control, Alt and J

Control, Alt and N

Command and F5 or press finger print button 3 times on touch bar

For Jaws and NVDA the shortcuts need to be set in properties

Navigate up and down

Up or Down Arrows

Up or Down Arrows

Up and down arrows or Control, Option and Left or Right Arrows

 

Go to next link

No official command

K

Control, Option, Command and L or L with Quick Nav

Add Shift to move to previous LINK

Go to next heading

H

H

Control, Option, Command and H or H with Quick Nav

Add Shift to go to previous heading

Go to next table

T

T

Control, Option, Command and T or T with Quick Nav

Add Shift to go to previous table

Move in all directions within a table

Control, Alt and any of the arrow keys

Control, Alt and any of the arrow keys

Control, option and any of the arrow keys

 

Go to next form field

F

F

CUSTOM COMMAND

Add Shift to go to previous form field. For Voiceover F goes to next Text field, B goes to next button and C goes to next checkbox with Quick Nav on

Go TO NEXT TEXT FIELD

E

E

CONTROL OPTION, COMMAND AND F OR F WITH QUICK NAV

Add SHIFT TO GO TO PREVIOUS TEXT FIELD

Go TO NEXT CHECKBOX

X

X

CUSTOM COMMAND

Add SHIFT TO GO TO PREVIOUS CHECKBOX

Go TO NEXT BUTTON

B

B

B WITH QUICK NAV

Add SHIFT TO GO TO PREVIOUS BUTTON

Go TO NEXT LIST

L

L

Control, option, command and X or X with quick nav

Add shift to go to previous list

Go to next region

R

D

Custom command

Add Shift to go to previous region
Screen Reader List of Elements

List Type:

JAWS Command:

NVDA Command:

Voiceover Command:

Comments

Links

Insert and F7

Insert and F7

Command, Option and U. Then use left and right arrows to find links

All links in this list should have a unique and understandable label

Headings

Insert F6

Insert and F7. Press shift and tab then use arrow keys to navigate to headings

Command, Option and U. Then use left and right arrows to find headings

Headings should follow a hierarchical tree structure.

Forms

Insert and F5

Insert and F7. Press shift and tab then use arrow keys to navigate to forms

Command, Option and U. Then use left and right arrows to navigate to forms

All form fields should have a descriptive label

Regions/Landmarks

Insert, Control and R

Insert and F7. Press Shift and Tab then use arrow keys to find Landmarks

Command, Option and U. Press left and right arrows to find Landmarks

All regions should go along with their labels. For example, the Navigation region should have navigation links only

 

Wave Accessibility Checker

www.wave.webaim.org
Plug in the page URL into WAVE to get a report. Wave allows users to look at the heading structure of a page. It also has some relevant errors regarding links and form fields.

Scoring for SC 1.3.1

  • Score 1 = All elements have proper formatting. Headings are headings, tables are used properly and have table headers, lists have tags, etc.
  • Score .75 = A few elements are missing correct formatting, tables missing header rows. No significant elements or required fields are inaccessible.
  • Score .5 = More than a few of the elements on the page have proper formatting. Significant elements or required fields are not accessible.
  • Score .25 = Only a few elements on the page are properly formatted.
  • Score 0 = No proper formatting. No headings, lists and form fields. Also, if a table is used for layout purposes.

Success Criterion 1.3.2 – Meaningful Sequence

Content on the page follows a logical and understandable sequence when read by screen readers or viewed in alternative ways.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.3.2

Testing SC 1.3.2

Read the page content using a screen reader. Make sure it is reading the content from left to right then top to bottom.
Step 1: Start at the top of the screen
Step 2: read all the items to make sure focus is moving from left to right and then top to bottom.
Note: There are instances where focus order can deviate from that. For example, if there is a left navigation panel that is vertically oriented, screen readers are expected to go through all of the links vertically before moving on to the right.

Screen Reader Commands

Command

JAWS

NVDA

MAC

iOS

Comments

Go to Top

Control + Home

Control + Home

Control, Option, Shift + Home

Touch an item at the top of the screen

 

Navigate to next or previous line/item

Up or down arrow keys

Up or down arrow keys

Control, Option + left or right arrow keys

Swipe right or left

 

Read all from the top

 

 

 

Two finger swipe up

 
Mobile Testing

Test on mobile as well. Use Voiceover on an iOS device and read the content by swiping right to move from item to item. Alternatively, when using desktop browsers, you can also resize the window and test that way. Desktop users can zoom-in 200% using the browser settings.

Scoring for SC 1.3.2

  • Score 1 = Everything is read in logical order.
  • Score .5: At least one part of the page is read out of order but it is not part of the main content of the page.
  • Score 0 = At least one part of the page is read out of order and causes enough confusion that the user will not know how to navigate this page.

Success Criterion 1.3.3 – Sensory Characteristics

Instructions for understanding or operating the content do not solely rely on color, shape, size, visual location or sound.

When to Test

On pages that have instructions. That includes instructions regarding filling out forms as well as how to find information about a specific program.

  • Good example: use the links below to find information in your language.
  • Bad example: required fields are marked in red

WCAG Guidelines

Understanding Success Criterion 1.3.3

Examples

Testing SC 1.3.3

Read any instructions on the page for understanding or operating the content. If there are references to color, shape, size, orientation or location, there should be a text alternative. If required fields are marked in red, they can also be marked with **.

Scoring for SC 1.3.3

  • Score 1 = Instructions provide one of the two visual elements and a text alternative.
  • Score 0 = Instructions have color, shape, size or location but no text alternative.
  • N/A: Put N/A in the score field if there are no instructions on the page.

Success Criterion 1.3.4 – Orientation

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

Note

Examples that are exempt from this criterion include, bank checks, a piano application, slides for a projector or television, or virtual reality experiences.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.3.4

Testing SC 1.3.4

View the page on mobile in both portrait and landscape. Make sure you are not locked into one orientation.

Testing Orientation on Desktop

In Chrome:

  • Either
    • Right click on the page or element, and select ‘inspect’
    • On Mac: Command + Shift + C
    • On PC: Ctrl + Shift + C
  • This opens the Inspector panel, which will initially be docked inside your chrome window. To pop it out into its own window, do the following. In the menu bar at the top of the inspector pane, select ‘customize & control devtools’ ( it’s the last icon at the end that looks like a vertical ellipsis ). Then from the options labeled ‘dock side’, select ‘undock into a separate window’
  • To view the webpage on different devices and orientations, do the following. In the menu bar at the top of the inspector window, click ‘toggle device toolbar’ ( it’s the icon of a phone & tablet ). This adds a new bar with options at the top of your page. Use the dropdown menu to select from different devices, and then toggle orientation using the ‘rotate’ button in that same menu.

Scoring for SC 1.3.4

  • Score 1 = Page can be viewed in both portrait and landscape or contains one of the exemptions.
  • Score 0 = Restricted to one orientation but does not contain one of the listed exemptions.

Success Criterion 1.3.5 – Identify Input Purpose

The purpose of each input field collecting information about the user can be programmatically determined. If this is done correctly, auto-fill will be accessible to assistive technology users.

When to Test

On pages that require input that asks for the users personal data. This includes, name, phone, address, email, etc.

WCAG Guidelines

Understanding Success Criterion 1.3.5

Testing SC 1.3.5

Option 1: If your browser is setup with auto complete go through each field and see if it works. Also, can test on mobile.

Use Chrome Inspector (Recommended Option)
  • Right click on the element and choose inspect.
  • Form fields that collect user data such as name, address, phone or email should have one of the attributes listed on the HTML autocomplete attribute page.

Note

This criterion is mostly going to fail on nyc.gov.

Scoring for SC 1.3.5

  • Score 1 = Everything has auto complete functionality.
  • Score 0 = One or more fields are missing auto-complete functionality.
  • N/A: Put N/A in the score field if there are no fields that ask for users’ personal data.

Success Criterion 1.4.1 – Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. This is different from 1.3.3 because it does not require a text alternative. This focuses more on visual presentation. Instead of differentiating a link using color, it should also be bolded and/or underlined.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.4.1

Example

In the following example, the links fail to meet this criterion. They are not underlined or bolded.
NYCHA website

Testing SC 1.4.1

Look at all links and other elements of the page. Do they use visual identifiers that are not color based? If they use color only, this criteria fails. One example that passes is, links that have a different color but are also bolded and/or underlined.

Note

If a link is in bold font, the text around it should not be bold as well. Unless the link is also underlined.

Scoring for SC 1.4.1

  • Score 1 = If color is used to distinguish elements on the page, there is other formatting such as underline or bold along with it.
  • Score .5 = At least one element uses color only to distinguish it from other content. Change color of static text to emphasize a message.
  • Score 0 = Any elements that use color only to distinguish them from other content are important such as links.

Success Criterion 1.4.2 – Audio Control

If any audio content that is longer than 3 seconds plays automatically, the user should have a way to stop or turn down the volume independently of the system volume.

When to Test

On pages that have audio that plays automatically and the audio is longer than five seconds.

WCAG Guidelines

Understanding Success Criterion 1.4.2

Testing SC 1.4.2

Check for audio content when the page loads. If there is any audio that plays automatically and it is longer than three seconds, it should have a stop button or a way to turn the volume down.

Note for SC 1.4.2

Turning down the volume of the device or system does not meet this criteria. Users must be able to change the volume of the audio that plays automatically without changing the overall volume on their device.

Scoring for SC 1.4.2

  • Score 1 = There is audio that plays automatically and it has a stop button or volume controls.
  • Score 0 = There is audio that plays automatically but it does not have a stop button or volume controls.
  • N/A: Put N/A in the score if there is no audio that automatically plays.

Success Criterion 1.4.3 – Contrast Minimum

Text and images of text have a contrast ratio of at least 4.5:1.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.4.3

Testing SC 1.4.3

Use a contrast checker and make sure all text and images of text have a 4.5:1 ratio.

Scoring for SC 1.4.3

  • Score 1 = No contrast errors.
  • Score .5 = A few elements have bad contrast but do not hinder the users’ ability to navigate or accomplish tasks.
  • Score 0 = A few or more elements have bad contrast and hinder the users’ ability to navigate or accomplish tasks.

Homework

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