Web Accessibility Basic Testing Using NVDA - ParisWeb 2015 (dboudreau)

What is the first thing
that comes to mind when
thinking 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/

NVDA usersWorldwide. Take a wild guess?
Source
http://community.nvda-project.org/usersByCountry.html

22,296The average daily count of
NVDA users across the world.
Source
http://community.nvda-project.org/usersByCountry.html

Sighted
keyboard
users?
People who
use dictation
software?
People who
can’t easily
process
information?
What about…

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 legally blind after car accident
• Is a casual screen reader user
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 and technology
• Finds interacting with computers impersonal
Particularities
• Has macular degeneration (low vision)
• Recently been introduced to screen readers
Demographics
• 75 years old
• Widower
• 15 kids/grandkids
• Retired

Meet Andrea
Needs and Goals
• Become a partner at her clinic
• Be a great mother to her only daughter
Behaviors
• Can sometimes be obsessive-compulsive
• Gets bogged down in details
Particularities
• Has dyslexia and difficulty concentrating
• Is an experienced screen reader user
Demographics
• 26 years old
• Single
• 1 daughter
• Physical Therapist
• Works in a Clinic

screen reader users
types of very specific needs
radically different uses
ways to make content accessible
4…

Web Accessibility
Basic Testing Using NVDA…
and other things!
Ateliers ParisWeb 2015
Paris, France – October 3rd, 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. Hands-on Testing Workshop
4. Wrap Up and Questions

Accessibility is not just about
testing with screen readers!

BlindnessCognitive
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 disordersVisual
Vestibular disorders

What about people who don’t
use screen readers?

What about people who
use mobile devices?

Accessibility is not just
about testing with
screen readers!

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 like NVDA!

1. Slide deck: http://bit.ly/1FKJLze
2. Turn NVDA on! (Windows key + R » type NVDA)

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

Don’t
Panic!
/ Control Key
/ Speech Rate
/ Speech Viewer

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

Accessibility Test Cases
Today’s Testing Scenario
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.

Getting Started
Test Case Template
Test Case Subject Test Description Step Name Step
Description
Step Expected
Results

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.

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.

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.

Default Language Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

1. Exercise files: http://bit.ly/1VrVgCA
2. Test case template: http://bit.ly/1LnsAG4
3. Turn NVDA on! (Windows key + R » type NVDA)

Let’s get to work!
1. Document Structure
2. Navigation
3. Images
4. Keyboard
5. Tables
6. Forms

Instructions
1. Gather in sub-groups
2. Pick an assignment
3. Select a website
4. Complete the task
5. Share the experience

Regroup and share
your experience

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

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

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

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.

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.

Section Headings Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Page Regions Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

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.

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.

Reading Order Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Link Purpose Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

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.

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.

Informative Images Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Decorative Images Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

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.

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.

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.

Keyboard Access Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Keyboard Focus Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Bypass Blocks Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

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.

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.

Data Table Markup Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Data Cells Association Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

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.

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 aria-required attributes
set to the form controls.

Forms Association Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Required Fields Test Case
3. …
4. …
5. …
6. …
7. …
Expected Results
…

Web Accessibility Basic Testing Using NVDA - ParisWeb 2015 (dboudreau)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Recently uploaded

Recently uploaded (17)

Web Accessibility Basic Testing Using NVDA - ParisWeb 2015 (dboudreau)