What is the first thing that comes to mind when you think...

What is the first thing that comes to mind when

you think about testing for web accessibility?

Accessibility Testing Most People’s Typical Testing Process

Automated Manual Screen Reader

1 2 3

Typical focus on screen reader

testing

Typical focus on other types

of testing

39 000 000 people are blind

246 000 000 people have low vision

Visual impairment and blindness (WHO, 2014) http://www.who.int/mediacentre/factsheets/fs282/en/

20,942 The average daily count of NVDA users across the world.

Source http://community.nvda-project.org/usersByCountry.html

Step away from the

screen reader for a bit.

Web Accessibility Basic Testing Using NVDA

GAAD – a11yYOW 2015 May 21st, 2015

Denis Boudreau denis@simplyaccessible.com

@dboudreau

Web Accessibility Strategist Simply Accessible http://sateach.es

Workshop Overview

1. Fundamental testing concepts

2. Screen reader testing demos

3. Content type testing

4. Wrap up and questions

Accessibility is not just about testing with screen readers!

Srsly?

( yep )

Blindness Cognitive Situational disabilities

Chemo brain

Color blindness

Cystic fibrosis

Gamer’s thumb

Dyslexia Language barriers

Photosensitive epilepsy

Astigmatism

Hard of hearing

Lazy-Eyes

Directionally challenged

Poor hearing

Age-related macular degeneration

Multiple sclerosis

Learning difficulties

Visual impairments

Tremors

Muscle slowness

Deuteranopia Monochromacy

Dichromacy

Anomalous trichromacy

Protanopia

Protanomaly

Deuteranomaly

Tritanopia

Tritanomaly

Deafness

Achromatopsia

Loss of fine muscle control Parkinson’s disease

Muscular dystrophy

Cerebral palsy

Stroke

Photoepileptic seizures

Developmental disabilities

Dyscalculia

Attention deficit disorder

Dementia

Acquired brain injuries

Neurodegenerative diseases

Difficulty concentrating

Dysgraphia

Getting older

Post-concussion syndrome Sleep deprivation

Vertigo

Illiteracy

Amputation

Cataracts Glaucoma

Hearing

Autism Motor Diabetic retinopathy Low vision

Noise-induced hearing loss

Aphasia Reading disorders

Visual

Vestibular disorders

Situational Disabilities

It’s Not Only About “Them” • Broken mouse • Fractured wrists • Foreign language • Sun glare on screens • Feeling tired or unwell • Noisy environments • Kids playing around • Long, stressful day • Etc.

What about people using mobile devices?

Pro Tip #1 Unplug your mouse and test using just your keyboard.

Oh, the things you discover

just by putting your mouse aside…

Pro Tip #2 Look for proximity issues in design using the straw test.

Happy with what you’ve found?

Then (and only then) should you consider using a screen reader!

Getting Started Basics of Using NVDA

Reference http://accessibility.psu.edu/ screenreaders/nvda/

Getting Started Reading Text with NVDA Command Description NVDA +↓ Read all from the current position

Ctrl Stop reading

NVDA +↑ Read current line

Ctrl + ← / → Read previous / next word

Ctrl + ↑ / ↓ Read previous / next paragraph

↑ / ↓ Read previous / next line

← / → Read previous / next character

Let’s try it out, shall we?

Meet NVDA

Don’t Panic!

/ Control Key / Speech Rate / Speech Viewer

nvaccess.org

Why not donate some money to help support them while you’re at it? http://www.nvaccess.org/donate/

Getting Started General Navigation with NVDA Quick Keys Description H Navigate through headings

D Navigate through landmarks

1-6 Navigate through headings level 1 to 6

F Navigate through forms

T Navigate through tables

B Navigate through buttons

L Navigate through lists

I Navigate through list items

G Navigate through graphics

K Navigate through links

Getting Started Advanced Navigation with NVDA+F7

Text Content • Page Titles • Default Language

Document Structure • Section Headings • Page Regions

Navigation • Reading Order • Link Purpose

Images • Informative Images • Decorative Images

Keyboard Accessibility • Keyboard Access • Keyboard Focus • Bypass Blocks

Tables • Data Table Markup • Data Cells Association

Forms • Forms Association • Required Fields

a11yTips.org

An ever growing resource to understand the many subtleties of Web accessibility.

First, choose your website…

One size never fits all.

Meet Mary Needs and Goals • To know she can trust people • Open her own music school

Behaviors • Very outgoing, always seeking excitement • Gets things done quickly when focused

Particularities • Was born blind • Is a power screen reader user • Uses NVDA at a speech rate of 75

Demographics • 35 years old • Married • Two boys • Musician • Works from home

Meet John Needs and Goals • Clear, simple instructions • Not get lost in details

Behaviors • Loves to make to-do lists for everything • Frequently feels anxious and overwhelmed

Particularities • Became blind after severe car accident • Is a casual screen reader user • Uses NVDA at a speech rate of 50

Demographics • 47 years old • Single • No kids • Accountant • Works in small office

Meet Jim Needs and Goals • Spend as much time as possible with family • Goes to church every Sunday

Behaviors • Untrusting of computers, dislikes

technology • Finds interacting with computers impersonal

Particularities • Has macular degeneration (low vision) • Recently been introduced to screen readers • Uses NVDA at a speech rate of 25

Demographics • 75 years old • Widower • 15 kids/grandkids • Retired

Accessibility Related User Stories Text Content Testing

As a user,

I need text content to be clearly exposed to my tools,

so that I can understand what the content is about and how I can use it.

a11yTip #1 Provide descriptive titles for web pages http://bit.ly/1lKYkFE

2.4.2 (A) - Page Titles Pages have descriptive, informative and unique page titles.

Accessibility Test Cases Page Titles Test Case 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set focus to the top of the page 4. Hit the NVDA+T key combination 5. Listen to the information conveyed

Expected Results NVDA announces a meaningful page title that clearly identifies and represents the content of the page.

a11yTip #2 Identify the default language of the content http://bit.ly/1lKWPaG

3.1.1 (A) - Default Language The language of the page is identified using the HTML lang attribute.

Accessibility Test Cases Default Language Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set focus to the top of the page 4. Start reading content using NVDA + ⬇ ︎5. Listen to the information conveyed

Expected Results NVDA clearly and intelligibly reads the content and the pronunciation of all words makes sense.

Accessibility Related User Stories Document Structure Testing

As a user,

I need to be able to make sense of how the page is organized,

so that I can efficiently determine the document outline and what the different sections of the page are.

a11yTip #3 Organize content using hierarchically nested headings http://bit.ly/1ia4Gc6

1.3.1 (A) – Section Headings Content is hierarchically structured using heading elements.

Accessibility Test Cases Section Headings Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Hit the NVDA + F7 key 4. In the modal, set focus to “Headings” 5. Analyze the heading structure displayed 6. Check if it matches the visual structure

Expected Results The extracted outline reliably represents the heading structure suggested by the design.

a11yTip #4 Use landmark roles to define page regions http://bit.ly/1ryGRRx

1.3.1 (A) - Page Regions WAI-ARIA landmarks are used to identify various sections of the page.

Accessibility Test Cases Page Regions Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Hit the NVDA + F7 key 4. In the modal, set focus to “Landmarks” 5. Analyze the landmark structure displayed 6. Check if it matches the doc structure

Expected Results The extracted landmarks reliably represent the regions suggested by the design.

Accessibility Related User Stories Navigation Testing

As a user,

I need all navigation mechanisms provided in a page to be marked up in a way that is compatible with the tools I use,

so that I can easily and efficiently navigate through content

a11yTip #5 Organize content in a sequential reading order that remains logical http://bit.ly/1rPdEkF

1.3.2 (A) - Reading Order The reading and navigation order (determined by code order) is logical and intuitive.

Accessibility Test Cases Reading Order Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set focus to the top of the page 4. Start reading content using NVDA + ⬇ ︎5. Listen to the information conveyed

Expected Results NVDA reads the content in an order that matches the design and makes sense to users.

a11yTip #6 Provide links that meaningfully describe their purpose http://bit.ly/1mJNDCm

2.4.4 (A) - Link Purpose The purpose of each link can be determined from the link text alone, or from the link text and its context.

Accessibility Test Cases Link Purpose Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Hit the NVDA + F7 key 4. In the modal, set focus to “Links” 5. Analyze the links structure displayed 6. Check that each link is meaningful

Expected Results Each link is clear and meaningful. Users can easily determine what the purpose of each link is.

Accessibility Related User Stories Images Testing

As a user,

I want every significant image displayed in the page to be efficiently described in text,

so that I don't miss out on any important information or instructions.

a11yTip #7 Provide alt attributes for active images http://bit.ly/1q0OVOJ

1.1.1 (A) - Informative Images Informative images have descriptive equivalent text serving the same purpose and presenting the same information as the image.

Accessibility Test Cases Informative Images Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set NVDA focus to the page 4. Go from one image to the next using the G key 5. Listen to the info conveyed by NVDA 6. Informative images are well described

Expected Results Each informative image is adequately described and users are not missing any significant page content.

a11yTip #8 Make decorative images invisible to assistive technologies http://bit.ly/1fGdj3A

1.1.1 (A) - Decorative Images Images that do not convey content, are decorative, or with content that is already conveyed in text are given null alternative text.

Accessibility Test Cases Decorative Images Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set NVDA focus to the page 4. Go from one image to the next using the G key 5. Listen to the info conveyed by NVDA 6. Decorative images are not conveyed

Expected Results Each decorative image is completely ignored by NVDA and users do not hear about them at all.

Accessibility Related User Stories Keyboard Accessibility Testing

As a user,

I need to be able to take advantage of every functionality available using only my keyboard,

so that I can use the site to its full, expected extent.

a11yTip #9 Ensure pages can be fully controlled without a mouse http://bit.ly/Sknpgr

2.1.1 (A) - Keyboard Access Page functionalities are available using the keyboard.

Accessibility Test Cases Keyboard Access Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set focus to the page 4. TAB from one element to the next 5. All objects can be reached/operated 6. Significant context info is provided

Expected Results No interactions are mouse dependent. Each object can be fully used, relying only on keyboard keys.

a11yTip #10 Place active elements in a predictable tabbing order http://bit.ly/1bUgxPZ

2.4.3 (A) – Keyboard Focus Active elements receive focus in an order that follows sequence and relationships in the content.

Accessibility Test Cases Keyboard Focus Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set focus to the page 4. TAB from one active element to the next 5. Analyze how predictable the TAB order is

Expected Results The sequence of tab stops is both logical and predictable. Users don’t ever need to wonder where the focus will go next, or where it went.

a11yTip #11 Provide a mechanism to skip content repeated across pages http://bit.ly/1fGcXKr

2.4.1 (A) - Bypass Blocks A method is provided to skip navigation and other elements that are repeated across pages.

Accessibility Test Cases Bypass Blocks Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set focus to the top of the page 4. Start reading content using NVDA + ⬇ ︎5. Look for skip link information 6. When found, activate the skip link

Expected Results As the link is triggered, the keyboard focus is moved to the expected region of the page.

Accessibility Related User Stories Tables Testing

As a user,

I need all information contained in tables to be explicitly associated with corresponding header cells,

so that I can understand how the information is organized.

a11yTip #12 Structure tabular information using table markup http://bit.ly/1kvnzYG

1.3.1 (A) – Data Table Markup Header cells and data cells are properly coded using data table markup.

Accessibility Test Cases Data Table Markup Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Navigate between tables using the T key 4. Hold down CTRL + ALT + arrows to

navigate between cells/rows 5. Listen to the information conveyed

Expected Results Users hear about the cell content, and possibly all associated column header cells.

a11yTip #13 Associate cells in complex data tables using headers and ID attributes http://bit.ly/1IEt8Uk

1.3.1 (A) – Data Cells Association Data cells in complex data tables are programmatically associated with every corresponding header cell.

Accessibility Test Cases Data Cells Association Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Navigate between tables using the T key 4. Hold down CTRL + ALT + arrows to

navigate between cells/rows 5. Listen to the information conveyed

Expected Results Users hear about the cell content, and possibly all associated column header cells.

Accessibility Related User Stories Forms Testing

As a user,

I need form controls, labels and instructions to be clearly conveyed back to me,

so that I can efficiently use the form to interact with the site.

a11yTip #14 Associate text labels with form controls using the LABEL element http://bit.ly/Vr03GH

1.3.1 (A) - Forms Association Labels are programmatically associated with form controls using the LABEL element with matching values on the for and ID attributes.

Accessibility Test Cases Forms Association Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Navigate between form controls using the F key 4. Set focus to the form controls one by one 5. Listen to the label being conveyed for

each control

Expected Results All form labels are meaningfully announced to users. Each form control has its own specific label.

a11yTip #15 Do not rely on asterisks alone to define required fields http://bit.ly/P0kjMk

3.3.2 (A) – Required Fields Asterisk symbols on text labels are used, in conjunction with off-screen text or aria-required attributes set to the form controls.

Accessibility Test Cases Required Fields Test Case

1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Navigate between form controls using the F key 4. Set focus to the required form controls 5. Listen whether users are made aware that

the control is required

Expected Results All required form controls are explicitly conveyed as such to users.

Pro Tip #3 Use screen readers when all other bases are well covered.

Pro Tip #4 There’s a limit to how much you can “fake your way” into a disability.

Pro Tip #5 Involve real end users with various disabilities!

Simply Accessible challenges you to celebrate Global Accessibility Awareness Day (GAAD) 2015

by taking matters into your own hands. You up for it?

http://sateach.es/gaad-2015

Merci beaucoup!

/ Denis Boudreau / Simply Accessible / denis@simplyaccessible.com / @dboudreau

Photo Credits All rights belong to their respective owners.

http://i.huffpost.com/gen/1760949/thumbs/o-BALANCE-SCALE-facebook.jpg http://foto-ruta.com/wp-content/uploads/2012/01/FR_step5.jpg http://www.bodybiz.nl/wp-content/uploads/2013/06/5redenenen.jpg http://www.vibrantnation.com/wp-content/uploads/blah-blah.jpg http://centerfordentalimplants.info/wp-content/uploads/2013/02/incredulous1.jpg http://payload61.cargocollective.com/1/0/12581/3537536/ready_play_ID_860.jpg http://kpumc.org/wp-content/uploads/2014/01/Angry-Woman.jpg http://hemlocktime.files.wordpress.com/2014/03/4084963522_f50fc5ed37_b.jpg http://imanageproducts.uk/wp-content/uploads/2015/01/Agile-pic-3.jpg https://pbs.twimg.com/media/Bq5y-56IYAAAmkI.jpg:large http://rabota5.ru/photo/zarabotat-na-shkolnyh-sochineniyah-3454.jpg