Web Accessibility Testing 101: A Checklist for Beginners

Web Accessibility Testing 101: A Checklist for Beginners
Presented By: Owen Edwards and James Thompson #a11y is a widely used abbreviation for “accessibility”, and particularly accessibility of digital information, websites, apps, software and devices. CSUN 2018 Assistive Technology Conference March 22, 2018

levelaccess.com | (800) 899-9659 | info@levelaccess.com
Overview Web A11y Testing 101 Check Page Using Keyboard-Only Access Check Page Using A Screen Reader Check Images, Color, Text Zoom, and CSS Verify Equivalent Reading Order Check Roles and ARIA Automatic testing tools Checklists and testing teams levelaccess.com | (800) |

Keyboard-Only Operation
Web A11y Testing 101 Check focus (tab) order Check visual indication of keyboard focus Any keyboard traps? Does any hidden content get focus? Does anything which is mouse-operable not get keyboard focus? Are there any custom controls or widgets which cannot be operated with keyboard-only use? levelaccess.com | (800) |

Activate Assistive Technology
Web A11y Testing 101 Activate the assistive technology you are testing with before opening the program or browser It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. levelaccess.com | (800) |

Activate Assistive Technology (2)
Web A11y Testing 101 Activate the assistive technology you are testing with before opening the program or browser Open the program or the browser and website you are testing It is important that the assistive technology is active and checking for MSAA changes before you activate the browser or program you are testing. False issues can often crop up when this is not followed. Also – talk about browser choice. IE vs. Firefox vs. Chrome, and AT compatibility. Mention how Analytics skew perception, since they don’t take AT into account. levelaccess.com | (800) |

Activate Assistive Technology (3)
Web A11y Testing 101 Activate the assistive technology you are testing with before opening the program or browser Open the program or the browser and website you are testing Use the AT to access the feature or page to be tested (e.g. using the mouse with JAWS doesn’t cause technical problems, but encourages bad habits in testers, which can lead to testing problems) levelaccess.com | (800) |

Visual Testing With a Screen Reader
Web A11y Testing 101 Using JAWS on a webpage in Internet Explorer 11 Use down arrow key to read through the page Order matches visual order? Anything skipped? Anything read which isn’t visible? NVDA has similar commands. levelaccess.com | (800) |

Visual Testing With a Screen Reader (2)
Web A11y Testing 101 Using JAWS on a webpage in Internet Explorer 11 Use down arrow key to read through the page Order matches visual order? Anything skipped? Anything read which isn’t visible? Use Tab key and Shift-Tab to read through the page Only controls receive focus? Can every link, button, and custom control be operated? Does the announced role match the result? (e.g. does a link go somewhere, or does it open a dialog?) levelaccess.com | (800) |

Visual Testing With a Screen Reader (3)
Web A11y Testing 101 Using JAWS on a webpage in Internet Explorer 11 Insert-F6 to see structure of headings Insert-F7 to see list of links (check for meaning in context, or in list?) ‘L' key to see order of lists ‘F' key to see order of form fields (Insert-F5) ‘T’ key to see order of tables levelaccess.com | (800) |

Image Testing Web A11y Testing 101 Inspect all images for “alt” attribute Which images are purely decorative? All images must have an alt attribute or similar; purely decorative images should have alt=“” to inform the screen reader that the image is decorative, otherwise the screen reader ‘guesses’ by reading the name of the image file. levelaccess.com | (800) |

Image Testing (2) Web A11y Testing 101 Remove colors (Internet Options, Accessibility) in IE. levelaccess.com | (800) |

Use of Color Web A11y Testing 101 Looking at the page, is information, selection or error information indicated with color alone? Note that here there is also an underline, but that might confuse colorblind users into thinking the text is a link, not a highlight. levelaccess.com | (800) |

Use of Color (2) Web A11y Testing 101 Looking at the page, is information, selection or error information indicated with color alone? Looking at the page, is information, selection or error information indicated with styling (bold, italic, shading, etc.) alone? levelaccess.com | (800) |

Use of Color (3) Web A11y Testing 101 Looking at the page, is information, selection or error information indicated with color alone? Looking at the page, is information, selection or error information indicated with styling (bold, italic, shading, etc.) alone? * * This isn’t a violation in itself. But it may be a clue that that information isn’t available to screen reader users – go back to the JAWS testing. levelaccess.com | (800) |

Font and Background Color Testing
Web A11y Testing 101 Change text and background colors in browser, Is everything that is informative still visible? I use a black background with a light green text so that it is immediately obvious when one or both are overwritten in the code. In this example the placeholder text and the Test button disappear with altered browser colors. They do appear if you just remove colors. levelaccess.com | (800) |

Enlarging Text Web A11y Testing 101 Increase size to 200%, open responsive design view (Ctrl-Shift-M in Firefox), and scale down to 1366x768 (most common screen size). Does text wrap properly? The Quick Brown Fox Jumps Over The Lazy Dog There is no responsive design option in IE that I am aware of so I use Firefox . levelaccess.com | (800) |

Enlarging Text (2) The Quick Brown Fox Jumps Over The Lazy Dog
Web A11y Testing 101 Increase size to 200%, open responsive design view (Ctrl-Shift-M in Firefox), and scale down to 1366x768 (most common screen size). Does text wrap properly? The Quick Brown Fox Jumps Over The Lazy Dog The sample text has enlarged and reflowed in the available space levelaccess.com | (800) |

Enlarging Text (3) Web A11y Testing 101 Increase size to 200%, open responsive design view (Ctrl-Shift-M in Firefox), and scale down to 1366x768 (most common screen size). Does text wrap properly? The sample text becomes cropped before we get to 200% zoom levelaccess.com | (800) |

Enlarging Text (4) Web A11y Testing 101 Increase size to 200%, open responsive design view (Ctrl-Shift-M in Firefox), and scale down to 1366x768 (most common screen size). Does text wrap properly? Is any feature lost / hidden? What’s different between the two images, with just a slight increase in zoom? (Note that this is a bit of a contrived example) levelaccess.com | (800) |

Enlarging Text (5) Web A11y Testing 101 Increase size to 200%, open responsive design view (Ctrl-Shift-M in Firefox), and scale down to 1366x768 (most common screen size). Does text wrap properly? Is any feature lost / hidden? The “Go” button disappears out of the panel that the banner occupies, and cannot be scrolled to. levelaccess.com | (800) |

Enlarging Text (6) Web A11y Testing 101 Increase size to 200%, open responsive design view (Ctrl-Shift-M in Firefox), and scale down to 1366x768 (most common screen size). Does text wrap properly? Is any feature lost / hidden? Does text blur? The Quick Brown Fox Jumps Over Lazy Dog levelaccess.com | (800) |

Font and Background Color Testing (2)
Web A11y Testing 101 Exit responsive design view, reduce size to default, and activate Color Contrast Checker: This is an example of poor contrast. It is not a great example as it cannot really be read. If you can read this levelaccess.com | (800) |

CSS Testing – Information & Relationship
Web A11y Testing 101 Remove CSS In Firefox go to View -> Page Style -> No Style to remove CSS. Other browsers have similar capabilities. Looking at the page as a screen reader would. Watch out for dialogs, their location, beginning, and end. Are form elements where there should be? Is there any new informative content that was missing when CSS was on? Is there any informative content missing with CSS off? (the help icons) levelaccess.com | (800) |

CSS Testing – Info & Relationship (2)
Web A11y Testing 101 Remove CSS In Firefox go to View -> Page Style -> No Style to remove CSS. Needs to be done by Task 3rd of July Clean the window 5th of April File taxes online 5th of July Profit Needs to be done by Info 3rd of July 5th of April 5th of July Task Clean the window File taxes online Profit Is the relationship which is conveyed in a table form lost when CSS is removed? On what date does “File Taxes online” need to be done by? levelaccess.com | (800) |

Visual ARIA Testing Web A11y Testing 101 If the product uses ARIA: Use the Visual ARIA Bookmarklet Can be found at: Tab through all custom widgets, open menus, etc. Any immediate ARIA errors? Roll –over links, any links missing ACC name or description? levelaccess.com | (800) |

Example Normal view Web A11y Testing 101 Bryan Garaventa presented this amazing bookmarklet last year at CSUN, if you missed it last year, visit the SSB blog and his website, whatsock.com. levelaccess.com | (800) |

Example Visual ARIA view
Web A11y Testing 101 Use keyboard-only operation to tab through all features, open menus and drop-downs, and generally exercise features of the page without navigating to another page, to allow Visual ARIA to verify that all the ARIA attributes (states) are changed correctly by JavaScript. levelaccess.com | (800) |

Automated Testing Web A11y Testing 101 Run automated Web Accessibility Tests, using one of a number of different tools We at Level Access hope to have a new toolbar with the same functionality I am showing you here along with more capabilities in the near future for the three main browsers, Chrome, Firefox and IE. You can also use our free accessibility checker at webaccessibility.com or any reputable accessibility checker made by any of the other companies here at CSUN. levelaccess.com | (800) |

Automated Testing (2) Web A11y Testing 101 Run automated Web Accessibility Tests, using one of a number of different tools Cross-reference those results with the ones from manual testing For this presentation I am going to use Level Access’ AMP toolbar that is an extension of the Firebug extension in Firefox. Firebug no longer works in the most recent versions of Firefox and I am using version We at Level Access hope to have a new toolbar with the same functionality I am showing you here along with more capabilities in the near future for the three main browsers, Chrome, Firefox and IE. You can also use our free accessibility checker at webaccessibility.com or any reputable accessibility checker made by any of the other companies here at CSUN. levelaccess.com | (800) |

Automated Testing (3) Web A11y Testing 101 Run automated Web Accessibility Tests, using one of a number of different tools Cross-reference those results with the ones from manual testing Remove duplication, and check for false positives For this presentation I am going to use Level Access’ AMP toolbar that is an extension of the Firebug extension in Firefox. Firebug no longer works in the most recent versions of Firefox and I am using version We at Level Access hope to have a new toolbar with the same functionality I am showing you here along with more capabilities in the near future for the three main browsers, Chrome, Firefox and IE. You can also use our free accessibility checker at webaccessibility.com or any reputable accessibility checker made by any of the other companies here at CSUN. levelaccess.com | (800) |

Checklists and Testing Teams
Web A11y Testing 101 Create a checklist following the guidelines Have testing staff run through whole checklist on several known good & bad sites Review results, check for consistency Refine instructions, and re-do tester training Remove inaccurate testers from the pool ??! …add chlorine, check pH, repeat… ! There are many steps to training a team of testers, and ensuring consistent results from them. One key point is to include very detailed instructions, including when to turn on and off features of the browser or AT, and to compare results between testers. levelaccess.com | (800) |

Automated Testing with AMP
Web A11y Testing 101 Run Automated Web Accessibility Tests Access Assistant is our accessibility testing tool, which helps automate all the steps we’ve described. Access Assistant is the result of our more than 20 years experience, and essentially evolved from our initial work on using checklists and scripts. levelaccess.com | (800) |

AMP Testing Web A11y Testing 101 Using Level Access’s suite of tools, you can: Verify Automatic violations Verify “Guided Automatics” Add Manual violations Create and perform Use Cases AMP allows us to see and update the wording on the automated test results along with adding new issues that the automated tests missed based on our previous walkthrough. AMP also contains a list of best practices mapped to WCAG and Section 508 that allow us to easily create reports based on the severity, noticeability, and tractability of those issues. levelaccess.com | (800) |

Any Questions?

Thank You! A11y Crash Course Contact Us Follow Us Owen Edwards @LevelAccessA11y Level-Access James Thompson Level Access Level Access Blog Slide Deck Available for Download at: levelaccess.com | (800) |

Web Accessibility Testing 101: A Checklist for Beginners

Similar presentations

Presentation on theme: "Web Accessibility Testing 101: A Checklist for Beginners"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Web Accessibility Testing 101: A Checklist for Beginners

Similar presentations

Presentation on theme: "Web Accessibility Testing 101: A Checklist for Beginners"— Presentation transcript:

Similar presentations

About project

Feedback