How to Improve Your #A11y Testing (For Beginners) Presented by: James Thompson Owen Edwards

Formerly Known As SSB BART Group 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

How to Improve Your Testing 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

Activate Assistive Technology How to Improve Your Testing 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. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing Activate Program How to Improve Your Testing Open the program or the browser and website you are testing. You do not necessarily need to use the AT to navigate to the website but I have found that I use the AT more as my comfort with it improves. CSUN 2017 Assistive Technology Conference

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 NVDA has similar commands. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing Image Testing How to Improve Your Testing Remove colors (Internet Options, Accessibility) in IE. Re-enable colors. Close JAWS . All major browsers have the capability to remove colors as well as CSS. Does any of the text or informative images disappear? Are there any CSS images or icons that are used as controls that disappear? There is another presentation that goes more in depth about dealing with color issues and keyboard a11y at 10am in the Seaport Ballroom A-SSB Bart, 2nd Floor, Seaport Tower entitled “A11y, Visual Design and Front-End Development” by Mitchell Evan and Sam Joehl. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing 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? Make sure that the product consistently identifies text and links in an expected format. CSUN 2017 Assistive Technology Conference

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. 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. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing 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 Lazy Dog There is no responsive design option in IE that I am aware of so I use Firefox . CSUN 2017 Assistive Technology Conference

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 Using the droppers highlight the text then background near the text to determine the luminosity color contrast ratio. According the Web Content Accessibility Guidelines 2.0 level AA there must be a contrast ratio 4.5 to 1 for standard text less than 24 pixels (18 point) or less than 19 pixels (14 point) if bolded. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing 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 Needs to be done by Task 3rd of July Clean the window 5th of April File taxes online 5th of July Profit 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) CSUN 2017 Assistive Technology Conference

How to Improve Your Testing 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 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

How to Improve Your Testing 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 Any immediate ARIA errors? Roll –over links, any links missing ACC name or description? CSUN 2017 Assistive Technology Conference

How to Improve Your Testing Normal Example How to Improve Your Testing 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. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing Visual ARIA Example How to Improve Your Testing Bryan Garaventa presented this amazing bookmarklet last year at CSUN, if you missed it last year, visit the SSB blog and his website. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing Automated Testing How to Improve Your Testing Run Automated Web Accessibility Tests 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 49.0.2. 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. CSUN 2017 Assistive Technology Conference

How to Improve Your Testing 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. 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. CSUN 2017 Assistive Technology Conference

Any Questions? Remember, there is another presentation that goes more in depth about dealing with color issues and keyboard a11y at 10am in this room entitled “Accessibility, Visual Design and Front-End Development” by Mitchell Evan and Sam Joehl. Also, Owen Edwards will be presenting on a topic that we did not cover, “The Nuts & Bolts of Captioning and Describing Online Video” at 11am also in this room.

Thank you. James Thompson james. thompson@ssbbartgroup Thank you. James Thompson james.thompson@ssbbartgroup.com Owen Edwards owen.edwards@ssbbartgroup.com