user-centered design and ada compliance for websites and ...€¦ · • usability is focused on...
TRANSCRIPT
User-Centered Design and ADA Compliance for Websites and Digital SystemsSarah J. Swierenga, Director
Graham L. Pierce, Assistant Director
MSU Usability/Accessibility Research and Consulting
University Outreach and Engagement
Michigan State University
Michigan Municipal Executives 2018 Winter Institute
February 1, 2018
Importance of Your Digital Presence
• Websites are a critical communication tool used for many
purposes
• First impression of your website forms within 50 milliseconds
Design as a User-Centered Process
Usability – What is it? Why does it matter?
• Usability is focused on making your website and content as
user-friendly and easy to navigate as possible.
Understanding Citizens as Website Users
• Feedback from citizens
– Focus groups
•Discover user needs
•Explore design
concepts
– One-on-one testing
– Website organization
Michigan DHHS – One-on-One Testing
Michigan Dept. of Treasury – Taxes (Before)
Tax Website Focus Groups
• Focus groups
– General taxpayers
– Tax professionals
• Concerns
– Navigation
– Searching for forms
– Terminology
– Layout
Organizing Tax Website Content (Online)
Tax Website Validation Task (Online)
Michigan Dept. of Treasury – Taxes (After)
Design Best Practices
• User needs User
requirements
• Perform high-level
website reviews
• Web Content
Accessibility Guidelines
2.0 AA
Accessibility – What is it? Why important?
Document Accessibility
• Documents within websites and/or sent out
electronically must be accessible, too
• Publications, Press Releases, etc.
• Tutorials
– http://webaccess.msu.edu
Closed Captions
Screen Readers
https://youtu.be/c0nvdiRdehw?t=53s© The Tommy Edison Experience
Visual Impairments
Hearing Impairments
Physical Impairments
Cognitive and Reading Impairments
What Needs to Be Made
Accessible
Websites
Mobile Apps
Software
Documents
Videos
Digital Signs and Kiosks
Voting Systems
Laws, Rules, and Standards
Americans with Disabilities Act (1990)
Global Standards
Section 508 (Revised)
US Department of Justice
Courts
Recent Legal SettlementsGovernment•Cedar Rapids, Iowa (2015)
•Chaves County, New Mexico (2015)
•Champaign County, Illinois (2015)
•DeKalb, Illinois, (2015)
• Fallon, Nevada (2015)
•Galveston County, Texas (2015)
• Humboldt County, California (2016)
• Isle of Palms, South Carolina (2015)
• Lumpkin County, Georgia (2015)
•Madison County, New York (2015)
•McLennan County, Texas (2015)
•Merced County, California (2015)
•Milwaukee, Wisconsin (2016)
•Nueces County, Texas (2015)
•Orange County Clerk of Courts (2014)
• Pennington County, South Dakota (2015)
• Parowan, Utah (2015)
• Robeson County, North Carolina (2015)
• Ruidoso, New Mexico (2015)
• Vero Beach, Florida (2015)
• Yakima County, Washington (2015)
Education•Atlantic Cape Community College
(2015)
•Argyle Independent School District (2015)
• Bellingham School District (2016)
•Chandler Unified School District (2014)
•Davidson Academy of Nevada (2016)
• Eduprize Charter School (2015)
• edX (2015)
• Florida State University (2014)
•Granite School District (2016)
•Guam Department of Education (2016)
• Higley Unified School District (2015)
• Juneau Alaska School District (2016)
• Law School Admission Council (2011)
• Louisiana Tech University (2013)
•Montana School for the Deaf and Blind (2016)
•Nevada Department of Education (2016)
•Oregon Department of Education (2016)
• Penn State University (2010)
• Seattle School District Consent Decree (2015)
• Santa Fe Public Schools (2016)
• University of Cincinnati (2014)
• University of Montana (2012)
• University of Phoenix (2015)
• Youngstown State University (2014)
•Washington Office of Superintendent of Public Instruction Superintendent (2016)
•Washoe County School District (2016)
Nonprofit•American Cancer Society (2011)
•Massachusetts Eye and Ear Infirmary (2017)
•National Museum of Crime and Punishment (2015)
• San Francisco Federal Credit Union (2016)
Corporate• Bank of America (2015)
•Carnival Corporation (2015)
•Charles Schwab (2012)
•Colorado Bag & Baggage - 2017
• E*Trade (2016)
•Greyhound Lines, Inc. (2016)
• H&R Block Consent Decree (2014)
• Hilton Consent Decree (2010)
•Major League Baseball (2012)
•Motley Fool, LLC - 2017
• Peapod (2014)
• Rite Aid (2008)
• Safeway Web Accessibility (2013)
• Scribd (2015)
• Sweetgreen (2017)
•Weight Watchers (2013)
•Winn-Dixie (2017)http://www.d.umn.edu/~lcarlson/wcagwg/settlements/
WCAG 2.0 / Section 508
WCAG 2.0 / Section 508 & ADA
Help America Vote Act (2002) &
Voluntary Voting System Guidelines
WCAG 2.0 / Section 508
Document Structure
• Heading 1
•Heading 2
•Heading 2
•Heading 3
•Heading 2
Keyboard Support
Navigation
Forms and Data Submission
"logo.png"
"Big Ten Network"
Images
Audio and Video Media
Color and Visual Characteristics
Custom Elements and Dynamic Content
Evaluating Accessibility
The Question
What About Automated Scanners?
No!
Sorry!
Not Just Code
Human Investigator
Human Judgment
WCAG 2.0 AA Requirements
Human Judgment Necessary
What Can Automated Tools Do?
Warn you when
some things
might be wrong
What Else Can They Do?
Process
Management
What Can't They Do?
Tell you that
anything is correct(other than Parsing)
Manual Evaluation
Expert Reviewers
Keyboard
Screen Readers
Color Contrast
Code Inspection
Mobile Testing
MSU Evaluation Protocol
Tier 1
Policies
Policy
Training
Procurement
Auditing
Exceptions
Complaints
Timeline
Fixing After Development,
Purchase, or Deployment
Why Not Wait and Fix Things Later?
Time
Money
Document Issues
Determine Causes
Attempt to Fix
Total Loss
Research Alternatives
Start from Scratch
Expensive!
"Easy" Fixes?
Overwhelming
Worst-Case Scenario
Working with External Vendors
Budgeting
Evaluation Timeline
Contracts
RFP Development
© Michigan State University Board of Trustees
University Outreach and EngagementMichigan State University
Contact InformationSarah J. Swierenga and Graham L. Pierce
Usability/Accessibility Research and Consulting
219 S. Harrison Road, Room 93
East Lansing, MI 48824
(517) 353-8977
usability.msu.edu