![Page 1: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/1.jpg)
What is the first thing that comes to mind when
you think about testing for web accessibility?
![Page 2: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/2.jpg)
Accessibility Testing Most People’s Typical Testing Process
Automated Manual Screen Reader
1 2 3
![Page 3: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/3.jpg)
Typical focus on screen reader
testing
Typical focus on other types
of testing
![Page 4: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/4.jpg)
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/
![Page 5: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/5.jpg)
20,942 The average daily count of NVDA users across the world.
Source http://community.nvda-project.org/usersByCountry.html
![Page 6: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/6.jpg)
Step away from the
screen reader for a bit.
![Page 7: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/7.jpg)
Web Accessibility Basic Testing Using NVDA
GAAD – a11yYOW 2015 May 21st, 2015
![Page 8: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/8.jpg)
Denis Boudreau [email protected]
@dboudreau
Web Accessibility Strategist Simply Accessible http://sateach.es
![Page 9: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/9.jpg)
Workshop Overview
1. Fundamental testing concepts
2. Screen reader testing demos
3. Content type testing
4. Wrap up and questions
![Page 10: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/10.jpg)
Accessibility is not just about testing with screen readers!
![Page 11: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/11.jpg)
Srsly?
![Page 12: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/12.jpg)
( yep )
![Page 13: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/13.jpg)
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
![Page 14: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/14.jpg)
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.
![Page 15: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/15.jpg)
What about people using mobile devices?
![Page 16: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/16.jpg)
Pro Tip #1 Unplug your mouse and test using just your keyboard.
![Page 18: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/18.jpg)
Pro Tip #2 Look for proximity issues in design using the straw test.
![Page 20: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/20.jpg)
Happy with what you’ve found?
Then (and only then) should you consider using a screen reader!
![Page 21: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/21.jpg)
Getting Started Basics of Using NVDA
Reference http://accessibility.psu.edu/ screenreaders/nvda/
![Page 22: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/22.jpg)
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
![Page 23: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/23.jpg)
Let’s try it out, shall we?
![Page 24: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/24.jpg)
Meet NVDA
![Page 25: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/25.jpg)
Don’t Panic!
/ Control Key / Speech Rate / Speech Viewer
![Page 26: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/26.jpg)
nvaccess.org
Why not donate some money to help support them while you’re at it? http://www.nvaccess.org/donate/
![Page 27: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/27.jpg)
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
![Page 28: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/28.jpg)
Getting Started Advanced Navigation with NVDA+F7
![Page 29: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/29.jpg)
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
![Page 30: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/30.jpg)
a11yTips.org
An ever growing resource to understand the many subtleties of Web accessibility.
![Page 31: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/31.jpg)
First, choose your website…
![Page 32: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/32.jpg)
One size never fits all.
![Page 33: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/33.jpg)
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
![Page 34: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/34.jpg)
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
![Page 35: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/35.jpg)
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
![Page 36: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/36.jpg)
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.
![Page 37: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/37.jpg)
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.
![Page 38: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/38.jpg)
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.
![Page 39: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/39.jpg)
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 40: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/40.jpg)
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.
![Page 41: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/41.jpg)
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.
![Page 42: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/42.jpg)
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.
![Page 43: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/43.jpg)
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.
![Page 44: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/44.jpg)
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.
![Page 45: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/45.jpg)
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.
![Page 46: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/46.jpg)
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
![Page 47: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/47.jpg)
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.
![Page 48: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/48.jpg)
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.
![Page 49: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/49.jpg)
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.
![Page 50: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/50.jpg)
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.
![Page 51: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/51.jpg)
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.
![Page 52: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/52.jpg)
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.
![Page 53: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/53.jpg)
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.
![Page 54: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/54.jpg)
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.
![Page 55: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/55.jpg)
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.
![Page 56: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/56.jpg)
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.
![Page 57: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/57.jpg)
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.
![Page 58: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/58.jpg)
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.
![Page 59: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/59.jpg)
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.
![Page 60: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/60.jpg)
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.
![Page 61: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/61.jpg)
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.
![Page 62: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/62.jpg)
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.
![Page 63: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/63.jpg)
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.
![Page 64: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/64.jpg)
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.
![Page 65: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/65.jpg)
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.
![Page 66: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/66.jpg)
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.
![Page 67: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/67.jpg)
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.
![Page 68: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/68.jpg)
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.
![Page 69: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/69.jpg)
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.
![Page 70: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/70.jpg)
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.
![Page 71: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/71.jpg)
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.
![Page 72: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/72.jpg)
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.
![Page 73: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/73.jpg)
Pro Tip #3 Use screen readers when all other bases are well covered.
![Page 74: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/74.jpg)
Pro Tip #4 There’s a limit to how much you can “fake your way” into a disability.
![Page 75: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/75.jpg)
Pro Tip #5 Involve real end users with various disabilities!
![Page 76: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/76.jpg)
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
![Page 78: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/78.jpg)
![Page 79: What is the first thing that comes to mind when you think ...denisboudreau.org/.../GAAD2015-nvda-a11y-testing... · 1. Turn on NVDA screen reader 2. Open the page in Firefox 3. Set](https://reader033.vdocuments.site/reader033/viewer/2022042710/5f6145642130e060c67602fa/html5/thumbnails/79.jpg)
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