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

2. 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

3. 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

4. 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

5. 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

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

7. 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

8. 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

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.
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

10. 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

11. Color Contrast Testing
How to Improve Your Testing
Exit responsive design view, reduce size to default, and activate 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

12. 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

13. 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

14. 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:
Any immediate ARIA errors?
Roll –over links, any links missing ACC name or description?
CSUN 2017 Assistive Technology Conference

15. 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

16. 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

17. 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
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

18. 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

19. 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.

20. Thank you. James Thompson james. thompson@ssbbartgroup
Thank you. James Thompson Owen Edwards