Practical Hands-on Accessibility Testing

Session Summary:

Learn simple ways to improve accessibility of common tasks conducted with JavaScript, Know when to use ARIA and when not to use it, Know how to use ARIA correctly

Description:

There is a lot of talk about testing, but many people aren’t sure what they need to test, nor how to test for it when it comes to accessibility. There are so many moving parts, it can feel daunting when you’re not used to it. But with the growing requirements for sites to be accessible, it has become an unescapable part of a developer’s life. Look at accessibility as a challenge rather than as a chore.

We will discuss the difference between automated and manual testing. We will examine several distinct aspects of websites that need to be tested for accessibility, from keyboard-only interaction to color contrast checking. We will also be using screen reader applications to look at sites. This is an introduction to using a screen reader, rather than an in-depth tutorial about screen readers.

This is a hands-on workshop - come prepare to have fun trying new things! Bring your own laptop, of course.

Participants will leave the workshop with a solid understanding of common accessibility barriers, and methods to test for and remediate these barriers. A specific methodology will be demonstrated for participants to implement “as is” in their work, or adapt to their needs.

You will benefit from setting up some of the tools we’ll discuss ahead of the workshop. Note that there are no costs involved with installing and using the following tools:

Screen reader:

If you are on Windows:

• Download and install the latest stable version of NVDA https://www.nvaccess.org/download/

If you are on OS X:

• VoiceOver is already built-in

If you are on Linux

• Grab and install ORCA https://help.gnome.org/users/orca/stable/

Bookmarks:

• http://tenon.io For automated testing
• https://webaim.org/resources/contrastchecker/ For testing color contrast

Bookmarklets:

• http://www.pauljadam.com/bookmarklets/
• https://www.w3.org/WAI/GL/wiki/Allowing_for_Spacing_Override#Resources

Browser add-ons:

• Web developer toolbar (if you aren’t already using other code sniffing tools)
• aXe https://www.deque.com/axe/

Website to test

Think of a website that you’d like to assess during the tutorial. Note that we won’t have time to do a full assessment, but you should have a site or a page that you can play with during the exercises.

Practical Skills:

Understand the difference between manual and automated testing, Learn a testing workflow,

Prerequisites:

Prep work described in the class description

Presentation Materials:

• Download course materialsfor