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