Accessibility Demystified: What You Don't Know May Hurt You

Accessibility Demystified:What you don’t know can hurt you.

#csuc13 @hannon_hill@kelliPhoReal

Goals

● Understand ○ what web accessibility means○ why web accessibility is important

● Learn ○ common web accessibility issues ○ quick remedies

● Gain ○ basic web accessibility principles○ appreciation for web accessibility

#csuc13 @hannon_hill@kelliPhoReal

Web Accessibility Defined

Web Accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities.

- Wikipedia (Updated on 13 Aug 2013)

#csuc13 @hannon_hill@kelliPhoReal

Myths

Web accessibility is:● for people with disabilities.● only affect a small group of people.● hard.

#csuc13 @hannon_hill@kelliPhoReal

Myth #1:

Web accessibility is for people with disabilities.

Truth:

It is about making the web easy to use for:● People with impairments● Different Environments● Mobile Devices● Elderly

#csuc13 @hannon_hill@kelliPhoReal

Myth #2:

Web accessibility only affects a small group of people.

Truth:● 1.2+ billion people use mobile Internet● 80%+ of adults (16-34) use mobile Internet● 77% of people above 65 are online● Add disabilities statistics

#csuc13 @hannon_hill@kelliPhoReal

Myth #3:

Web accessibility is hard.

Truth:

Web accessibility is not hard. It just takes some compassion and consideration.

#csuc13 @hannon_hill@kelliPhoReal

Types of Limitations

● Visual● Hearing● Motor● Cognitive● Seizures

#csuc13 @hannon_hill@kelliPhoReal

Visual

Examples:● Blindness● Poor vision● Color blindness

Assistive Technologies:● Screen readers● Braille displays● Screen magnifiers

#csuc13 @hannon_hill@kelliPhoReal

Hearing

Examples:● Hard of hearing● Deafness

Assistive Technologies:● Hearing aids● Captions● Transcription

#csuc13 @hannon_hill@kelliPhoReal

Motor

Examples:

• Plegia (partial paralysis) or Paralysis

• Loss of limbs

• Arthritis• Parkinson’s Disease

Assistive Technologies:● Pointing and typing

aids● Eyeball tracking

devices● Touch screens

#csuc13 @hannon_hill@kelliPhoReal

Cognitive

Examples:

• Cerebral Palsy

• Autism

• ADHD• Down Syndrome

#csuc13 @hannon_hill@kelliPhoReal

Seizures

Examples:● Partial or generalized

#csuc13 @hannon_hill@kelliPhoReal

Accessibility Statistics

U.S. Census Bureau (2010):

• 56.7 million had a disability

• 38.3 million had a severe disability

#csuc13 @hannon_hill@kelliPhoReal

Accessibility Statistics

Microsoft Research Study (2003):

• Ratio amongst computer userso 1 in 4 has a vision difficultyo 1 in 4 has dexterity difficultyo 1 in 5 has a hearing difficulty

#csuc13 @hannon_hill@kelliPhoReal

Accessibility Statistics

What does this translate to in numbers?● Visual Difficulty or Impairment

○ Mild: 21.9 million○ Severe: 11.1 million

● Dexterity Difficulty or Impairment○ Mild: 24.4 million○ Severe: 6.8 million

● Hearing Difficulty or Impairment○ Mild: 24 million○ Severe: 2.5 million

#csuc13 @hannon_hill@kelliPhoReal

Additional Facts:

• 43% of US adults with disabilities uses the Internet

• 15% of the world's population have some form of disability

• Disability rates are increasing

#csuc13 @hannon_hill@kelliPhoReal

What’s the problem?

● Techniques● Designs● Implementation

#csuc13 @hannon_hill@kelliPhoReal

Why should you care?

#csuc13 @hannon_hill@kelliPhoReal

It’s RIGHT!

● Ethically● Morally

#csuc13 @hannon_hill@kelliPhoReal

It’s SMART!

• Economicallyo Larger audienceo Lower site maintenance costo Reduce legal risks/costs

• Designwiseo Good design principleso Responsive design and emerging technologieso Search engine friendly

#csuc13 @hannon_hill@kelliPhoReal

It’s the Law!

• Americans with Disabilities Act

• Rehabilitation Act o Section 504o Section 508

• Telecommunications Acto Section 255

#csuc13 @hannon_hill@kelliPhoReal

It’s the Law!

• Canadian Human Rights

• Ontarians with Disabilities Act

• Common Look and Feel Standards

• Bill 118 2004

#csuc13 @hannon_hill@kelliPhoReal

Case StudiesLitigations and Settlements

Target

vs. National Federation of the Blind● Lack of alternative texts on product images● $6 million settlement● Additional cost litigation costs

#csuc13 @hannon_hill@kelliPhoReal

Florida State University

vs. National Federation of the Blind● Lack of accessible technology resulted to

incompletable academic courses● $75,000 settlement per student (2)● Commits to continued effort to come to

standards

#csuc13 @hannon_hill@kelliPhoReal

So many more!

• Penn State University

• Arizona State University

• California Law Schools

• Disney

• Major League of Baseball (MLB)

• Bank of America

• Netflix

• Amazon

#csuc13 @hannon_hill@kelliPhoReal

Where to start?

1. Identify and remedy potential issues

2. Develop implementation plan

3. Educate and maintain

#csuc13 @hannon_hill@kelliPhoReal

Common Issues

Alternative Text Attributes

#csuc13 @hannon_hill@kelliPhoReal

Audio and Visual Media

#csuc13 @hannon_hill@kelliPhoReal

Color Contrast

#csuc13 @hannon_hill@kelliPhoReal

Common Problems

● Heading elements○ Order heading elements properly

● Link texts○ Unique○ Descriptive○ Avoid “Click Here”

● Tab navigation○ Skip to main content

● JavaScript ○ Use event handlers appropriately

#csuc13 @hannon_hill@kelliPhoReal

Common Problems

● Forms○ All fields are properly labeled○ Recoverable from errors

● Flashing/blinking text or images○ Don’t

● HTML without CSS/JavaScript○ Ensure that site functions properly and content is still

accessible without CSS/JavaScript

#csuc13 @hannon_hill@kelliPhoReal

Resources

• Screen reader emulators:o Firefox: FANGSo Chrome: ChromeVoxo Built-in screen reader (Mac OS X)

• Text-browsero Lynx

• Free automated validatorso WAVE (WebAIM)

#csuc13 @hannon_hill@kelliPhoReal

More on Web Accessibility

Rick Hill of UC Davis● “Creating More Accessible Content”● 3:15pm - 4:00pm● More technical, in-depth

#csuc13 @hannon_hill@kelliPhoReal

Questions?Q&A