97
User-Centered Design and ADA Compliance for Websites and Digital Systems Sarah 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

User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

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

Page 2: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Importance of Your Digital Presence

• Websites are a critical communication tool used for many

purposes

• First impression of your website forms within 50 milliseconds

Page 3: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Design as a User-Centered Process

Page 4: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

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.

Page 5: User-Centered Design and ADA Compliance for Websites and ...€¦ · • 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

Page 6: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Michigan DHHS – One-on-One Testing

Page 7: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Michigan Dept. of Treasury – Taxes (Before)

Page 8: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Tax Website Focus Groups

• Focus groups

– General taxpayers

– Tax professionals

• Concerns

– Navigation

– Searching for forms

– Terminology

– Layout

Page 9: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Organizing Tax Website Content (Online)

Page 10: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Tax Website Validation Task (Online)

Page 11: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Michigan Dept. of Treasury – Taxes (After)

Page 12: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Design Best Practices

• User needs User

requirements

• Perform high-level

website reviews

• Web Content

Accessibility Guidelines

2.0 AA

Page 13: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Accessibility – What is it? Why important?

Page 14: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Document Accessibility

• Documents within websites and/or sent out

electronically must be accessible, too

• Publications, Press Releases, etc.

• Tutorials

– http://webaccess.msu.edu

Page 15: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Closed Captions

Page 16: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Screen Readers

https://youtu.be/c0nvdiRdehw?t=53s© The Tommy Edison Experience

Page 17: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Visual Impairments

Page 18: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Hearing Impairments

Page 19: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Physical Impairments

Page 20: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Cognitive and Reading Impairments

Page 21: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

What Needs to Be Made

Accessible

Page 22: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Websites

Page 23: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Mobile Apps

Page 24: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Software

Page 25: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Documents

Page 26: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Videos

Page 27: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Digital Signs and Kiosks

Page 28: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Voting Systems

Page 29: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Laws, Rules, and Standards

Page 30: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Americans with Disabilities Act (1990)

Page 31: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Global Standards

Page 32: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Section 508 (Revised)

Page 33: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

US Department of Justice

Page 34: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Courts

Page 35: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

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/

Page 36: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

WCAG 2.0 / Section 508

Page 37: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

WCAG 2.0 / Section 508 & ADA

Page 38: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Help America Vote Act (2002) &

Voluntary Voting System Guidelines

Page 39: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

WCAG 2.0 / Section 508

Page 40: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Document Structure

• Heading 1

•Heading 2

•Heading 2

•Heading 3

•Heading 2

Page 41: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Keyboard Support

Page 42: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Navigation

Page 43: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Forms and Data Submission

Page 44: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

"logo.png"

"Big Ten Network"

Images

Page 45: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Audio and Video Media

Page 46: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Color and Visual Characteristics

Page 47: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Custom Elements and Dynamic Content

Page 48: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Evaluating Accessibility

Page 49: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

The Question

Page 50: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

What About Automated Scanners?

Page 51: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

No!

Page 52: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Sorry!

Page 53: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Not Just Code

Page 54: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Human Investigator

Page 55: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Human Judgment

Page 56: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

WCAG 2.0 AA Requirements

Page 57: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Human Judgment Necessary

Page 58: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

What Can Automated Tools Do?

Warn you when

some things

might be wrong

Page 59: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

What Else Can They Do?

Process

Management

Page 60: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

What Can't They Do?

Tell you that

anything is correct(other than Parsing)

Page 61: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Manual Evaluation

Page 62: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Expert Reviewers

Page 63: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Keyboard

Page 64: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Screen Readers

Page 65: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Color Contrast

Page 66: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Code Inspection

Page 67: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Mobile Testing

Page 68: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

MSU Evaluation Protocol

Page 69: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Tier 1

Page 70: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Policies

Page 71: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Policy

Page 72: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Training

Page 73: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Procurement

Page 74: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Auditing

Page 75: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Exceptions

Page 76: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Complaints

Page 77: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Timeline

Page 78: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Fixing After Development,

Purchase, or Deployment

Page 79: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Why Not Wait and Fix Things Later?

Page 80: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Time

Page 81: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Money

Page 82: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Document Issues

Page 83: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Determine Causes

Page 84: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Attempt to Fix

Page 85: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Total Loss

Page 86: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Research Alternatives

Page 87: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Start from Scratch

Page 88: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Expensive!

Page 89: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

"Easy" Fixes?

Page 90: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Overwhelming

Page 91: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Worst-Case Scenario

Page 92: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Working with External Vendors

Page 93: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Budgeting

Page 94: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Evaluation Timeline

Page 95: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

Contracts

Page 96: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

RFP Development

Page 97: User-Centered Design and ADA Compliance for Websites and ...€¦ · • Usability is focused on making your website and content as user-friendly and easy to navigate as possible

© 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

[email protected]

[email protected]

usability.msu.edu