SlideShare a Scribd company logo
1 of 18
Where usability
meets accessibility
Whitney Quesenbery, Center for Civic Design
Jayne Schurick, Knowbility
2
Hi!
Whitney
User research, plain language, usability
Found accessibility through work on civic design
and elections.
Jayne
Usability
Found accessibility through Phillip Morris.
3
Our starting point: user experience and
the user-centered design process
1. Understand
people and context
of use
2. Identify
requirements
3. Explore design
solutions
4. Evaluate
with users
Source: ISO 9241-210 (formerly ISO-13407)
4
Accessibility and usability go hand in hand
Usability
The effectiveness,
efficiency and
satisfaction with
which a specified set of
users can achieve a
specified set of tasks in
a particular
environment.
– ISO 9241-11
Accessibility
The usability of a product,
service, environment or
facility by people with the
widest range of capabilities
– ISO 9241-20
5
Accessibility error priorities
1. Critical
An absolute barrier to access
2. Serious
A barrier that could cause frustration to most and be a
barrier to some, causing a need for work-arounds
3. Moderate
A frustration that would not prevent someone from using
the site
4. Minor
A WCAG error that is unlikely to cause problems
- Glenda Sims, Deque
Source: 2103 Accessibility Summit: http://environmentsforhumans.com
6
Usability problem priorities
1. Critical
A problem that will prevent some users from completing a
common task
2. Serious
A problem that will slow down some users and force them
to find work-arounds
3. Medium
A problem that will cause frustration but will not affect task
completion
4. Low
A quality or cosmetic problem, such as a spelling error,
that can damage the credibility of a site.
- David Travis, User Focus
Source: http://www.userfocus.co.uk/articles/prioritise.html
7
Both evaluate priorities by impact on the user
How likely is it that this problem will stop someone from
being able to use the site?
Priority Label What it covers
Critical Barriers that stop someone from using a site or feature
successfully
Serious Problems that cause frustration, slow someone down,
or require work-arounds
Annoying
(moderate)
Things that are frustrating, but won't stop someone
from using the site
Noisy
(minor)
Minor issues that might not cause someone a problem,
but which damage credibility
8
Examples of how usability and
accessibility problems interact
These examples are drawn from our experiences doing
usability testing. Although we show partial screens from
real site, these are simply typical problems, and not
unique to those sites.
In most cases, these companies are actively working on
both usability and accessibility, and some of the issues
described in this presentation have already been fixed.
9
Coding errors turn a serious usability problem into a
critical accessibility problem
Usability problems (serious)
• Too many links (281 of them)]
• And 45 lists
• 98 Poor headings
• Overly complex information
Accessibility barriers (critical)
• Missing semantic coding:
• Headings
• In page navigation
10
Noisy – easy to find - problems masked a critical one
Accessibility (noisy)
• Missing alt text
• Inconsistent heading coding
• Confusing labeling of
sections
But the real problem was
Accessibility (critical)
• No way to jump past the
infinite ribbon at the top of
the page
11
All information and links are “accessible” but rely on
visual layout for meaning
Accessibility (serious)
• The overall site is
accessible
but
• The insert task links
rely on visual position
to tell you where the
task will be inserted.
Insert Task
Insert Task
12
Long pages make information hard to find (even with
headers, without a table of contents
Really
really
long
page

Usability & Accessiblity
(Annoying to Serious)
• On a long page with a lot of
detail, users had trouble
finding specific information
Adding a well-designed "on this
page" menu helped everyone
decide whether this was the right
page
13
The interface is harder than the test
Usability (serious)
Kids have to know how
use the tabs
Accessibility (critical)
Same problem, but worse
because the test question
is hidden
No heading
Follows long text
14
Participants with disabilities add perspectives to a
usability problem
Usability &
accessibility(serious)
The general interface is both
usable and accessible, but the
language and terminology in the
content created serious and critical
problems for people who did not
know university terminology.
15
Repeated and inconsistent page titles
make the IA incomprehensible
Usability (annoying)
Page titles repeat at different levels
Links and titles don't always match
Accessibility (serious)
Same problems have more impact
for screen reader or zoom text
users
16
Look at real behavior, not just
coding requirements.
People with different interaction
styles add depth to usability.
17
"The future is already
here...it's just not evenly
distributed."
– William Gibson
18
Whitney Quesenbery
whitneyq@centerforcividesign.org
centerforcivicdesign.org
@whitneyq
Jayne Schurick
jschurick@knowbility.org
knowbility.org
A Web for Everyone
print, MOBI, ePUB, printable PDF, DAISY
rosenfeldmedia.com/books/a-web-for-everyone/

More Related Content

What's hot

Website Accessibility
Website AccessibilityWebsite Accessibility
Website AccessibilityNishan Bose
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityJoseph Dolson
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web DevelopersAlexander Loechel
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibilityYogeshDaphane
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityMedia Access Australia
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplifiedciwstudy
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explainedCraft Design
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web AccessibilityAndrea Dubravsky
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilitySilverTech
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibilityAGILEDROP
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trendsCool Sky
 
Usability Testing Methods
Usability Testing MethodsUsability Testing Methods
Usability Testing Methodsdillarja
 

What's hot (20)

Website Accessibility
Website AccessibilityWebsite Accessibility
Website Accessibility
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
 
UX Usability Heuristics
UX Usability HeuristicsUX Usability Heuristics
UX Usability Heuristics
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
Design for accessibility
Design for accessibilityDesign for accessibility
Design for accessibility
 
Web accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibilityWeb accessibility: it’s everyone’s responsibility
Web accessibility: it’s everyone’s responsibility
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
 
What is Information Architecture?
What is Information Architecture?What is Information Architecture?
What is Information Architecture?
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 
Web content accessibility
Web content accessibilityWeb content accessibility
Web content accessibility
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website Accessibility
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 
Usability Testing Methods
Usability Testing MethodsUsability Testing Methods
Usability Testing Methods
 

Viewers also liked

Accessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiencesAccessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiencesWhitney Quesenbery
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise John Foliot
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Access iQ
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Karen Mardahl
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityInnoTech
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Dylan Wilbanks
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosDennis Lembree
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & AccessibilityChristopher Schmitt
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetDennis Lembree
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript AccessibleDennis Lembree
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?Steven Faulkner
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsKaren Mardahl
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web ApplicationDennis Lembree
 
Responsible Design: Accountable Accessibility
Responsible Design: Accountable AccessibilityResponsible Design: Accountable Accessibility
Responsible Design: Accountable AccessibilityBilly Gregory
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Aaron Gustafson
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricksDirk Ginader
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics Ted Drake
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityDirk Ginader
 
Accessibility in Responsive web design
Accessibility in Responsive web designAccessibility in Responsive web design
Accessibility in Responsive web designNexer Digital
 

Viewers also liked (20)

Accessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiencesAccessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiences
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT Accessibility
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
Responsible Design: Accountable Accessibility
Responsible Design: Accountable AccessibilityResponsible Design: Accountable Accessibility
Responsible Design: Accountable Accessibility
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
AccessU 2011 Keynote
AccessU 2011 KeynoteAccessU 2011 Keynote
AccessU 2011 Keynote
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
 
Accessibility in Responsive web design
Accessibility in Responsive web designAccessibility in Responsive web design
Accessibility in Responsive web design
 

Similar to Usability meets accessibility

Accessibility, Usability and User Centred Design (Usabiltiy)
Accessibility, Usability and User Centred Design (Usabiltiy)Accessibility, Usability and User Centred Design (Usabiltiy)
Accessibility, Usability and User Centred Design (Usabiltiy)David Lamas
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibilityCK Yang
 
Accessibility and the importance of user testing
Accessibility and the importance of user testingAccessibility and the importance of user testing
Accessibility and the importance of user testingRuss Weakley
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
 
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Kate Horowitz
 
BS 8878 and the Holistic Approaches to Web Accessibility
BS 8878 and the Holistic Approaches to Web AccessibilityBS 8878 and the Holistic Approaches to Web Accessibility
BS 8878 and the Holistic Approaches to Web Accessibilitylisbk
 
Usability Presentation
Usability PresentationUsability Presentation
Usability Presentationalex_von
 
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...Sencha
 
Diverse User Experience by Kath Moonan
Diverse User Experience by Kath MoonanDiverse User Experience by Kath Moonan
Diverse User Experience by Kath MoonanCity University London
 
SIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker PresentationsSIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker PresentationsCello Signal
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101Eric Malcolm
 
The Accessible Web
The Accessible WebThe Accessible Web
The Accessible Weblisbk
 
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentAgile Testing Alliance
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesInductive Automation
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise Jacobs
 
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...Scribe
 

Similar to Usability meets accessibility (20)

Why Usability Testing Should be Part of your Accessibility Testing Strategy
Why Usability Testing Should be Part of your Accessibility Testing StrategyWhy Usability Testing Should be Part of your Accessibility Testing Strategy
Why Usability Testing Should be Part of your Accessibility Testing Strategy
 
Accessibility, Usability and User Centred Design (Usabiltiy)
Accessibility, Usability and User Centred Design (Usabiltiy)Accessibility, Usability and User Centred Design (Usabiltiy)
Accessibility, Usability and User Centred Design (Usabiltiy)
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
 
Accessibility and the importance of user testing
Accessibility and the importance of user testingAccessibility and the importance of user testing
Accessibility and the importance of user testing
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
 
Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Usability ≠ Accessibility. An intro to web accessibility for agencies.
Usability ≠ Accessibility. An intro to web accessibility for agencies.
 
BS 8878 and the Holistic Approaches to Web Accessibility
BS 8878 and the Holistic Approaches to Web AccessibilityBS 8878 and the Holistic Approaches to Web Accessibility
BS 8878 and the Holistic Approaches to Web Accessibility
 
Usability Presentation
Usability PresentationUsability Presentation
Usability Presentation
 
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
 
Diverse User Experience by Kath Moonan
Diverse User Experience by Kath MoonanDiverse User Experience by Kath Moonan
Diverse User Experience by Kath Moonan
 
SIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker PresentationsSIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker Presentations
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
 
eLearning & Accessibility
eLearning & AccessibilityeLearning & Accessibility
eLearning & Accessibility
 
The Accessible Web
The Accessible WebThe Accessible Web
The Accessible Web
 
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation SchemesDesign Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...Scribe Academy™  presents - Web Accessibility for Town and Parish Councils by...
Scribe Academy™ presents - Web Accessibility for Town and Parish Councils by...
 
La salle slides
La salle slidesLa salle slides
La salle slides
 

More from Whitney Quesenbery

Designing for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challengeDesigning for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challengeWhitney Quesenbery
 
Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data Whitney Quesenbery
 
Storytelling makes research data come to life
Storytelling makes research data come to lifeStorytelling makes research data come to life
Storytelling makes research data come to lifeWhitney Quesenbery
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightfulWhitney Quesenbery
 
Plain language is accessibility for content
Plain language is accessibility for contentPlain language is accessibility for content
Plain language is accessibility for contentWhitney Quesenbery
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightfulWhitney Quesenbery
 
Accessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesAccessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesWhitney Quesenbery
 
Usability testing for accessible UX
Usability testing for accessible UXUsability testing for accessible UX
Usability testing for accessible UXWhitney Quesenbery
 
Usability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheapUsability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheapWhitney Quesenbery
 
Security insights & issues for poll workers
Security insights & issues for poll workersSecurity insights & issues for poll workers
Security insights & issues for poll workersWhitney Quesenbery
 
Plain language (accessibility for content)
Plain language (accessibility for content)Plain language (accessibility for content)
Plain language (accessibility for content)Whitney Quesenbery
 
The power of stories: creating empathy and connection
The power of stories: creating empathy and connectionThe power of stories: creating empathy and connection
The power of stories: creating empathy and connectionWhitney Quesenbery
 
What you can learn from usability testing
What you can learn from usability testingWhat you can learn from usability testing
What you can learn from usability testingWhitney Quesenbery
 
Using Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPAUsing Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPAWhitney Quesenbery
 

More from Whitney Quesenbery (20)

Designing for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challengeDesigning for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challenge
 
Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data
 
Storytelling makes research data come to life
Storytelling makes research data come to lifeStorytelling makes research data come to life
Storytelling makes research data come to life
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
Accessibility Basics
Accessibility BasicsAccessibility Basics
Accessibility Basics
 
Writing Great Alt Text
Writing Great Alt TextWriting Great Alt Text
Writing Great Alt Text
 
Plain language is accessibility for content
Plain language is accessibility for contentPlain language is accessibility for content
Plain language is accessibility for content
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
Accessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesAccessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiences
 
Usability testing for accessible UX
Usability testing for accessible UXUsability testing for accessible UX
Usability testing for accessible UX
 
Accessibility as innovation
Accessibility as innovationAccessibility as innovation
Accessibility as innovation
 
Usability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheapUsability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheap
 
Security insights & issues for poll workers
Security insights & issues for poll workersSecurity insights & issues for poll workers
Security insights & issues for poll workers
 
Writing Great Alt Text
Writing Great Alt TextWriting Great Alt Text
Writing Great Alt Text
 
Don't Make Me Read
Don't Make Me ReadDon't Make Me Read
Don't Make Me Read
 
Plain language (accessibility for content)
Plain language (accessibility for content)Plain language (accessibility for content)
Plain language (accessibility for content)
 
The power of stories: creating empathy and connection
The power of stories: creating empathy and connectionThe power of stories: creating empathy and connection
The power of stories: creating empathy and connection
 
Personas for Accessible UX
Personas for Accessible UXPersonas for Accessible UX
Personas for Accessible UX
 
What you can learn from usability testing
What you can learn from usability testingWhat you can learn from usability testing
What you can learn from usability testing
 
Using Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPAUsing Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPA
 

Recently uploaded

shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfSumit Lathwal
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130Suhani Kapoor
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一Fi L
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdfSwaraliBorhade
 
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRCall In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRdollysharma2066
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Servicejennyeacort
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 

Recently uploaded (20)

shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
 
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRCall In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 

Usability meets accessibility

  • 1. Where usability meets accessibility Whitney Quesenbery, Center for Civic Design Jayne Schurick, Knowbility
  • 2. 2 Hi! Whitney User research, plain language, usability Found accessibility through work on civic design and elections. Jayne Usability Found accessibility through Phillip Morris.
  • 3. 3 Our starting point: user experience and the user-centered design process 1. Understand people and context of use 2. Identify requirements 3. Explore design solutions 4. Evaluate with users Source: ISO 9241-210 (formerly ISO-13407)
  • 4. 4 Accessibility and usability go hand in hand Usability The effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment. – ISO 9241-11 Accessibility The usability of a product, service, environment or facility by people with the widest range of capabilities – ISO 9241-20
  • 5. 5 Accessibility error priorities 1. Critical An absolute barrier to access 2. Serious A barrier that could cause frustration to most and be a barrier to some, causing a need for work-arounds 3. Moderate A frustration that would not prevent someone from using the site 4. Minor A WCAG error that is unlikely to cause problems - Glenda Sims, Deque Source: 2103 Accessibility Summit: http://environmentsforhumans.com
  • 6. 6 Usability problem priorities 1. Critical A problem that will prevent some users from completing a common task 2. Serious A problem that will slow down some users and force them to find work-arounds 3. Medium A problem that will cause frustration but will not affect task completion 4. Low A quality or cosmetic problem, such as a spelling error, that can damage the credibility of a site. - David Travis, User Focus Source: http://www.userfocus.co.uk/articles/prioritise.html
  • 7. 7 Both evaluate priorities by impact on the user How likely is it that this problem will stop someone from being able to use the site? Priority Label What it covers Critical Barriers that stop someone from using a site or feature successfully Serious Problems that cause frustration, slow someone down, or require work-arounds Annoying (moderate) Things that are frustrating, but won't stop someone from using the site Noisy (minor) Minor issues that might not cause someone a problem, but which damage credibility
  • 8. 8 Examples of how usability and accessibility problems interact These examples are drawn from our experiences doing usability testing. Although we show partial screens from real site, these are simply typical problems, and not unique to those sites. In most cases, these companies are actively working on both usability and accessibility, and some of the issues described in this presentation have already been fixed.
  • 9. 9 Coding errors turn a serious usability problem into a critical accessibility problem Usability problems (serious) • Too many links (281 of them)] • And 45 lists • 98 Poor headings • Overly complex information Accessibility barriers (critical) • Missing semantic coding: • Headings • In page navigation
  • 10. 10 Noisy – easy to find - problems masked a critical one Accessibility (noisy) • Missing alt text • Inconsistent heading coding • Confusing labeling of sections But the real problem was Accessibility (critical) • No way to jump past the infinite ribbon at the top of the page
  • 11. 11 All information and links are “accessible” but rely on visual layout for meaning Accessibility (serious) • The overall site is accessible but • The insert task links rely on visual position to tell you where the task will be inserted. Insert Task Insert Task
  • 12. 12 Long pages make information hard to find (even with headers, without a table of contents Really really long page  Usability & Accessiblity (Annoying to Serious) • On a long page with a lot of detail, users had trouble finding specific information Adding a well-designed "on this page" menu helped everyone decide whether this was the right page
  • 13. 13 The interface is harder than the test Usability (serious) Kids have to know how use the tabs Accessibility (critical) Same problem, but worse because the test question is hidden No heading Follows long text
  • 14. 14 Participants with disabilities add perspectives to a usability problem Usability & accessibility(serious) The general interface is both usable and accessible, but the language and terminology in the content created serious and critical problems for people who did not know university terminology.
  • 15. 15 Repeated and inconsistent page titles make the IA incomprehensible Usability (annoying) Page titles repeat at different levels Links and titles don't always match Accessibility (serious) Same problems have more impact for screen reader or zoom text users
  • 16. 16 Look at real behavior, not just coding requirements. People with different interaction styles add depth to usability.
  • 17. 17 "The future is already here...it's just not evenly distributed." – William Gibson
  • 18. 18 Whitney Quesenbery whitneyq@centerforcividesign.org centerforcivicdesign.org @whitneyq Jayne Schurick jschurick@knowbility.org knowbility.org A Web for Everyone print, MOBI, ePUB, printable PDF, DAISY rosenfeldmedia.com/books/a-web-for-everyone/

Editor's Notes

  1. On This Page links helped everyone find informationEspecially when they were coded consistently on the page in the semantic structure.
  2. How we ran this test:1 group through conventional recruiting and in-person sessions (including one person with low vision, one with dyslexia)1 group recruited from panel of people with disabilties did remote sessions1 group of eyetracking analysed separatelyResult:No accessibility bugs, but different perspectives on the same problems around language and the overall IA of the site.The problems turned out to be less based on ability than on how well participants already understood higher education and university terminology. The information architecture was annoying (and inefficient) for all, and when we tested more comphrensible terminology it helped everyone.