SlideShare a Scribd company logo
1 of 64
Download to read offline
A Principles-Based
Approach to Web
   Accessibility
        Jared Smith
     http://webaim.org
Test Questions

1. True, False, or I don’t know
   My web content is currently
   accessible.
2. The five main categories of disabilities
   affected by Internet accessibility
   barriers are...
3. Web accessibility is easiest to implement
 A. As the culminating step after user tests
 B. As an integral part of the design process
 C. By creating an alternative version
 D. After receiving a complaint by a person
    with a disability
4. Which of the following is cited most
   regarding inaccessible web sites?
 A. I wasn’t aware of the problem
 B. Accessibility will hinder the look/feel/
    functionality
 C. I didn’t know how to make it accessible
 D. We don’t have the budget to make it
    accessible
5. True or False
  Accessible web design benefits only
  a small percentage of the
  population.
Accessibility
  “Development of information
    systems flexible enough to
 accommodate the needs of the
     broadest range of users...
  regardless of age or disability”

   8.5% of the population has a
disability that affects computer use
The Evolution of Web
Accessibility Guidelines
• WCAG 1.0 (1999)
• Section 508 of the
  Rehabilitation Act (2001)
• WCAG 2.0 (2008)
WCAG 1.0

•   Finalized in 1999
•   Checkpoint driven
•   Priority 1, 2, and 3 (Level A, AA, and
    AAA)
•   Specific to HTML
Section 508
• Legalistic - easy to verify compliance
• Applies to federal government
• Very limited in scope. The de facto
  standard.
• guidelines.
  Many states have adopted the

• Currently being updated
WCAG 2.0

•   Finalized December 2008
•   Principles Based
•   Technology Agnostic
•   Maintains Levels (A, AA, and AAA)
Americans with
      Disabilities Act

• Pre-dates the web
• “Places of public accommodation”
• Currentthe web to expand ADA to
  include
           proposal
Your site can be
 compliant, yet
  inaccessible
Your site can be
technically accessible, yet
 functionally inaccessible
Web Accessibility




  ... it’s not rocket surgery!
... but don’t bite off more than you can chew.
P
O
U
R
P erceivable
O perable
U nderstandable
R obust
Ensure POUR content
across disability types
Vision - blind, low-vision, color-
blind
Deaf and Hard-of-hearing
Motor
Cognitive
Seizure
P erceivable
O perable
U nderstandable
R obust
Perceivable
Perceivable -
Auditory Disabilities

•Captions for video & live audio
• Text transcripts for all audio
 content
Perceivable - Visual
        Disabilities
• Web pages are linear
• Use meaningful links. Avoid “click here”.
• Alternative text for non-text elements
• Page is readable and functional at a minimum
  of 2X zoom and 2X font size
Perceivable - Visual
        Disabilities
• Associate text labels with form elements
• Associate data cells to row/column headers
• Sufficient contrast - http://webaim.org/
  resources/contrastchecker/
• Ensure that meaning is not conveyed with
  color alone
You’ve won the lottery! Press the GREEN
button to accept your prize and the RED
           button to decline.
You’ve won the lottery! Press the GREEN
button to accept your prize and the RED
           button to decline.
The green mushrooms listed here are
OK to eat. The red mushrooms will kill
                 you.
 •   Amanita
 •   Chanterelle
 •   Porcini
 •   Shitake
 •   Tylopilus


                 http://colorfilter.wickline.org/
The green mushrooms listed here are
OK to eat. The red mushrooms will kill
                 you.
 •   Amanita
 •   Chanterelle
 •   Porcini
 •   Shitake
 •   Tylopilus


                 http://colorfilter.wickline.org/
vs.

Vitally Important Text
P erceivable
O perable
U nderstandable
R obust
Operable
Who does this affect?

• Motor disabilities
 • Fine motor control and use of a mouse
 • Repetition and fatigue
 • Control over timing or moving elements
Be careful with flashing/
        strobing images
• More than 3 times in any one-second
 period
• Size, brightness, and red threshold
• Annoying rule
• WARNING: This page can cause seizures
 - fletchowns.net/what.html
Operable
• Ensuring keyboard accessibility
• Don’t remove focus indicators
• Ensure links are clearly distinguishable
• Logical reading/navigation order
• Consistent navigation elements
Operable
•   Allow user to skip over repetitive and/
    or lengthy lists of links
•   Error-prevention and recovery
    mechanisms
• Give user the control over time-
    sensitive changes
Secret of Everlasting
     Happiness
Secret of Everlasting
         Happiness
     Please finish reading this text
     – it will give you the secret to
  everlasting happiness. The secret
is simple, all you need to do is to stop
 worrying about the key to everlasting
  happiness and enjoy the moment.
Secret of Everlasting
     Happiness

 Sorry! Time’s up!
Better luck next time!
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
Separate content/functionality
     from visual design
Jared Smith - Introduction to Web Accessibility
Web Developer Toolbar for Firefox
Jared Smith - Introduction to Web Accessibility
Jared Smith - Introduction to Web Accessibility
FAIL!
Can you have too much accessibility?
Direct users to content
P erceivable
O perable
U nderstandable
R obust
Understandable
Who does this affect?
• Cognitive disabilities
 • Largest disability group. Larger than
   all the others put together.
• Everyone!
• Because users vary greatly, we’ll focus
  on generic recommendations
Understandable
• Be careful with movement and
  other distracters
• Semantic organization (headings,
  lists, etc.)
• Be consistent.
• Strive for brevity. Use the simplest
 language possible.
Understandable
• Focus the user’s attention
• “Chunk” and/or simplify content
• Balance cognitive load vs.
 funtionality
Understandable
Understandable
P erceivable
O perable
U nderstandable
R obust
Robust
Robust
Robust
Robust
Robust
P erceivable
O perable
U nderstandable
R obust
wave.webaim.org
Thank You!
       Jared Smith
    http://webaim.org
       Web based forums
      E-mail discussion list
 Tutorials, articles, and resources
                 Blog
  Accessibility Reference Guide

More Related Content

Similar to Jared Smith - Introduction to Web Accessibility

Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and ProfitMike Wilcox
 
People First Accessibility
People First AccessibilityPeople First Accessibility
People First AccessibilityTrisha Salas
 
Internet, accessibility and word processing
Internet, accessibility and word processingInternet, accessibility and word processing
Internet, accessibility and word processingLinda Wallin
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Adrian Roselli
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxGurzu Inc
 
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
 
ACE! Conference: Selfish accessibility
ACE! Conference: Selfish accessibilityACE! Conference: Selfish accessibility
ACE! Conference: Selfish accessibilityAdrian Roselli
 
Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusAdrian Roselli
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Designcolinbdclark
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Adrian Roselli
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonRachel Cherry
 
Web For All
Web For AllWeb For All
Web For AllISOCHK
 
Selfish Accessibility: Presented at Google
Selfish Accessibility: Presented at GoogleSelfish Accessibility: Presented at Google
Selfish Accessibility: Presented at GoogleAdrian Roselli
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Adrian Roselli
 

Similar to Jared Smith - Introduction to Web Accessibility (20)

Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
 
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
 
People First Accessibility
People First AccessibilityPeople First Accessibility
People First Accessibility
 
Accessibility 101
Accessibility 101Accessibility 101
Accessibility 101
 
Internet, accessibility and word processing
Internet, accessibility and word processingInternet, accessibility and word processing
Internet, accessibility and word processing
 
Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017Selfish Accessibility: MinneWebCon 2017
Selfish Accessibility: MinneWebCon 2017
 
Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptx
 
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.
 
ACE! Conference: Selfish accessibility
ACE! Conference: Selfish accessibilityACE! Conference: Selfish accessibility
ACE! Conference: Selfish accessibility
 
Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF Vilnius
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
Accessibility Is Usability
Accessibility Is UsabilityAccessibility Is Usability
Accessibility Is Usability
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
 
Demystifying digital accessibility webinar
Demystifying digital accessibility webinarDemystifying digital accessibility webinar
Demystifying digital accessibility webinar
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
 
Web For All
Web For AllWeb For All
Web For All
 
Selfish Accessibility: Presented at Google
Selfish Accessibility: Presented at GoogleSelfish Accessibility: Presented at Google
Selfish Accessibility: Presented at Google
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Gavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility CentreGavin Evans, Digital Accessibility Centre
Gavin Evans, Digital Accessibility Centre
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
 

More from Plain Talk 2015

Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...
Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...
Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...Plain Talk 2015
 
Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...
Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...
Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...Plain Talk 2015
 
Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...
Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...
Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...Plain Talk 2015
 
Kel Smith - Pixels, Plows & Partnerships: Designing for Food Deserts
Kel Smith - Pixels, Plows & Partnerships: Designing for Food DesertsKel Smith - Pixels, Plows & Partnerships: Designing for Food Deserts
Kel Smith - Pixels, Plows & Partnerships: Designing for Food DesertsPlain Talk 2015
 
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...Plain Talk 2015
 
Nancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say It
Nancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say ItNancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say It
Nancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say ItPlain Talk 2015
 
Lynn Quincy - Health Insurance Literacy
Lynn Quincy - Health Insurance LiteracyLynn Quincy - Health Insurance Literacy
Lynn Quincy - Health Insurance LiteracyPlain Talk 2015
 
Kye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge Divides
Kye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge DividesKye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge Divides
Kye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge DividesPlain Talk 2015
 
Kelly Pick - Teach Back: Make Sure They Understand
Kelly Pick - Teach Back: Make Sure They UnderstandKelly Pick - Teach Back: Make Sure They Understand
Kelly Pick - Teach Back: Make Sure They UnderstandPlain Talk 2015
 
Josiah Fisk - What Were They Expecting?
Josiah Fisk - What Were They Expecting?Josiah Fisk - What Were They Expecting?
Josiah Fisk - What Were They Expecting?Plain Talk 2015
 
Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...
Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...
Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...Plain Talk 2015
 
Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...
Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...
Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...Plain Talk 2015
 
Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...
Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...
Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...Plain Talk 2015
 
Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...
Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...
Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...Plain Talk 2015
 
Cindy Brach - Becoming a Health Literate Organization
Cindy Brach - Becoming a Health Literate OrganizationCindy Brach - Becoming a Health Literate Organization
Cindy Brach - Becoming a Health Literate OrganizationPlain Talk 2015
 
Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...
Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...
Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...Plain Talk 2015
 
Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...
Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...
Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...Plain Talk 2015
 
Amy Lynn Smith - Giving High-Tech Communications High-Touch Impact
Amy Lynn Smith - Giving High-Tech Communications High-Touch ImpactAmy Lynn Smith - Giving High-Tech Communications High-Touch Impact
Amy Lynn Smith - Giving High-Tech Communications High-Touch ImpactPlain Talk 2015
 
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...Plain Talk 2015
 
Susan Weinschenk - How to get people to do stuff
Susan Weinschenk - How to get people to do stuffSusan Weinschenk - How to get people to do stuff
Susan Weinschenk - How to get people to do stuffPlain Talk 2015
 

More from Plain Talk 2015 (20)

Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...
Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...
Susan Dentzer - "Plain Talk" with U.S. Consumers and Patients About the Tripl...
 
Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...
Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...
Steve Sparks - "Let's Talk about the Flu": Communicating Health Prevention to...
 
Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...
Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...
Sherri Loeb - "The Impossible Dream": Safe, High-Quality, High-Reliability an...
 
Kel Smith - Pixels, Plows & Partnerships: Designing for Food Deserts
Kel Smith - Pixels, Plows & Partnerships: Designing for Food DesertsKel Smith - Pixels, Plows & Partnerships: Designing for Food Deserts
Kel Smith - Pixels, Plows & Partnerships: Designing for Food Deserts
 
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
Sandy Williams Hilfiker - Involving People with Limited Literacy Skills in Co...
 
Nancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say It
Nancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say ItNancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say It
Nancy Vera - Nonverbal Communication: It's Not What You Say, It's How You Say It
 
Lynn Quincy - Health Insurance Literacy
Lynn Quincy - Health Insurance LiteracyLynn Quincy - Health Insurance Literacy
Lynn Quincy - Health Insurance Literacy
 
Kye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge Divides
Kye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge DividesKye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge Divides
Kye Tiernan - Multi-Channel Marketing: Crossing Media to Bridge Divides
 
Kelly Pick - Teach Back: Make Sure They Understand
Kelly Pick - Teach Back: Make Sure They UnderstandKelly Pick - Teach Back: Make Sure They Understand
Kelly Pick - Teach Back: Make Sure They Understand
 
Josiah Fisk - What Were They Expecting?
Josiah Fisk - What Were They Expecting?Josiah Fisk - What Were They Expecting?
Josiah Fisk - What Were They Expecting?
 
Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...
Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...
Jon Rubin & Katherine Spivey - User-Useful Government Websites: Intersection ...
 
Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...
Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...
Hector Ortiz - Creating Health Equity by Implementing Culturally and Linguist...
 
Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...
Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...
Florencia Nochetto - 25,000 Words and More: Applying the President's Digital ...
 
Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...
Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...
Claire Foley & Tracy Torchetti - Editing Health Information for a Limited Eng...
 
Cindy Brach - Becoming a Health Literate Organization
Cindy Brach - Becoming a Health Literate OrganizationCindy Brach - Becoming a Health Literate Organization
Cindy Brach - Becoming a Health Literate Organization
 
Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...
Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...
Chris Trudeau - The Patient, the Provider, and the Form? Re-Imagining Informe...
 
Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...
Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...
Anthony Roberts Jr. & Meico Whitlock - Using Twitter Town Halls as a Tool to ...
 
Amy Lynn Smith - Giving High-Tech Communications High-Touch Impact
Amy Lynn Smith - Giving High-Tech Communications High-Touch ImpactAmy Lynn Smith - Giving High-Tech Communications High-Touch Impact
Amy Lynn Smith - Giving High-Tech Communications High-Touch Impact
 
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
 
Susan Weinschenk - How to get people to do stuff
Susan Weinschenk - How to get people to do stuffSusan Weinschenk - How to get people to do stuff
Susan Weinschenk - How to get people to do stuff
 

Recently uploaded

Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxvidhisharma994099
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTDR. SNEHA NAIR
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Dr. Asif Anas
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdfJayanti Pande
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceApostolos Syropoulos
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlDr. Bruce A. Johnson
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptxmary850239
 

Recently uploaded (20)

Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptx
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial Intelligence
 
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic SupportMarch 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting Bl
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx
 

Jared Smith - Introduction to Web Accessibility

  • 1. A Principles-Based Approach to Web Accessibility Jared Smith http://webaim.org
  • 2. Test Questions 1. True, False, or I don’t know My web content is currently accessible.
  • 3. 2. The five main categories of disabilities affected by Internet accessibility barriers are...
  • 4. 3. Web accessibility is easiest to implement A. As the culminating step after user tests B. As an integral part of the design process C. By creating an alternative version D. After receiving a complaint by a person with a disability
  • 5. 4. Which of the following is cited most regarding inaccessible web sites? A. I wasn’t aware of the problem B. Accessibility will hinder the look/feel/ functionality C. I didn’t know how to make it accessible D. We don’t have the budget to make it accessible
  • 6. 5. True or False Accessible web design benefits only a small percentage of the population.
  • 7. Accessibility “Development of information systems flexible enough to accommodate the needs of the broadest range of users... regardless of age or disability” 8.5% of the population has a disability that affects computer use
  • 8. The Evolution of Web Accessibility Guidelines • WCAG 1.0 (1999) • Section 508 of the Rehabilitation Act (2001) • WCAG 2.0 (2008)
  • 9. WCAG 1.0 • Finalized in 1999 • Checkpoint driven • Priority 1, 2, and 3 (Level A, AA, and AAA) • Specific to HTML
  • 10. Section 508 • Legalistic - easy to verify compliance • Applies to federal government • Very limited in scope. The de facto standard. • guidelines. Many states have adopted the • Currently being updated
  • 11. WCAG 2.0 • Finalized December 2008 • Principles Based • Technology Agnostic • Maintains Levels (A, AA, and AAA)
  • 12. Americans with Disabilities Act • Pre-dates the web • “Places of public accommodation” • Currentthe web to expand ADA to include proposal
  • 13. Your site can be compliant, yet inaccessible
  • 14. Your site can be technically accessible, yet functionally inaccessible
  • 15. Web Accessibility ... it’s not rocket surgery!
  • 16. ... but don’t bite off more than you can chew.
  • 18. P erceivable O perable U nderstandable R obust
  • 19. Ensure POUR content across disability types Vision - blind, low-vision, color- blind Deaf and Hard-of-hearing Motor Cognitive Seizure
  • 20. P erceivable O perable U nderstandable R obust
  • 22. Perceivable - Auditory Disabilities •Captions for video & live audio • Text transcripts for all audio content
  • 23. Perceivable - Visual Disabilities • Web pages are linear • Use meaningful links. Avoid “click here”. • Alternative text for non-text elements • Page is readable and functional at a minimum of 2X zoom and 2X font size
  • 24. Perceivable - Visual Disabilities • Associate text labels with form elements • Associate data cells to row/column headers • Sufficient contrast - http://webaim.org/ resources/contrastchecker/ • Ensure that meaning is not conveyed with color alone
  • 25. You’ve won the lottery! Press the GREEN button to accept your prize and the RED button to decline.
  • 26. You’ve won the lottery! Press the GREEN button to accept your prize and the RED button to decline.
  • 27. The green mushrooms listed here are OK to eat. The red mushrooms will kill you. • Amanita • Chanterelle • Porcini • Shitake • Tylopilus http://colorfilter.wickline.org/
  • 28. The green mushrooms listed here are OK to eat. The red mushrooms will kill you. • Amanita • Chanterelle • Porcini • Shitake • Tylopilus http://colorfilter.wickline.org/
  • 30. P erceivable O perable U nderstandable R obust
  • 32. Who does this affect? • Motor disabilities • Fine motor control and use of a mouse • Repetition and fatigue • Control over timing or moving elements
  • 33. Be careful with flashing/ strobing images • More than 3 times in any one-second period • Size, brightness, and red threshold • Annoying rule • WARNING: This page can cause seizures - fletchowns.net/what.html
  • 34. Operable • Ensuring keyboard accessibility • Don’t remove focus indicators • Ensure links are clearly distinguishable • Logical reading/navigation order • Consistent navigation elements
  • 35. Operable • Allow user to skip over repetitive and/ or lengthy lists of links • Error-prevention and recovery mechanisms • Give user the control over time- sensitive changes
  • 37. Secret of Everlasting Happiness Please finish reading this text – it will give you the secret to everlasting happiness. The secret is simple, all you need to do is to stop worrying about the key to everlasting happiness and enjoy the moment.
  • 38. Secret of Everlasting Happiness Sorry! Time’s up! Better luck next time!
  • 41. Separate content/functionality from visual design
  • 43. Web Developer Toolbar for Firefox
  • 46. FAIL!
  • 47. Can you have too much accessibility?
  • 48. Direct users to content
  • 49. P erceivable O perable U nderstandable R obust
  • 51. Who does this affect? • Cognitive disabilities • Largest disability group. Larger than all the others put together. • Everyone! • Because users vary greatly, we’ll focus on generic recommendations
  • 52. Understandable • Be careful with movement and other distracters • Semantic organization (headings, lists, etc.) • Be consistent. • Strive for brevity. Use the simplest language possible.
  • 53. Understandable • Focus the user’s attention • “Chunk” and/or simplify content • Balance cognitive load vs. funtionality
  • 56. P erceivable O perable U nderstandable R obust
  • 62. P erceivable O perable U nderstandable R obust
  • 64. Thank You! Jared Smith http://webaim.org Web based forums E-mail discussion list Tutorials, articles, and resources Blog Accessibility Reference Guide