1. No category

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
1
Manual
2
Screen Reader
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
[email protected]
@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 )
Hearing
Learning difficulties
Acquired brain injuries
Noise-induced hearing loss Anomalous trichromacy
Vestibular disorders
Photoepileptic seizures
Getting older
Dyscalculia
Situational disabilities Muscle slowness
Stroke
Tritanomaly
Achromatopsia Dysgraphia Photosensitive epilepsy
Illiteracy Visual impairments Loss of fine muscle control Poor hearing
Cerebral palsy
Parkinson’s disease
Cataracts
Chemo brain
Glaucoma Protanopia
Cystic fibrosis
Cognitive
Lazy-Eyes
Blindness
Muscular dystrophy Vertigo
Deuteranomaly
Astigmatism Amputation
Dichromacy Directionally challenged
Gamer’s thumb Neurodegenerative diseases
Language barriers
Tritanopia Dementia Age-related macular degeneration
Tremors
Developmental disabilities Dyslexia Post-concussion syndrome
Deafness
Color blindness
Sleep deprivation
Protanomaly
Multiple sclerosis Deuteranopia Hard of hearing
Autism
Visual
Attention deficit disorder
Monochromacy
Diabetic retinopathy
Motor
Reading disorders
Low vision
Difficulty concentrating
Aphasia
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
NVDA +↑
Ctrl + ← / →
Ctrl + ↑ / ↓
↑/↓
←/→
Stop reading
Read current line
Read previous / next word
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
1-6
F
T
B
L
I
G
K
Navigate through landmarks
Navigate through headings level 1 to 6
Navigate through forms
Navigate through tables
Navigate through buttons
Navigate through lists
Navigate through list items
Navigate through graphics
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
Demographics
•
•
•
•
•
35 years old
Married
Two boys
Musician
Works from home
•
•
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
Meet John
Needs and Goals
•
•
Clear, simple instructions
Not get lost in details
Behaviors
Demographics
•
•
•
•
•
47 years old
Single
No kids
Accountant
Works in small office
•
•
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
Meet Jim
Needs and Goals
•
•
Spend as much time as possible with family
Goes to church every Sunday
Behaviors
Demographics
•
•
•
•
75 years old
Widower
15 kids/grandkids
Retired
•
•
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
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.
2.4.2 (A) - Page Titles
Pages have descriptive,
informative and unique
page titles.
a11yTip #1
Provide descriptive titles for web pages
http://bit.ly/1lKYkFE
Accessibility Test Cases
Page Titles Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Set focus to the top of the page
Hit the NVDA+T key combination
Listen to the information conveyed
Expected Results
NVDA announces a meaningful page title
that clearly identifies and represents the
content of the page.
3.1.1 (A) - Default Language
The language of the page
is identified using the
HTML lang attribute.
a11yTip #2
Identify the default language of the content
http://bit.ly/1lKWPaG
Accessibility Test Cases
Default Language Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Set focus to the top of the page
Start reading content using NVDA + ⬇︎
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.
1.3.1 (A) – Section Headings
Content is hierarchically
structured using heading
elements.
a11yTip #3
Organize content using hierarchically nested headings
http://bit.ly/1ia4Gc6
Accessibility Test Cases
Section Headings Test Case
1.
2.
3.
4.
5.
6.
Turn on NVDA screen reader
Open the page in Firefox
Hit the NVDA + F7 key
In the modal, set focus to “Headings”
Analyze the heading structure displayed
Check if it matches the visual structure
Expected Results
The extracted outline reliably represents the
heading structure suggested by the design.
1.3.1 (A) - Page Regions
WAI-ARIA landmarks are
used to identify various
sections of the page.
a11yTip #4
Use landmark roles to define page regions
http://bit.ly/1ryGRRx
Accessibility Test Cases
Page Regions Test Case
1.
2.
3.
4.
5.
6.
Turn on NVDA screen reader
Open the page in Firefox
Hit the NVDA + F7 key
In the modal, set focus to “Landmarks”
Analyze the landmark structure displayed
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
1.3.2 (A) - Reading Order
The reading and navigation
order (determined by code
order) is logical and
intuitive.
a11yTip #5
Organize content in a sequential reading order that remains logical
http://bit.ly/1rPdEkF
Accessibility Test Cases
Reading Order Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Set focus to the top of the page
Start reading content using NVDA + ⬇︎
Listen to the information conveyed
Expected Results
NVDA reads the content in an order that
matches the design and makes sense to
users.
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.
a11yTip #6
Provide links that meaningfully describe their purpose
http://bit.ly/1mJNDCm
Accessibility Test Cases
Link Purpose Test Case
1.
2.
3.
4.
5.
6.
Turn on NVDA screen reader
Open the page in Firefox
Hit the NVDA + F7 key
In the modal, set focus to “Links”
Analyze the links structure displayed
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.
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 #7
Provide alt attributes for active images
http://bit.ly/1q0OVOJ
Accessibility Test Cases
Informative Images Test Case
1.
2.
3.
4.
5.
6.
Turn on NVDA screen reader
Open the page in Firefox
Set NVDA focus to the page
Go from one image to the next using the G key
Listen to the info conveyed by NVDA
Informative images are well described
Expected Results
Each informative image is adequately described and
users are not missing any significant page content.
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.
a11yTip #8
Make decorative images invisible to assistive technologies
http://bit.ly/1fGdj3A
Accessibility Test Cases
Decorative Images Test Case
1.
2.
3.
4.
5.
6.
Turn on NVDA screen reader
Open the page in Firefox
Set NVDA focus to the page
Go from one image to the next using the G key
Listen to the info conveyed by NVDA
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.
2.1.1 (A) - Keyboard Access
Page functionalities are
available using the
keyboard.
a11yTip #9
Ensure pages can be fully controlled without a mouse
http://bit.ly/Sknpgr
Accessibility Test Cases
Keyboard Access Test Case
1.
2.
3.
4.
5.
6.
Turn on NVDA screen reader
Open the page in Firefox
Set focus to the page
TAB from one element to the next
All objects can be reached/operated
Significant context info is provided
Expected Results
No interactions are mouse dependent. Each object
can be fully used, relying only on keyboard keys.
2.4.3 (A) – Keyboard Focus
Active elements receive
focus in an order that follows
sequence and relationships
in the content.
a11yTip #10
Place active elements in a predictable tabbing order
http://bit.ly/1bUgxPZ
Accessibility Test Cases
Keyboard Focus Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Set focus to the page
TAB from one active element to the next
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.
2.4.1 (A) - Bypass Blocks
A method is provided to
skip navigation and other
elements that are repeated
across pages.
a11yTip #11
Provide a mechanism to skip content repeated across pages
http://bit.ly/1fGcXKr
Accessibility Test Cases
Bypass Blocks Test Case
1.
2.
3.
4.
5.
6.
Turn on NVDA screen reader
Open the page in Firefox
Set focus to the top of the page
Start reading content using NVDA + ⬇︎
Look for skip link information
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.
1.3.1 (A) – Data Table Markup
Header cells and data cells
are properly coded using
data table markup.
a11yTip #12
Structure tabular information using table markup
http://bit.ly/1kvnzYG
Accessibility Test Cases
Data Table Markup Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Navigate between tables using the T key
Hold down CTRL + ALT + arrows to
navigate between cells/rows
Listen to the information conveyed
Expected Results
Users hear about the cell content, and possibly
all associated column header cells.
1.3.1 (A) – Data Cells Association
Data cells in complex data
tables are programmatically
associated with every
corresponding header cell.
a11yTip #13
Associate cells in complex data tables using headers and ID attributes
http://bit.ly/1IEt8Uk
Accessibility Test Cases
Data Cells Association Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Navigate between tables using the T key
Hold down CTRL + ALT + arrows to
navigate between cells/rows
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.
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 #14
Associate text labels with form controls using the LABEL element
http://bit.ly/Vr03GH
Accessibility Test Cases
Forms Association Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Navigate between form controls using the F key
Set focus to the form controls one by one
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.
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.
a11yTip #15
Do not rely on asterisks alone to define required fields
http://bit.ly/P0kjMk
Accessibility Test Cases
Required Fields Test Case
1.
2.
3.
4.
5.
Turn on NVDA screen reader
Open the page in Firefox
Navigate between form controls using the F key
Set focus to the required form controls
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
/ [email protected]
/ @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