1 / 20

How to Improve Your #A11y Testing

How to Improve Your #A11y Testing. (For Beginners) Presented by: James Thompson Owen Edwards. Who is Level Access?. Formerly Known As SSB BART Group. New Corporate Identity – Name and Branding New Website – Coming Spring 2017!! No Change in our Innovative Technology or Excellent Service.

kathyjones
Download Presentation

How to Improve Your #A11y Testing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How to Improve Your #A11y Testing (For Beginners) Presented by: James ThompsonOwen Edwards

  2. Who is Level Access? Formerly Known As SSB BART Group • New Corporate Identity – Name and Branding • New Website – Coming Spring 2017!! • No Change in our Innovative Technology or Excellent Service CSUN 2017 Assistive Technology Conference

  3. Overview How to Improve Your Testing • Check Page Using A Screen Reader • Check Images, Links, Colors, and Text • Verify Equivalent Reading Order • Check Roles and ARIA • Run and Check Automatics CSUN 2017 Assistive Technology Conference

  4. Activate Assistive Technology How to Improve Your Testing • Activate the assistive technology you are testing with before opening the program or browser CSUN 2017 Assistive Technology Conference

  5. Activate Program How to Improve Your Testing • Open the program or the browser and website you are testing. CSUN 2017 Assistive Technology Conference

  6. Visual Testing With a Screen Reader How to Improve Your Testing An example using JAWS on a webpage in Internet Explorer 11 • Arrow keys activating same page links as you go. • ‘Tab' key to see order of links (Insert-F7) • ‘H' key to see order of headings (Insert-F6) • ‘L' key to see order of lists • ‘F' key to see order of form fields (Insert-F5) • ‘T’ key to see order of tables • Deactivate JAWS CSUN 2017 Assistive Technology Conference

  7. Image Testing How to Improve Your Testing • Remove colors (Internet Options, Accessibility) in IE. • Re-enable colors. CSUN 2017 Assistive Technology Conference

  8. Visual Link Testing How to Improve Your Testing • Looking at the page, can you tell links from text? Is this a link or text? Is this a link or text? Link or text? Link or text? Link or text? CSUN 2017 Assistive Technology Conference

  9. Font and Background Color Testing How to Improve Your Testing • Change text and background colors in browser, Is everything that is informative still visible? • Return colors to default. CSUN 2017 Assistive Technology Conference

  10. Enlarging Text How to Improve Your Testing 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? • Do images blur or cover text? The Quick Brown Fox Jumps Over The Lazy Dog CSUN 2017 Assistive Technology Conference

  11. Color Contrast Testing How to Improve Your Testing • Exit responsive design view, reduce size to default, and activate Color Contrast Checker:http://www.ssbbartgroup.com/reference/color-contrast-checker/ • Close 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 CSUN 2017 Assistive Technology Conference

  12. CSS Testing How to Improve Your Testing Remove CSS • In Firefox go to View -> Page Style -> No Style to remove CSS. Needs to be done by 3rd of July 5th of April 5th of July Task Clean the window File taxes online Profit CSUN 2017 Assistive Technology Conference

  13. Reading Order Testing How to Improve Your Testing • Do the elements appear in the same reading order as they appeared with CSS on? • Re-enable CSS Needs to be done by Task 3rd of July Clean the window 5th of April File taxes online 5th of July Profit CSUN 2017 Assistive Technology Conference

  14. Visual ARIA Testing How to Improve Your Testing • If the product uses ARIA • Turn on the Visual ARIA Bookmarklet • Can be found at:http://whatsock.com/training/matrices/visual-aria.htm CSUN 2017 Assistive Technology Conference

  15. Normal Example How to Improve Your Testing CSUN 2017 Assistive Technology Conference

  16. Visual ARIA Example How to Improve Your Testing CSUN 2017 Assistive Technology Conference

  17. Automated Testing How to Improve Your Testing • Run Automated Web Accessibility Tests CSUN 2017 Assistive Technology Conference

  18. AMP Testing How to Improve Your Testing • Using SSB BART Group's Accessibility Management Platform (AMP) Firefox toolbar. • Verify Automatics in AMP. • Verify Guided Automatics. • Add Manual violations. CSUN 2017 Assistive Technology Conference

  19. Any Questions?

  20. Thank you.James Thompsonjames.thompson@ssbbartgroup.comOwen Edwardsowen.edwards@ssbbartgroup.com

More Related