Accessibility Testing Crash Course

James Sheasby Thomas (@RightSaidJames)

Test Engineer, Byng

What is an accessible website?

• Can be used by people with disabilities
• Plays nicely with accessibility software/hardware
• Screen readers e.g. VoiceOver, NVDA, ChromeVox
• Alternative input devices e.g. switches, joysticks
• Voice control e.g. Dragon
• Meets WCAG 2.0 AA guidelines
• Compliant site != Accessible site
• Accessible site != Compliant site
• Well-structured, coded semantically, easy to use?
• Not strictly accessibility, but closely related!

WCAG = Web Content Accessibility Guidelines

Why bother with accessibility?

• It’s the law.
• Equality Act 2010
• Failing to make ‘reasonable adjustments’ for people with disabilities could be discrimination.
• Guidance available on EHRC website.
• It’s a business opportunity.
• Potentially larger market share
• Maybe even a USP? e.g. Apple
• At minimum, it could improve usability and/or conversion.

​

Why bother with accessibility?

• Accessibility benefits everyone
• Some disabilities are minor e.g. far-sightedness, RSI
• Some disabilities are temporary e.g. broken arm, smashed glasses
• Accessible sites tend to be easier to use!
• Accessibility correlates with SEO and UX
• Good HTML structure e.g. clear headings, content hierarchy
• Descriptive alt-text and link text
• Clear navigation (information architecture, main- and sub-navigation, breadcrumbs)
• It’s the right thing to do!

SEO vs Accessibility vs UX

Getting started

Key aspects to be aware of:

• Keyboard accessibility (i.e. no mouse!)
• Navigate/interact using Tab, Space bar, Return and arrow keys
• Form fields, navigation, custom interfaces
• Also important for alternative input devices
• Screen readers (i.e. no monitor!)
• Access all information, in the same order
• No unnecessary repetition
• Content trapped in images without alt text?
• More info: Designing for Screen Reader Compatibility (WebAIM)

Getting started

• Colour accessibility (i.e. colour blindness, impaired vision)
• Labels/keys, error/success indicators shouldn’t be purely colour-based - use text or icons as well.
• WCAG 2.0 AA-compliant contrast ratios should always be used
• More info: Geri Coady’s Colour Accessibility Guide
• Other types of disability to consider e.g.
• Cognitive impairments e.g. memory, reasoning, attention
• Learning disabilities e.g. dyslexia
• Epilepsy
• More info: Web Accessibility - Types of Disability (Coolfields)

Tools!

WAVE Web �Accessibility Tool

​

Demo

​

​

Colour Contrast Checker

ChromeVox/VoiceOver/NVDA

• Free and powerful screen readers!
• VoiceOver is Mac only, ChromeVox is a Chrome extension and NVDA is Windows only.
• All have quirks, bugs and limitations.
• (NVDA works best with Firefox)
• Others are available, but not cheap.
• Usage guides on WebAIM website.

Accessibility DevTools (Chrome)

• Adds accessibility functions to Chrome's DevTools 'Audit' and 'Elements' tabs.
• Like WAVE, but useful for drilling-down and debugging.
• Recommend it to your developers!

iOS Accessibility Options

No budget?

• Listen to key pages with 1 screen reader in 1 browser.
• Navigate/interact with your site with just a keyboard.
• Focus on buttons, links and forms.
• Audit your site using WAVE, noting errors or repeated warnings.
• Use your findings to help you justify an accessibility testing budget.
• Advocacy skills are as important as bug finding skills!

Questions?

Thanks

Get in touch:

Hello@rightsaidjames.com

@RightSaidJames

rightsaidjames.com

Blog post of this talk: http://rightsaidjames.com/2016/09/accessibility-testing-crash-course/