viking methodology

1Monday, May 20, 13

Viking Accessibility:The Warrior's Approach to Hands-on Testing

2Monday, May 20, 13

Karl [email protected]

@karlgroves

mailto:[email protected]

http://www.twitter.com/karlgroves

3Monday, May 20, 13

Goals and Objectives

• Understand accessibility testing techniques

• Understand common challenges by content type

• Gain hands-on knowledge

4Monday, May 20, 13

Resources

http://examples.simplyaccessible.com/vikinghandson/

http://examples.simplyaccessible.com/vikinghandson/

5Monday, May 20, 13

Review - Understanding Disability

6Monday, May 20, 13

Visual Impairment

• Blindness

• Partially Sighted

• Low Vision

• Colorblindness

What types of challenges will they have on the web?

7Monday, May 20, 13

Hearing Impairment

• Deafness (one/ both ears)

• Hard of hearing

• High/ low frequency hearing loss


8Monday, May 20, 13

Motor Impairment

• Loss of limbs, digits

• Palsy disorders

• Repetitive stress injuries

• Arthritis

• Spinal cord injuries

• more


9Monday, May 20, 13

Cognitive Impairment

• Autism

• Brain injury

• Parkinson’s

• Dyslexia

• Alzheimer’s

• more


10Monday, May 20, 13

Speech Impairment

• Stuttering

• Muteness

• Dysarthria (resulting from motor control disorders)

• Articulation & phonemic disorders



Principles of Accessibility


P erceivableO perableU nderstandableR obust

Focuses on user needs, not technology.


Assistive Technologies


Screen Readers

• Intercept what is sent to standard output

• Object info & content rendered in text to speech

Screen Readers


User needs:

• Keyboard access

• Text alternatives

• Headings

• Logical/ sequential ordering

• Proper labels

Screen Magnification

• Enlarges on screen content

• Different magnification modes

• Contrast Modes

• Cursor, pointer enhancement

http://flickr.com/photos/justinstravels/322408478/



Screen Magnification



User needs:

• Text alternatives

• Resizable layouts

• Flexible content


Voice Recognition

Accepts user commands to activate controls and interact with system

Voice Recognition


User Needs:

• Device independence

• Accurate text alternatives

• Accurate labels


Hardware

As diverse as the array of possible disabilities and severities thereof

• Body Level One

Body Level Two

Body Level Three


Often Combined

http://flickr.com/photos/kazuhito/132436943/

http://flickr.com/photos/kazuhito/132436943/

simplyaccessible.comKarl Groves | @karlgroves


Approaches to Testing


Automated Testing

What is it? Use of tool to access web document and subject it to predetermined heuristic checks

• Plugins/ Toolbars

• Desktop Apps

• Web Apps

Automated Testing


Pros:

• Unprecedented efficiency (cost per issue)

• Some issues don’t require humans

Cons:

• Incomplete coverage

• False positives

• Subjectivity in a11y

• DOM testing

• User interaction


Manual Testing

What is it? Use of hands-on techniques to inspect for potential failures, possibly by emulating disabled user scenarios

• Code inspection

• Hardware manipulation

• Software/ Settings manipulation

• AT Testing

Manual Testing


Pros:

• Accuracy

• Reliability

• Judgment

Cons:

• Time

• Reliant on tester’s skill


Use Case Testing

What is it? Analysis of system behavior by subjecting it to scenarios that touch on functional requirements - in this case doing so with assistive technologies

Use Case Testing


Pros:

• Can happen concurrently with other testing

• Gives glimpse of real-world issues faced by PWD

Cons:

• Time

• Tester must know the AT

• Success with one AT !== success with all


Usability Testing

What is it? Observation of test participants using core user tasks, measuring efficiency, accuracy, recall, emotional response.

Usability Testing


Pros:

Most closely represents user’s actual experience

Cons:

• Expensive

• Time-Consuming

• Results may be skewed by high impact issues


Tools

“It’s a poor mechanic who blames his tools” - Old Man Brian

Tools


Free:

• Browser Toolbars/ Plugins

• Online evaluators

Non-Free:

• Enterprise testing suites


Browser Toolbars/ Plugins

Examples:

• WAVE

• Favelets Bar

• Web Accessibility Toolbar

• Web Developer Plugin

• Fangs


WAVE from WebAIMhttp://wave.webaim.org

http://wave.webaim.org


Accessibility Evaluation Toolbar


Web Developer Toolbar


Favelets Bar


Fangs


Online Evaluators

Examples:

• aChecker

• FAE

• Cynthia Says

• WAVE


WAVE


FAE


aChecker


Enterprise Tools

• AMP - SSB BART Group

• Compliance Sheriff - HiSoftware

• Worldspace - Deque

• Rational Studio - IBM

• Compliance Guardian - AvePoint


Viking Methodology

“Failure to plan is planning to fail” - Zig Ziglar


Principles

• Utility

• Accuracy

• Efficiency

• Reliability

• Repeatability


Driving Factors

• Modern websites are not composed of static content

• Certain types of issues occur more often than others

• Certain types of content have more issues than others

• Certain types of issues are more impactful than others


Audits vs. QA

Audits:

• Should maximize utility

• Focus on UI component types

• Priority given to high use, high risk features and components

QA:

• A11y should be part of QA process

• Deliver fast, accurate results & guidance

• Focus only on in-scope work (i.e. user stories & features under dev)


Testing Web Content


Markup and A11y

• All content must be marked up using the most appropriate elements & attributes for the job

• All scripted controls must operate like the native controls which they mimic

Markup and A11y


Page Structure:

What is it?

How are users impacted?

Markup and A11y


Page Structure Requirements:

• Valid, semantic markup

• Page titles: unique, terse, clear, informative

How do we test this?


Page Structure


Keyboard Access/ Focus Control

Keyboard Access, Focus Control:

What is it?


Keyboard Access/ Focus Control


Keyboard Access, Focus Control Requirements:

• Focus order matches expected interaction order

• Items that should get focus do; Items that should not get focus don’t



Keyboard Access and Focus Control


CSS

Cascading Stylesheets:

What is it?


CSS


• Content must remain readable and operable

• Visual indications must also be represented programmatically

• Color contrast



CSS


Forms

Forms:

What are they?


Forms


Forms Requirements:

• All fields labeled tersely, clearly

• Constraints identified

• All fields operable via keyboard

• Errors prevented

• Error recovery facilitated


Forms61Monday, May 20, 13


Frames

Frames:

What are they?


Frames


Frames Requirements:

Frames given clear, terse, informative titles


Frames



Images

Images:

What are they?


Images


Image Requirements:

• Images not used to replace text

• All images have text alternative

• All text alternatives sufficiently clear and informative

• Background images, sprites not used for actionable items or content


Images



Media

Media:

What is this?


Media


Media Requirements

• Captions

• Transcripts

• Audio Description

• Access to controls


Media



Navigation

Navigation:

What is it?


Navigation


Navigation Requirements

• “Links” are actual links & use valid href

• Link text is unique, terse, clear, informative


Navigation



Tables

Tables:

What are they?


Tables


Table Requirements

• No tables for layout

• Headers identified

• Header relationships identified

• Good structure


Tables



Text Content

Text Content:

What is it?


Text Content


Text Content Requirements

• Proper use of headings

• Headings are unique, terse, clear, informative

• Proper use and structure of lists & sub-lists


Text Content



JavaScript-driven Content

JavaScript Content:

What is it?




JavaScript Requirements

• Device independence

• Keyboard access/ focus control

• Name, State, Role, Value




Name: What do we call this thing?

State: What is it doing? (Implicitly) What else can it do?

Role: What type of object is it?

Value: What is its value (if it can have one)

Using standard controls in standard ways gives this to us for free.

JavaScript-driven Content83Monday, May 20, 13


simplyaccessible.com

Accessibility consulting, strategy and assessmentsAccessible development and remediation servicesTraining courses, workshops and conferences Karl Groves

[email protected]@karlgroves

+1 443.875.7343

http://simplyaccessible.com

mailto:[email protected]

http://www.twitter.com/karlgroves

viking methodology

News & Politics

13 keyboard access

users impacted

body level

content

images

informative

issues

13 user