Embed Size (px)
Citation preview
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 [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 )
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.
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
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
