SlideShare a Scribd company logo
1 of 13
Intro to Accessible Web
Design
CODE LOUISVILLE FRONT-END WEB DESIGN
MAY 2020 SESSION
Beth Gray
What is
Accessibility?
Accessibility – Accessibility is defined as a "word
used to describe whether a product can be used by
people of all abilities." - Microsoft Accessibility
Fundamentals
Disability – Disability is defined as "a mismatch in
interaction between the features of a person's
body and the features of the environment in which
they live.“- Microsoft Accessibility Fundamentals
Why is it important?
Missing a lot of
customers.
According to the
CDC, around 26% of
Americans have some
form of disability. So
around 1 in 4.
Possible lawsuits
According to
3PlayMedia,
Accessibility lawsuits
increased by 181%
between 2017 and 2018
alone.
The costs of the lawsuits
can be staggering, both
in terms of financial cost
and loss of public image.
Helps eveny one
Many Accessibility
improvements end up
helping a wider
audience than they were
originally designed for.
Improve access to
information.
Because it is the right
thing to do.
Not doing so is:
• Discrimination
• Pushes people into
poverty
• Can increase spread
of misinformation.
Doing so:
• Improves peoples’
ability to be active
participants in society
Accessibility Categories
Hearing Vision Mobility Comprehension Technological
Access
Moment of
Panic
Types
Temporary Permanent Situational
Time
Visible Invisible
Visibility
What can
you do?
Meet standards: ADA, WCAG
(AA), Section 508, etc.
Follow best practices: W3C, PEP
Respectful, people-first
language
Accessibility Standards
WCAG ADA
Section 508
Compliance
WCAG
 Web Content Accessibility Guidelines (WCAG)
 Separated into 3 levels: A, AA, and AAA
 Separated into 4 basic principles: Perceivable, Operable, Understandable, and
Robust. These are often shortened to POUR.
 Created by the World Wide Web Consortium (W3C). Serves as the basis for most
development and Accessibility standards worldwide.
ADA
 “The Americans with Disabilities Act (ADA) prohibits discrimination against people with
disabilities in several areas, including employment, transportation, public accommodations,
communications and access to state and local government’ programs and services. As it
relates to employment, Title I of the ADA protects the rights of both employees and job
seekers. The ADA also establishes requirements for telecommunications relay services. Title
IV, which is regulated by the Federal Communications Commission (FCC), also requires
closed captioning of federally funded public service announcements.” – US Department of
Labor
 Signed into law July 26, 1990 by George H.W. Bush.
 Meant for general overall public Accessibility access.
 Has some sections for more specific areas like employment.
Section 508
 “Section 508 of the Rehabilitation Act (29 U.S.C. § 794d) requires federal agencies
to develop, procure, maintain or use Information and Communications
Technology (ICT) that is accessible to people with disabilities – regardless of
whether or not they work for the federal government.” – EPA.gov
 Section508 generally applies to groups providing government funded services,
government contractors, and government departments.
 Also often paired with Section 255 of the Communications Act.
Accessibility Tools and Resources
Tools and Resources
 Google Accessibility
 WebAIM offers a lot of tools and documentation for testing Accessibility including a browser extension.
 Accessibility Insights is a tool set offered by Microsoft for testing Accessibility in Android apps, Websites, and
Windows applications.
 There are also built in Accessibility checkers in the Office 365 web and desktop applications, which offer similar
functionality.
 Deque’s Axe tool, which is what the Accessibility tools in Google Chrome are built from.
 CorgiDev Accessibility Resources and Information
 American Printing House for the Blind
 Microsoft’s Accessibility Fundamentals Course
 Microsoft Accessibility (@MSFTENable) on Twitter
American
Printing
House for
the Blind
Imagination
Library and
Braille Tales

More Related Content

What's hot

Onepercentevent Cocreation Nairobi Microjustice
Onepercentevent Cocreation Nairobi MicrojusticeOnepercentevent Cocreation Nairobi Microjustice
Onepercentevent Cocreation Nairobi Microjustice
Andy Mutua
 
Biometrics Today And Into The Future (2006)
Biometrics Today And Into The Future (2006)Biometrics Today And Into The Future (2006)
Biometrics Today And Into The Future (2006)
Duane Blackburn
 
Political Communication In Cmc
Political Communication In CmcPolitical Communication In Cmc
Political Communication In Cmc
aazim javed
 
Right to be forgotten presentation
Right to be forgotten presentationRight to be forgotten presentation
Right to be forgotten presentation
reporter1120
 
Lesson 9 interactive media (1)
Lesson 9  interactive media (1)Lesson 9  interactive media (1)
Lesson 9 interactive media (1)
Helen Bruce
 

What's hot (19)

Connecting Justice - social media and citizen engagement
Connecting Justice - social media and citizen engagementConnecting Justice - social media and citizen engagement
Connecting Justice - social media and citizen engagement
 
London a11y meetup abi james
London a11y meetup abi james London a11y meetup abi james
London a11y meetup abi james
 
Onepercentevent Cocreation Nairobi Microjustice
Onepercentevent Cocreation Nairobi MicrojusticeOnepercentevent Cocreation Nairobi Microjustice
Onepercentevent Cocreation Nairobi Microjustice
 
2012: NJ GMIS: The Double Edge Sword of the Social Network
2012: NJ GMIS: The Double Edge Sword of the Social Network2012: NJ GMIS: The Double Edge Sword of the Social Network
2012: NJ GMIS: The Double Edge Sword of the Social Network
 
Open Data - context of Open Government in Edmonton
Open Data - context of Open Government in EdmontonOpen Data - context of Open Government in Edmonton
Open Data - context of Open Government in Edmonton
 
Social media and Security: How to Ensure Safe Social Networking
Social media and Security: How to Ensure Safe Social NetworkingSocial media and Security: How to Ensure Safe Social Networking
Social media and Security: How to Ensure Safe Social Networking
 
Biometrics Today And Into The Future (2006)
Biometrics Today And Into The Future (2006)Biometrics Today And Into The Future (2006)
Biometrics Today And Into The Future (2006)
 
Political Communication In Cmc
Political Communication In CmcPolitical Communication In Cmc
Political Communication In Cmc
 
Adler nurani
Adler nurani Adler nurani
Adler nurani
 
Offdata: a prosumer law agency to govern big data in the public interest
Offdata:  a prosumer law agency to govern big data in the public interestOffdata:  a prosumer law agency to govern big data in the public interest
Offdata: a prosumer law agency to govern big data in the public interest
 
Dccsmf oct11-ml
Dccsmf oct11-mlDccsmf oct11-ml
Dccsmf oct11-ml
 
Socialize Conference Toronto 2012 - FaceBook Marketing:
Socialize Conference Toronto 2012 - FaceBook Marketing: Socialize Conference Toronto 2012 - FaceBook Marketing:
Socialize Conference Toronto 2012 - FaceBook Marketing:
 
Digital Divide vs Digital Inequality
Digital Divide vs Digital InequalityDigital Divide vs Digital Inequality
Digital Divide vs Digital Inequality
 
Learning to crowd-surf: Gov 2.0 and community engagement
Learning to crowd-surf: Gov 2.0 and community engagementLearning to crowd-surf: Gov 2.0 and community engagement
Learning to crowd-surf: Gov 2.0 and community engagement
 
NCSBN Keynote Presentation Alan W Silberberg
NCSBN Keynote Presentation Alan W SilberbergNCSBN Keynote Presentation Alan W Silberberg
NCSBN Keynote Presentation Alan W Silberberg
 
Right to be forgotten presentation
Right to be forgotten presentationRight to be forgotten presentation
Right to be forgotten presentation
 
5th Estate Talk for eGov-CeDem-ePart 2018 Conference
5th Estate Talk for eGov-CeDem-ePart 2018 Conference5th Estate Talk for eGov-CeDem-ePart 2018 Conference
5th Estate Talk for eGov-CeDem-ePart 2018 Conference
 
Lesson 9 interactive media (1)
Lesson 9  interactive media (1)Lesson 9  interactive media (1)
Lesson 9 interactive media (1)
 
Accessibility
AccessibilityAccessibility
Accessibility
 

Similar to Intro to Accessible Web Design

User1st - Corporate Overview (1)
User1st - Corporate Overview (1)User1st - Corporate Overview (1)
User1st - Corporate Overview (1)
Katya Smith
 
Presentation Y U N L I
Presentation  Y U N  L IPresentation  Y U N  L I
Presentation Y U N L I
YunLi
 
Presentation Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
YunLi
 
Presentation Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
YunLi
 
PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...
PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...
PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...
Nick Norman
 
The Doorman Project 2.0
The Doorman Project 2.0The Doorman Project 2.0
The Doorman Project 2.0
Doug Loo
 

Similar to Intro to Accessible Web Design (20)

Anonos NTIA Comment Letter letter on ''Big Data'' Developments and How They I...
Anonos NTIA Comment Letter letter on ''Big Data'' Developments and How They I...Anonos NTIA Comment Letter letter on ''Big Data'' Developments and How They I...
Anonos NTIA Comment Letter letter on ''Big Data'' Developments and How They I...
 
Digital Divide And Accessibility
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And Accessibility
 
Digital Divide And Accessibility
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And Accessibility
 
User1st - Corporate Overview (1)
User1st - Corporate Overview (1)User1st - Corporate Overview (1)
User1st - Corporate Overview (1)
 
Unlocking Accessibility: 508 Remediation Services.pdf
Unlocking Accessibility: 508 Remediation Services.pdfUnlocking Accessibility: 508 Remediation Services.pdf
Unlocking Accessibility: 508 Remediation Services.pdf
 
Why it's so hard for users to control their data
Why it's so hard for users to control their dataWhy it's so hard for users to control their data
Why it's so hard for users to control their data
 
CS4001 Final Ethics Paper
CS4001 Final Ethics PaperCS4001 Final Ethics Paper
CS4001 Final Ethics Paper
 
Government Policy Needs in a Web 2.0 World
Government Policy Needs in a Web 2.0 WorldGovernment Policy Needs in a Web 2.0 World
Government Policy Needs in a Web 2.0 World
 
Presentation Y U N L I
Presentation  Y U N  L IPresentation  Y U N  L I
Presentation Y U N L I
 
Presentation Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
 
Presentation Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
 
Presentation Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
 
PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...
PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...
PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1...
 
Social Context of Computing
Social Context of ComputingSocial Context of Computing
Social Context of Computing
 
The Doorman Project 2.0
The Doorman Project 2.0The Doorman Project 2.0
The Doorman Project 2.0
 
Anonos FTC Comment Letter Big Data: A Tool for Inclusion or Exclusion
Anonos  FTC Comment Letter Big Data: A Tool for Inclusion or ExclusionAnonos  FTC Comment Letter Big Data: A Tool for Inclusion or Exclusion
Anonos FTC Comment Letter Big Data: A Tool for Inclusion or Exclusion
 
digital identity 2.0: how technology is transforming behaviours and raising c...
digital identity 2.0: how technology is transforming behaviours and raising c...digital identity 2.0: how technology is transforming behaviours and raising c...
digital identity 2.0: how technology is transforming behaviours and raising c...
 
Cyber In-Security II: Closing the Federal Gap
Cyber In-Security II: Closing the Federal GapCyber In-Security II: Closing the Federal Gap
Cyber In-Security II: Closing the Federal Gap
 
Accessibility 101 for Financial Institutions
Accessibility 101 for Financial Institutions Accessibility 101 for Financial Institutions
Accessibility 101 for Financial Institutions
 
Hayes Privacy And Social Media Paper, October 29, 2010
Hayes   Privacy And Social Media Paper, October 29, 2010Hayes   Privacy And Social Media Paper, October 29, 2010
Hayes Privacy And Social Media Paper, October 29, 2010
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 

Intro to Accessible Web Design

  • 1. Intro to Accessible Web Design CODE LOUISVILLE FRONT-END WEB DESIGN MAY 2020 SESSION Beth Gray
  • 2. What is Accessibility? Accessibility – Accessibility is defined as a "word used to describe whether a product can be used by people of all abilities." - Microsoft Accessibility Fundamentals Disability – Disability is defined as "a mismatch in interaction between the features of a person's body and the features of the environment in which they live.“- Microsoft Accessibility Fundamentals
  • 3. Why is it important? Missing a lot of customers. According to the CDC, around 26% of Americans have some form of disability. So around 1 in 4. Possible lawsuits According to 3PlayMedia, Accessibility lawsuits increased by 181% between 2017 and 2018 alone. The costs of the lawsuits can be staggering, both in terms of financial cost and loss of public image. Helps eveny one Many Accessibility improvements end up helping a wider audience than they were originally designed for. Improve access to information. Because it is the right thing to do. Not doing so is: • Discrimination • Pushes people into poverty • Can increase spread of misinformation. Doing so: • Improves peoples’ ability to be active participants in society
  • 4. Accessibility Categories Hearing Vision Mobility Comprehension Technological Access Moment of Panic Types Temporary Permanent Situational Time Visible Invisible Visibility
  • 5. What can you do? Meet standards: ADA, WCAG (AA), Section 508, etc. Follow best practices: W3C, PEP Respectful, people-first language
  • 7. WCAG  Web Content Accessibility Guidelines (WCAG)  Separated into 3 levels: A, AA, and AAA  Separated into 4 basic principles: Perceivable, Operable, Understandable, and Robust. These are often shortened to POUR.  Created by the World Wide Web Consortium (W3C). Serves as the basis for most development and Accessibility standards worldwide.
  • 8. ADA  “The Americans with Disabilities Act (ADA) prohibits discrimination against people with disabilities in several areas, including employment, transportation, public accommodations, communications and access to state and local government’ programs and services. As it relates to employment, Title I of the ADA protects the rights of both employees and job seekers. The ADA also establishes requirements for telecommunications relay services. Title IV, which is regulated by the Federal Communications Commission (FCC), also requires closed captioning of federally funded public service announcements.” – US Department of Labor  Signed into law July 26, 1990 by George H.W. Bush.  Meant for general overall public Accessibility access.  Has some sections for more specific areas like employment.
  • 9. Section 508  “Section 508 of the Rehabilitation Act (29 U.S.C. § 794d) requires federal agencies to develop, procure, maintain or use Information and Communications Technology (ICT) that is accessible to people with disabilities – regardless of whether or not they work for the federal government.” – EPA.gov  Section508 generally applies to groups providing government funded services, government contractors, and government departments.  Also often paired with Section 255 of the Communications Act.
  • 11. Tools and Resources  Google Accessibility  WebAIM offers a lot of tools and documentation for testing Accessibility including a browser extension.  Accessibility Insights is a tool set offered by Microsoft for testing Accessibility in Android apps, Websites, and Windows applications.  There are also built in Accessibility checkers in the Office 365 web and desktop applications, which offer similar functionality.  Deque’s Axe tool, which is what the Accessibility tools in Google Chrome are built from.  CorgiDev Accessibility Resources and Information  American Printing House for the Blind  Microsoft’s Accessibility Fundamentals Course  Microsoft Accessibility (@MSFTENable) on Twitter

Editor's Notes

  1. “A disability is any condition of the body or mind (impairment) that makes it more difficult for the person with the condition to do certain activities (activity limitation) and interact with the world around them (participation restrictions).” – CDC AT is any item, piece of equipment, software program, or product that is used to increase, maintain, or improve the functional capabilities of people with disabilities (ATIA)* - Microsoft
  2. Sources for statistics include: CDC - https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html Kentucky Specific: https://www.cdc.gov/ncbddd/disabilityandhealth/impacts/pdfs/Kentucky_Disability.pdf Essential Accessibility - https://www.essentialaccessibility.com/blog/web-accessibility-lawsuits/ 3Play Media - https://www.3playmedia.com/2019/06/12/2018sweb-accessibility-lawsuits/#:~:text=The%20Truth%20Behind%202018%27s%20Massive%20Increase%20in%20Web%20Accessibility%20Lawsuits,-June%2012%2C%202019&text=From%202017%20to%202018%2C%20web,a%20wakeup%20call%20for%20companies. When things are not accessible it can lead to people feeling and being isolated, cause them to not have access to the same opportunities, etc. It can cause them to have trouble making good decisions for themselves and others.
  3. People categorize accessibility needs differently. For example, the CDC lists mobility, hearing, cognition, vision, self-care, and independent living.
  4. ARIA as defined by the MDN: “Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.” Best practices can include: Semantic HTML Proper use of ARIA Appropriate Alt-Text Good color contrast
  5. WCAG is version 2.1 as of June 2018.
  6. Est. in 1858 by the Kentucky General Assembly through an Act. Further funded and established in 1879 as a major provider of educational materials to students with visual Accessibility needs through the first act to benefit students with visual needs through the "Act to Promote the Education of the Blind" provides funding to the Printing House for embossed books and apparatus for blind students throughout the country. This funding continues today through the Federal Quota Program. Open Monday – Friday for tours and museum. I recommend visiting Monday – Thursday when the factory is more likely to be open unless Inventory is going on. Check out https://sites.aph.org/museum/visit/ for more details.
  7. You can learn more about Braille Tales and Dolly Parton’s Imagination Library at the following web address: https://sites.aph.org/dolly-partons-imagination-library/. You can also go to the official page for Dolly Parton’s Imagination Library located, here: https://imaginationlibrary.com/