SlideShare a Scribd company logo
1 of 40
Download to read offline
We can review accessibility at any stage
Contract/SOW Business
Requirements
Mockups &
Wireframes
Visual Design Copy deck Development
QA User testing
In Production
(audits,
complaints)
Purpose of reviewing mockups & wireframes
• Identify defects
– Will need to modify interface
• Identify requirements to avoid defects
• Reduce overall effort
– Less defects
– Quicker QA
– Quicker fixes
– Less last-minute panic
ACCESSIBILITY ISSUES ARE
PREDICTABLE
Across your accessibility testing, What
are the issues you almost always see?
The usual suspects
Alt text
missing or
inaccurate
Headings
missing or
inaccurate
Form labels
Error
presentment
where, when, how
Roles
tab set, button,
toggle
States
expanded/collapsed
selected, disabled
Audio, video,
animation
cannot be
stopped
Notifications &
updating
content
WHAT IS A WIREFRAME OR MOCKUP?
Before the design or the code
A website wireframe, also known as a page schematicor screen
blueprint, is a visual guide that represents the skeletal framework of a
website... The wireframe depicts the page layout or arrangement of the website’s
content, including interface elements and navigational systems,
and how they work together.
The wireframe usually lacks typographic style, color,
or graphics, since the main focus lies in functionality, behavior, and
priority of content.
In other words, it focuses on what a screen does, not
what it looks like.
Wireframes can be pencil drawings or sketches on a
whiteboard, or they can be produced by means of a broad array of free
or commercial softwareapplications. en.wikipedia.org/wiki/Website_wireframe
A blueprint or schematic
Annotations
# Accessibility
1.
2.
2.
3.
4.
5.
6.
7.
8.
9.
4 types of annotations
• 3 relate to predicting & avoiding issues
• 1 relates to identifying actual issues that
require a change
Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple:
tabs, expand/collapse
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple:
tabs, expand/collapse
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
# Accessibility
1. Needs alt text (e.g. "back")
2. No alt text needed for any
of the icons to the left of
inputs on this screen
3. No alt text needed for icon
4. No alt text needed
5. Needs hidden/off-screen
label (business to provide)
6. Needs hidden/off-screen
label (business to provide)
7. Needs hidden/off-screen
label (business to provide)
8. Add/subtract icons need alt
text
9. Needs hidden/off-screen
label (business to provide)
Off-screen & onscreen content
• Alt text for icons, images, charts
• Hidden label text
• New or revised onscreen content such as
expected data values, instructions or
required field messaging
• This content will go into the copy deck for
translation and approvals
• Keep in mind the wireframe is not a copy
deck and most of the words are placeholders
Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple:
tabs, expand/collapse
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
# Accessibility
1. Button
2. No alt text needed for any
of the icons to the left of
inputs on this screen
3. For screen reader whole
row should act as single
element. No alt text needed
for icon
7. After screen reader user
updates value it needs to be
announced
8. Buttons. Needs to convey if
in disabled state
10. Button
11. Heading
12. Is role a radio or a tab? Must
convey selected/checked
Identify known accessibility
development patterns
• Headings & levels
• Buttons vs. links
• Data tables
• Disabled elements
• Tabs, Radio buttons, checkboxes
• Collapsed/expanded content
• Live regions (updates w/o screen load)
• All the things WCAG says must be
programatically determined
Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple:
tabs, expand/collapse
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
# Accessibility
1. Calendar will need special
attention from development
team.
Complex interactions or elements
• Calendars
• Maps
• Carousel
• Audio/video player
• Custom camera
• Timers
Content
alt text, labels,
instructions
(off-screen & onscreen)
Development
patterns
Known or simple:
tabs, expand/collapse
Complex
development tasks
(do-able)
Not accessible as-is
We need to talk:
interface changes needed
(or an exemption)
# Accessibility
1. No mechanism for captions
1
# Accessibility
1. We need to talk
2. No really. If you can make this
accessible I will buy you all lunch
1 2
Not accessible in current state
• No expected data format (if triggers error)
• Missing instructions, required fields
• Media or carousel that cannot be paused
(no controls)
• Video (synchronized) without "CC" option,
unless open captioned
• No transcript link
• Complex interactive charts
• Complex maps
• Complex games
Identify issues and options, don't write solutions
Annotation tips What to avoid writing
Needs alt text What the alt text should be
Needs a hidden label What the label should say
Needs consistent heading Should be <h1>
This is a tabset, a button How to code it
Missing X functionality
(e.g. pause/play)
How to code it
Pattern complex, needs
discussion with developers
Write a mini-tutorial in the
wireframe
X element not accessible Use Y instead of X
Assume readers have some
accessibility experience
Teaching Accessibility 101 in
the annotations
What you cannot review in a wireframe
A classic wireframe does not include:
• visual design decisions
(such as colours, fonts, positioning, images)
• technical decisions
• Final "copy".
All text is subject to change. Labels and instructions,
headings cannot be reviewed with much certainty.
Checks related to design, code, copy need to
happen later in the project.
LET'S REVIEW A WIREFRAME!
Content
alt text, labels,
instructions
(off-screen &
onscreen)
Development
patterns
Known or simple:
tabs,
expand/collapse
Complex
development tasks
(do-able)
Not accessible as-is
Content
alt text, labels,
instructions
(off-screen &
onscreen)
Development
patterns
Known or simple:
tabs,
expand/collapse
Complex
development tasks
(do-able)
Not accessible as-is
Summary of findings for exercise
# Accessibility
1. Needs alt text
2. Needs alt text
3. Needs alt text
4. Heading
5. Heading
6. Heading
7. Needs dynamic alt text depending
on weather. This will need special
attention from development team
8. How the 10 days of icons reads
must be logical. Solution will
need discussion
9. Graph. Will need to discuss
approaches with development
Goals of a mockup/wireframe review
Project thinks
about accessibility
early
Catch potential
issues before
development
A head start on
content
Identify
accessibility
development
patterns
Identify complex
accessibility
interactions
Better
requirements
for designers,
developers, QA
No need to be perfect.
Anything you can prevent now is better than later!
QUESTIONS & COMMENTS
Early prevention of accessibility issues with mockup & wireframe reviews

More Related Content

What's hot

Writing test cases from user stories and acceptance criteria
Writing test cases from user stories and acceptance criteria Writing test cases from user stories and acceptance criteria
Writing test cases from user stories and acceptance criteria An Nguyen
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplifiedciwstudy
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"ecentricarts
 
Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityRachel Cherry
 
Automated-Accessibility-Testing
Automated-Accessibility-TestingAutomated-Accessibility-Testing
Automated-Accessibility-TestingManoj Kumar Kumar
 
Capturing Measurable Non Functional Requirements
Capturing Measurable Non Functional RequirementsCapturing Measurable Non Functional Requirements
Capturing Measurable Non Functional RequirementsShehzad Lakdawala
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsMedia Access Australia
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsUXPA International
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web AccessibilityMoin Shaikh
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web AccessibilitySteven Swafford
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POURAlena Huang
 
Writing for web accessibility - May 2021
Writing for web accessibility - May 2021Writing for web accessibility - May 2021
Writing for web accessibility - May 2021Content Strategy Inc.
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilitySilverTech
 
ISTQB Test level, Test type
ISTQB Test level, Test typeISTQB Test level, Test type
ISTQB Test level, Test typeHoangThiHien1
 
Introducing WCAG 2.2
Introducing WCAG 2.2Introducing WCAG 2.2
Introducing WCAG 2.2Bill Tyler
 
A11y user stories csun 2018
A11y user stories csun 2018A11y user stories csun 2018
A11y user stories csun 2018Intopia
 
Test Strategy and Planning
Test Strategy and PlanningTest Strategy and Planning
Test Strategy and PlanningSachin-QA
 

What's hot (20)

Writing test cases from user stories and acceptance criteria
Writing test cases from user stories and acceptance criteria Writing test cases from user stories and acceptance criteria
Writing test cases from user stories and acceptance criteria
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"
 
Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Understanding and Supporting Web Accessibility
Understanding and Supporting Web AccessibilityUnderstanding and Supporting Web Accessibility
Understanding and Supporting Web Accessibility
 
Automated-Accessibility-Testing
Automated-Accessibility-TestingAutomated-Accessibility-Testing
Automated-Accessibility-Testing
 
Capturing Measurable Non Functional Requirements
Capturing Measurable Non Functional RequirementsCapturing Measurable Non Functional Requirements
Capturing Measurable Non Functional Requirements
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick Wins
 
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility StandardsWCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
WCAG 2.1: What You Need to Know About the Most Recent Accessibility Standards
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web Accessibility
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POUR
 
Writing for web accessibility - May 2021
Writing for web accessibility - May 2021Writing for web accessibility - May 2021
Writing for web accessibility - May 2021
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
ADA Compliance and Website Accessibility
ADA Compliance and Website AccessibilityADA Compliance and Website Accessibility
ADA Compliance and Website Accessibility
 
ISTQB Test level, Test type
ISTQB Test level, Test typeISTQB Test level, Test type
ISTQB Test level, Test type
 
Introducing WCAG 2.2
Introducing WCAG 2.2Introducing WCAG 2.2
Introducing WCAG 2.2
 
A11y user stories csun 2018
A11y user stories csun 2018A11y user stories csun 2018
A11y user stories csun 2018
 
Test Strategy and Planning
Test Strategy and PlanningTest Strategy and Planning
Test Strategy and Planning
 

Viewers also liked

Accessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developersAccessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developersAidan Tierney
 
Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...
Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...
Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...November Samnee
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsAidan Tierney
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleTed Drake
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Ted Drake
 
Accessibility Support Baseline: Balancing User Needs Against Test Effort
Accessibility Support Baseline: Balancing User Needs Against Test EffortAccessibility Support Baseline: Balancing User Needs Against Test Effort
Accessibility Support Baseline: Balancing User Needs Against Test EffortAidan Tierney
 
2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color ContrastCrystal Baker
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationSean Kelly
 
CSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or MeasureCSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or MeasureTed Gies
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Bill Tyler
 
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)Lainey Feingold
 
A Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignA Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignAnders Skifte
 
ARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web FormsARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web FormsAidan Tierney
 
iOS Accessibility Testing with VoiceOver - A Crash Course
iOS Accessibility Testing with VoiceOver - A Crash CourseiOS Accessibility Testing with VoiceOver - A Crash Course
iOS Accessibility Testing with VoiceOver - A Crash CourseAidan Tierney
 
iOS VoiceOver Testing Techniques & Procedures for Absolute Beginners
iOS VoiceOver Testing Techniques & Procedures for Absolute BeginnersiOS VoiceOver Testing Techniques & Procedures for Absolute Beginners
iOS VoiceOver Testing Techniques & Procedures for Absolute BeginnersAidan Tierney
 
2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in AccessibilityCrystal Baker
 
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAGCSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAGMary Jo Mueller
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Adrian Roselli
 
Designing Accessible Experiences
Designing Accessible ExperiencesDesigning Accessible Experiences
Designing Accessible ExperiencesAlison Walden
 
Integrating Accessibility Into The Design Process
Integrating Accessibility Into The Design ProcessIntegrating Accessibility Into The Design Process
Integrating Accessibility Into The Design ProcessRuth Ellison
 

Viewers also liked (20)

Accessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developersAccessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developers
 
Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...
Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...
Designing with Accessibility in Mind: How IA and Visual Design Decisions Impa...
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & Trends
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessible
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
 
Accessibility Support Baseline: Balancing User Needs Against Test Effort
Accessibility Support Baseline: Balancing User Needs Against Test EffortAccessibility Support Baseline: Balancing User Needs Against Test Effort
Accessibility Support Baseline: Balancing User Needs Against Test Effort
 
2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color Contrast
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and Prioritization
 
CSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or MeasureCSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or Measure
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
 
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
 
A Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignA Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal Design
 
ARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web FormsARIA Techniques for Accessible Web Forms
ARIA Techniques for Accessible Web Forms
 
iOS Accessibility Testing with VoiceOver - A Crash Course
iOS Accessibility Testing with VoiceOver - A Crash CourseiOS Accessibility Testing with VoiceOver - A Crash Course
iOS Accessibility Testing with VoiceOver - A Crash Course
 
iOS VoiceOver Testing Techniques & Procedures for Absolute Beginners
iOS VoiceOver Testing Techniques & Procedures for Absolute BeginnersiOS VoiceOver Testing Techniques & Procedures for Absolute Beginners
iOS VoiceOver Testing Techniques & Procedures for Absolute Beginners
 
2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility
 
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAGCSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)
 
Designing Accessible Experiences
Designing Accessible ExperiencesDesigning Accessible Experiences
Designing Accessible Experiences
 
Integrating Accessibility Into The Design Process
Integrating Accessibility Into The Design ProcessIntegrating Accessibility Into The Design Process
Integrating Accessibility Into The Design Process
 

Similar to Early prevention of accessibility issues with mockup & wireframe reviews

Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Carrie Anton
 
Beyond Errors: Messages for the Complete Enterprise Applications User Experience
Beyond Errors: Messages for the Complete Enterprise Applications User ExperienceBeyond Errors: Messages for the Complete Enterprise Applications User Experience
Beyond Errors: Messages for the Complete Enterprise Applications User ExperienceUltan O'Broin
 
Drupal Camp Victoria
Drupal Camp VictoriaDrupal Camp Victoria
Drupal Camp VictoriaImage X Media
 
Alt tab - better apex tabs
Alt tab - better apex tabsAlt tab - better apex tabs
Alt tab - better apex tabsEnkitec
 
Accessibility and universal usability
Accessibility and universal usabilityAccessibility and universal usability
Accessibility and universal usabilitySarah Hudson
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hatNeil Perlin
 
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
 
Dtp, web design & presentation software revision
Dtp, web design & presentation software revisionDtp, web design & presentation software revision
Dtp, web design & presentation software revisionMrJRogers
 
Atlanta Drupal Users Group - October 2015 - Success of the GT Redesign
Atlanta Drupal Users Group - October 2015 - Success of the GT RedesignAtlanta Drupal Users Group - October 2015 - Success of the GT Redesign
Atlanta Drupal Users Group - October 2015 - Success of the GT RedesignEric Sembrat
 
Improving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationImproving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationGloria Antonelli
 
Successfully Implement Responsive Design Behavior with Adobe Experience Manager
Successfully Implement Responsive Design Behavior with Adobe Experience ManagerSuccessfully Implement Responsive Design Behavior with Adobe Experience Manager
Successfully Implement Responsive Design Behavior with Adobe Experience ManagerPerficient, Inc.
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...Patrick Lauke
 
Building products people actually can use – why all developers need to unders...
Building products people actually can use – why all developers need to unders...Building products people actually can use – why all developers need to unders...
Building products people actually can use – why all developers need to unders...Cyber-Duck
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web AccessibilityHagai Asaban
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceMike Kornacki
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsHenny Swan
 
Overcome-3-common-aem-delivery-challenges
Overcome-3-common-aem-delivery-challengesOvercome-3-common-aem-delivery-challenges
Overcome-3-common-aem-delivery-challengesiCiDIGITAL
 
Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager
Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager
Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager Mark Kelley
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfDark179280
 

Similar to Early prevention of accessibility issues with mockup & wireframe reviews (20)

Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
 
Beyond Errors: Messages for the Complete Enterprise Applications User Experience
Beyond Errors: Messages for the Complete Enterprise Applications User ExperienceBeyond Errors: Messages for the Complete Enterprise Applications User Experience
Beyond Errors: Messages for the Complete Enterprise Applications User Experience
 
Drupal Camp Victoria
Drupal Camp VictoriaDrupal Camp Victoria
Drupal Camp Victoria
 
Alt tab - better apex tabs
Alt tab - better apex tabsAlt tab - better apex tabs
Alt tab - better apex tabs
 
Accessibility and universal usability
Accessibility and universal usabilityAccessibility and universal usability
Accessibility and universal usability
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
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 - ...
 
Dtp, web design & presentation software revision
Dtp, web design & presentation software revisionDtp, web design & presentation software revision
Dtp, web design & presentation software revision
 
Atlanta Drupal Users Group - October 2015 - Success of the GT Redesign
Atlanta Drupal Users Group - October 2015 - Success of the GT RedesignAtlanta Drupal Users Group - October 2015 - Success of the GT Redesign
Atlanta Drupal Users Group - October 2015 - Success of the GT Redesign
 
Improving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationImproving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support Documentation
 
Successfully Implement Responsive Design Behavior with Adobe Experience Manager
Successfully Implement Responsive Design Behavior with Adobe Experience ManagerSuccessfully Implement Responsive Design Behavior with Adobe Experience Manager
Successfully Implement Responsive Design Behavior with Adobe Experience Manager
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
Building products people actually can use – why all developers need to unders...
Building products people actually can use – why all developers need to unders...Building products people actually can use – why all developers need to unders...
Building products people actually can use – why all developers need to unders...
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User Experience
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tips
 
Overcome-3-common-aem-delivery-challenges
Overcome-3-common-aem-delivery-challengesOvercome-3-common-aem-delivery-challenges
Overcome-3-common-aem-delivery-challenges
 
Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager
Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager
Case Study: Time Warner Cable's Formula for Maximizing Adobe Experience Manager
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdf
 

Recently uploaded

Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationDianaGray10
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...stockholm university
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerAnchore
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 

Recently uploaded (20)

Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automation
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey Hightower
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 

Early prevention of accessibility issues with mockup & wireframe reviews

  • 1.
  • 2. We can review accessibility at any stage Contract/SOW Business Requirements Mockups & Wireframes Visual Design Copy deck Development QA User testing In Production (audits, complaints)
  • 3. Purpose of reviewing mockups & wireframes • Identify defects – Will need to modify interface • Identify requirements to avoid defects • Reduce overall effort – Less defects – Quicker QA – Quicker fixes – Less last-minute panic
  • 5. Across your accessibility testing, What are the issues you almost always see?
  • 6. The usual suspects Alt text missing or inaccurate Headings missing or inaccurate Form labels Error presentment where, when, how Roles tab set, button, toggle States expanded/collapsed selected, disabled Audio, video, animation cannot be stopped Notifications & updating content
  • 7. WHAT IS A WIREFRAME OR MOCKUP?
  • 8.
  • 9. Before the design or the code
  • 10. A website wireframe, also known as a page schematicor screen blueprint, is a visual guide that represents the skeletal framework of a website... The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial softwareapplications. en.wikipedia.org/wiki/Website_wireframe
  • 11. A blueprint or schematic
  • 12.
  • 14. 4 types of annotations • 3 relate to predicting & avoiding issues • 1 relates to identifying actual issues that require a change
  • 15. Content alt text, labels, instructions (off-screen & onscreen) Development patterns Known or simple: tabs, expand/collapse Complex development tasks (do-able) Not accessible as-is We need to talk: interface changes needed (or an exemption)
  • 16. Content alt text, labels, instructions (off-screen & onscreen) Development patterns Known or simple: tabs, expand/collapse Complex development tasks (do-able) Not accessible as-is We need to talk: interface changes needed (or an exemption)
  • 17. # Accessibility 1. Needs alt text (e.g. "back") 2. No alt text needed for any of the icons to the left of inputs on this screen 3. No alt text needed for icon 4. No alt text needed 5. Needs hidden/off-screen label (business to provide) 6. Needs hidden/off-screen label (business to provide) 7. Needs hidden/off-screen label (business to provide) 8. Add/subtract icons need alt text 9. Needs hidden/off-screen label (business to provide)
  • 18. Off-screen & onscreen content • Alt text for icons, images, charts • Hidden label text • New or revised onscreen content such as expected data values, instructions or required field messaging • This content will go into the copy deck for translation and approvals • Keep in mind the wireframe is not a copy deck and most of the words are placeholders
  • 19. Content alt text, labels, instructions (off-screen & onscreen) Development patterns Known or simple: tabs, expand/collapse Complex development tasks (do-able) Not accessible as-is We need to talk: interface changes needed (or an exemption)
  • 20. # Accessibility 1. Button 2. No alt text needed for any of the icons to the left of inputs on this screen 3. For screen reader whole row should act as single element. No alt text needed for icon 7. After screen reader user updates value it needs to be announced 8. Buttons. Needs to convey if in disabled state 10. Button 11. Heading 12. Is role a radio or a tab? Must convey selected/checked
  • 21. Identify known accessibility development patterns • Headings & levels • Buttons vs. links • Data tables • Disabled elements • Tabs, Radio buttons, checkboxes • Collapsed/expanded content • Live regions (updates w/o screen load) • All the things WCAG says must be programatically determined
  • 22. Content alt text, labels, instructions (off-screen & onscreen) Development patterns Known or simple: tabs, expand/collapse Complex development tasks (do-able) Not accessible as-is We need to talk: interface changes needed (or an exemption)
  • 23. # Accessibility 1. Calendar will need special attention from development team.
  • 24. Complex interactions or elements • Calendars • Maps • Carousel • Audio/video player • Custom camera • Timers
  • 25.
  • 26. Content alt text, labels, instructions (off-screen & onscreen) Development patterns Known or simple: tabs, expand/collapse Complex development tasks (do-able) Not accessible as-is We need to talk: interface changes needed (or an exemption)
  • 27. # Accessibility 1. No mechanism for captions 1
  • 28.
  • 29. # Accessibility 1. We need to talk 2. No really. If you can make this accessible I will buy you all lunch 1 2
  • 30. Not accessible in current state • No expected data format (if triggers error) • Missing instructions, required fields • Media or carousel that cannot be paused (no controls) • Video (synchronized) without "CC" option, unless open captioned • No transcript link • Complex interactive charts • Complex maps • Complex games
  • 31. Identify issues and options, don't write solutions Annotation tips What to avoid writing Needs alt text What the alt text should be Needs a hidden label What the label should say Needs consistent heading Should be <h1> This is a tabset, a button How to code it Missing X functionality (e.g. pause/play) How to code it Pattern complex, needs discussion with developers Write a mini-tutorial in the wireframe X element not accessible Use Y instead of X Assume readers have some accessibility experience Teaching Accessibility 101 in the annotations
  • 32. What you cannot review in a wireframe A classic wireframe does not include: • visual design decisions (such as colours, fonts, positioning, images) • technical decisions • Final "copy". All text is subject to change. Labels and instructions, headings cannot be reviewed with much certainty. Checks related to design, code, copy need to happen later in the project.
  • 33. LET'S REVIEW A WIREFRAME!
  • 34.
  • 35. Content alt text, labels, instructions (off-screen & onscreen) Development patterns Known or simple: tabs, expand/collapse Complex development tasks (do-able) Not accessible as-is
  • 36. Content alt text, labels, instructions (off-screen & onscreen) Development patterns Known or simple: tabs, expand/collapse Complex development tasks (do-able) Not accessible as-is
  • 37. Summary of findings for exercise # Accessibility 1. Needs alt text 2. Needs alt text 3. Needs alt text 4. Heading 5. Heading 6. Heading 7. Needs dynamic alt text depending on weather. This will need special attention from development team 8. How the 10 days of icons reads must be logical. Solution will need discussion 9. Graph. Will need to discuss approaches with development
  • 38. Goals of a mockup/wireframe review Project thinks about accessibility early Catch potential issues before development A head start on content Identify accessibility development patterns Identify complex accessibility interactions Better requirements for designers, developers, QA No need to be perfect. Anything you can prevent now is better than later!