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 Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
YunLi
 
Presentation Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
YunLi
 
Presentation Y U N L I
Presentation  Y U N  L IPresentation  Y U N  L I
Presentation Y U N L I
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 Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
 
Presentation Yun Li
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
 
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
 
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

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 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...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
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
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
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
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
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
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

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/