Accessibility Self-Audit Training Sessions

Session 1 WCAG 1.1.1 through 1.2.5

Overview

Training topic and success criterion
Prep work and session Recording
Training intro
Screen reader intro
WCAG Criterion 1.1 and 1.2
Homework

Training Topic and Success Criteria

WCAG 1.1 and 1.2 guidelines cover images, videos, maps, data visualizations and podcasts. Therefore, designers, content creators and marketing folks will benefit a lot from this session.

Prep Work and Recording

Session Recording

This session was recorded. Use the video player below to view it.

Important Documents

You will need the documents below in order to complete this part of the audit.

Download the Survey tool spreadsheet **Survey Tool 2021**
Download the screen reader testing guide **MOPD Screen reader testing guide**
Download the screen reader commands list **MOPD screen reader reference guide**

Additional Resources

Our social media guide can help you figure out whether your alt-text description is good for your image. The video guide will help you decide whether your captions or audio descriptions are sufficient or not.

Download the accessible social media guide ** Social media guide 2019**
Download the video accessibility guide **MOPD Audio description and caption guide**

Training Intro

This training is aimed at teaching you how to audit your agency’s websites for accessibility. It is broken up into seven instructional sessions followed by a few review sessions. We recommend that you spend two to three weeks digesting and practicing the content from each session.

In each session, the WCAG 2.1 Level AA standards are used to measure the accessibility of websites. There are about Five to ten WCAG criterion covered in each session.

For each criterion, we will teach you:

What it means.
When to test for it.
WCAG Guidance.
Good and bad examples for the criterion.
How to test for it.
How to give it a score on the Survey Tool Spreadsheet.

Screen Reader Intro

For this session and many others, you will need to use a screen reader to test webpages. It is recommended to spend some time learning the basics of using one before starting your audit.

Screen readers are an assistive technology that is typically used by people who are blind. It reads aloud the contents of the screen to blind users. Screen reader users also navigate using the keyboard instead of the mouse.

Navigation

For Windows-based screen readers, the arrow keys along with the tab key are the most basic ways to navigate a webpage. The arrow keys read line by line or letter by letter. The tab key navigates to interactable elements such as links, buttons etc.

For Voiceover users on Mac, navigating webpages is accomplished by holding the control and option keys and pressing one of the arrow keys. For example, to have voice over read the next item, press control + Option + right arrow. Voiceover users can also use tab to navigate to interactable elements.

Testing Commands

There are other ways of moving around a webpage that improve the speed of screen reader users. There are keyboard shortcuts for each screen reader that allow a user to navigate to the next link, heading, button, edit field, table, image etc. These shortcuts will help us test different elements for accessibility. Below is a table with these common shortcuts.

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 fingerprint 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
Navigate by character	Left or Right Arrows	Left or Right Arrows	Control, Option, Shift and Left or Right Arrows
Go to next image	G	G	Control, Option, Command and G or G with Quick Nav	Add Shift to move to previous image
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
Go to next form field	F	F	F, B or C with quick nav	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 region	R	D	Custom command	Add Shift to go to previous region
Keyboard access	All links, buttons and form fields should be navigable using Tab	All links, buttons and form fields should be navigable using Tab	All links, buttons and form fields should be navigable using Tab	For Mac, some Safari settings might need to be adjusted for this to work

Session 1 Audit: WCAG 1.1.1 through 1.2.5

Success Criterion 1.1.1 – Non-Text Content

Image based content needs to have a text alternative. For images, alt-text is commonly used to add a description. For maps, a text list indexed by headings that can be filtered is sufficient. For data visualizations, html table alternatives are accessible. Captchas need an audio alternative.

When to Test

On all pages with images, maps or data visualizations.

WCAG Guidance

Understanding Success Criterion 1.1.1

Examples

Testing SC 1.1.1

Jaws and NVDA: Press the letter “G” on your keyboard to navigate to each image and hear it’s alt-text.
Voiceover: Turn on Quick nav by pressing the right and left arrow keys together. Then press G. (Note: Single key navigation must be turned on in the Voiceover Utility)
WAVE, Axe and other automated tools: Insert the URL of the page and find out how many errors you get that mention “missing alt-text.”

Scoring for SC 1.1.1

For standard images: Score between 0 and 1
- Count the total number of images on the page. If there is a social media feed, the entire feed counts as 1 image. Enter this number in the spreadsheet.
- Count the number of images that have proper alt-text. If social media feed has images missing alt-text, then the one image that counts as the social media feed will count as an image missing alt-text. Enter this number in the spreadsheet.
- Divide the number of images with alt-text by the total number of images on the page to get a number between 0 and 1. (Automatically done by spreadsheet.)

For Maps and Data Visualizations: Score will be rounded to the nearest quarter.
- 1 = All of the information conveyed through the map(s) or visualization(s) is available in text form.
- .75 = Most of the information conveyed by the map(s) is available in text form.
- .5 = Around half of the information conveyed by the map(s) or visualization(s) is available in text form.
- .25 = Very little of the information that is conveyed by the map(s) or visualization(s) is available in text form.
- 0 = The information that is conveyed through the map(s) or visualization(s) is not available in text form.
- N/A = Put N/A in the score field if there are no Maps or Data Visualizations on the page.

CAPTCHAs: 1 or 0
- 1= Audio or text-based alternative.
- 0 = No audio or text-based alternatives.
- N/A = Put N/A in the score field if there are no CAPTCHAs on page.

Note

If a page has images and a map/data visualization/captcha, get the average for the images, create a score for the map/data visualization/captcha then do the following. Add the two numbers together and divide by 2 for a number between 1 and 0. If there are multiple maps/data visualizations/captchas, use one score to evaluate all of them.

Success Criterion 1.2.1 - Audio-Only or Video-Only (Pre-Recorded)

Videos with no sound should have audio description or a transcript of an audio description. Audio only content such as podcasts should have transcripts.

When to Test

On pages with video only or audio only content. Video only means videos with no sound. Audio only would be podcasts, music etc.

WCAG Guidance

Understanding Success Criterion 1.2.1

Example

NYCEM Prep Talk Podcast

Testing SC 1.2.1

If there are any videos with no sound, there should be a text description of the video. If there is audio content such as a podcast, each episode needs to have a text transcript.

Notes for SC 1.2.1

NYC websites rarely have video only content. However, there are a few agencies that have podcasts.
GIFs are considered images and not videos.

Scoring for SC 1.2.1

Transcripts for audio content

Score 1 = Transcript has accurate time stamps, names and quotes. Includes music and sound effects.
Score .75 = Missing one of the following. time stamps, names, music or sound effects.
Score .5 = Missing two of the following. Name, time stamp, music or sound effects.
Score .25 = Paraphrased transcript that has no time stamps, names, music, or sound effects.
Score 0 = No transcript.
N/A: Put N/A in the score field if there are no video only or audio only content.

Success Criterion 1.2.2 – Captions (Pre-Recorded)

Captions are provided for pre-recorded videos.

When to Test

On pages with video content. Video content means a video that has audio as well. Videos without sound are covered in 1.2.1.

WCAG Guidance

Understanding Success Criterion 1.2.2

Example

NYC at Work – David Cruysman

Testing SC 1.2.2

If there are any videos on the page, watch them and review the captions.

Scoring for SC 1.2.2

Score 1 = Good quality captions. Mentions names, Includes music and sound effects, accurately timed, it’s well distributed, no spelling mistakes.
Score .75 = Missing one of the following. timing is a little off, some distribution issues, missing names, music or sound effects.
Score .5 = Dialogue only, missing music and sound effects.
Score .25 = All automated captions.
Score 0 = No captions.
N/A: Put N/A in the score field if there are no videos on the page.

Success Criterion 1.2.3 – Audio Description or Media Alternative (Pre-Recorded)

Audio descriptions or text transcripts are provided for pre-recorded video content

When to Test

On pages with video content. Video content means videos with sound. Videos without sound are covered in success criterion 1.2.1.

WCAG Guidance

Understanding Success Criterion 1.2.3

Example

IDNYC public service announcements

Testing SC 1.2.3

If there are any videos embedded into the page, are they described using text? This would be a paragraph above or below the video player that informs viewers of what they are seeing in the video.

Scoring for SC 1.2.3

Score 1 = Text description is near the video player, mentions characters, text on screen and general synopsis.
Score .75 = Either not near video or missing one of the following. Character names, text on screen or synopsis.
Score .5 = Not near video player and missing one of the following. Names, text on screen or synopsis.
Score .25 = Not near video, missing names, text on screen and synopsis.
Score 0 = No text description.
N/A: Put N/A in the score field if there are no videos on the page.

Success Criterion 1.2.4 – Captions (Live)

Captions for live video or audio content.

When to Test

On pages with live video content. Live video content means videos with audio that is streaming live. Videos that do not have audio are covered in success criterion 1.2.1.

WCAG Guidance

Understanding Success Criterion 1.2.4

Testing SC 1.2.4

Watch any live videos that are streamed on this page.

Scoring for SC 1.2.4

Score 1 = Good quality captions. Mentions names, accurately timed, it’s well distributed, few spelling mistakes.
Score .75 = Timing is a little off, some distribution issues.
Score .5 = Dialogue only, missing music and sound effects.
Score .25 = All automated captions.
Score 0 = No captions.
N/A: Put N/A in the score field if there are no live videos on the page.

Success Criterion 1.2.5 – Audio Description (Pre-Recorded)

Audio descriptions are provided for pre-recorded video content. Different from 1.2.3 because there is no option to have a text transcript.

Notes for SC 1.2.5

Sometimes a video is not audio described but the dialogue in the video is accidentally descriptive. Videos that are descriptive but do not have official audio description may receive a score of up to .5.

When to Test

On pages with video content. Video content means videos with audio . Videos that do not have audio are covered by success criterion 1.2.1.

WCAG Guidance

Understanding Success Criterion 1.2.5

Examples

Score 1 example: David Cruysman – NYC at Work
Score .5 example: Melissa Umberger – NYCEM Ready New York
Score .25 example: Women’s History Month Art Series
Score 0 example: Alvin Ailey or NYC Media Promo

Testing SC 1.2.5

Watch the video. It should be audio described or link to an audio described version.

Scoring for SC 1.2.5

Score 1 = Audio described video (either the embedded video is audio described or there is a link to AD version. Introducing scenes, characters, and important visual events. All text and logos are described. Does not interrupt dialogue.
Score .75 = Audio described video is missing one of the following. Character intro, scene intro, text on screen, or interrupts the dialogue.
Score .5 = A non-described video that is mostly talking heads and the speakers introduce themselves.
Score .25 = A non-described video that has some dialogue and minimal descriptions.
Score 0 = No dialogue and no narration.
N/A: Put N/A in the score field if there are no videos on the page.

Homework

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