Intro to Accessible Web Design

Elizabeth Gray
Elizabeth GraySoftware Development Engineer at CloudFit Software
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
1 of 13

Recommended

RIM On The Social Side by
RIM On The Social SideRIM On The Social Side
RIM On The Social SideNatalie Alesi
317 views32 slides
Nonetbrutality ppt by
Nonetbrutality pptNonetbrutality ppt
Nonetbrutality pptMark Gould
152 views17 slides
A Critical Appraisal of Technology in the University by
 A Critical Appraisal of Technology in the University A Critical Appraisal of Technology in the University
A Critical Appraisal of Technology in the UniversityRichard Hall
629 views19 slides
Techinnovation by
TechinnovationTechinnovation
TechinnovationJeffrey Hart
881 views11 slides
What can go wrong with web2 in public services by
What can go wrong with web2 in public servicesWhat can go wrong with web2 in public services
What can go wrong with web2 in public servicesosimod
483 views22 slides
Government 2.0.: Opportunities and challenges by
Government 2.0.: Opportunities and challengesGovernment 2.0.: Opportunities and challenges
Government 2.0.: Opportunities and challengesEOI Escuela de Organización Industrial
704 views30 slides

More Related Content

What's hot

Connecting Justice - social media and citizen engagement by
Connecting Justice - social media and citizen engagementConnecting Justice - social media and citizen engagement
Connecting Justice - social media and citizen engagementeGovernment Resource Centre
746 views39 slides
London a11y meetup abi james by
London a11y meetup abi james London a11y meetup abi james
London a11y meetup abi james Abi James
476 views29 slides
Onepercentevent Cocreation Nairobi Microjustice by
Onepercentevent Cocreation Nairobi MicrojusticeOnepercentevent Cocreation Nairobi Microjustice
Onepercentevent Cocreation Nairobi MicrojusticeAndy Mutua
270 views21 slides
2012: NJ GMIS: The Double Edge Sword of the Social Network by
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 NetworkCarol Spencer
479 views30 slides
Open Data - context of Open Government in Edmonton by
Open Data - context of Open Government in EdmontonOpen Data - context of Open Government in Edmonton
Open Data - context of Open Government in EdmontonJas Darrah
315 views20 slides
Social media and Security: How to Ensure Safe Social Networking by
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 NetworkingIshfaq Majid
137 views13 slides

What's hot(19)

London a11y meetup abi james by Abi James
London a11y meetup abi james London a11y meetup abi james
London a11y meetup abi james
Abi James476 views
Onepercentevent Cocreation Nairobi Microjustice by Andy Mutua
Onepercentevent Cocreation Nairobi MicrojusticeOnepercentevent Cocreation Nairobi Microjustice
Onepercentevent Cocreation Nairobi Microjustice
Andy Mutua270 views
2012: NJ GMIS: The Double Edge Sword of the Social Network by Carol Spencer
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
Carol Spencer479 views
Open Data - context of Open Government in Edmonton by Jas Darrah
Open Data - context of Open Government in EdmontonOpen Data - context of Open Government in Edmonton
Open Data - context of Open Government in Edmonton
Jas Darrah315 views
Social media and Security: How to Ensure Safe Social Networking by Ishfaq Majid
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
Ishfaq Majid137 views
Biometrics Today And Into The Future (2006) by Duane Blackburn
Biometrics Today And Into The Future (2006)Biometrics Today And Into The Future (2006)
Biometrics Today And Into The Future (2006)
Duane Blackburn470 views
Political Communication In Cmc by aazim javed
Political Communication In CmcPolitical Communication In Cmc
Political Communication In Cmc
aazim javed463 views
Offdata: a prosumer law agency to govern big data in the public interest by Chris Marsden
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
Chris Marsden515 views
Socialize Conference Toronto 2012 - FaceBook Marketing: by Adler Law Group
Socialize Conference Toronto 2012 - FaceBook Marketing: Socialize Conference Toronto 2012 - FaceBook Marketing:
Socialize Conference Toronto 2012 - FaceBook Marketing:
Adler Law Group1K views
Digital Divide vs Digital Inequality by tdsparks3
Digital Divide vs Digital InequalityDigital Divide vs Digital Inequality
Digital Divide vs Digital Inequality
tdsparks32.1K views
Learning to crowd-surf: Gov 2.0 and community engagement by Patrick McCormick
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
Patrick McCormick466 views
NCSBN Keynote Presentation Alan W Silberberg by DIGIJAKS
NCSBN Keynote Presentation Alan W SilberbergNCSBN Keynote Presentation Alan W Silberberg
NCSBN Keynote Presentation Alan W Silberberg
DIGIJAKS274 views
Right to be forgotten presentation by reporter1120
Right to be forgotten presentationRight to be forgotten presentation
Right to be forgotten presentation
reporter1120382 views
Lesson 9 interactive media (1) by Helen Bruce
Lesson 9  interactive media (1)Lesson 9  interactive media (1)
Lesson 9 interactive media (1)
Helen Bruce438 views

Similar to Intro to Accessible Web Design

Anonos NTIA Comment Letter letter on ''Big Data'' Developments and How They I... by
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...Ted Myerson
1.2K views15 slides
Digital Divide And Accessibility by
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And AccessibilityGlenn McKnight
429 views50 slides
Digital Divide And Accessibility by
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And AccessibilityGlenn McKnight
1.2K views50 slides
User1st - Corporate Overview (1) by
User1st - Corporate Overview (1)User1st - Corporate Overview (1)
User1st - Corporate Overview (1)Katya Smith
293 views8 slides
Why it's so hard for users to control their data by
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 dataGiuliadeNicolellis
31 views5 slides
Defending Privacy Of Personal Information Essay by
Defending Privacy Of Personal Information EssayDefending Privacy Of Personal Information Essay
Defending Privacy Of Personal Information EssaySusan Myers
2 views41 slides

Similar to Intro to Accessible Web Design(20)

Anonos NTIA Comment Letter letter on ''Big Data'' Developments and How They I... by Ted Myerson
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...
Ted Myerson1.2K views
Digital Divide And Accessibility by Glenn McKnight
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And Accessibility
Glenn McKnight429 views
Digital Divide And Accessibility by Glenn McKnight
Digital Divide And AccessibilityDigital Divide And Accessibility
Digital Divide And Accessibility
Glenn McKnight1.2K views
User1st - Corporate Overview (1) by Katya Smith
User1st - Corporate Overview (1)User1st - Corporate Overview (1)
User1st - Corporate Overview (1)
Katya Smith293 views
Why it's so hard for users to control their data by GiuliadeNicolellis
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
Defending Privacy Of Personal Information Essay by Susan Myers
Defending Privacy Of Personal Information EssayDefending Privacy Of Personal Information Essay
Defending Privacy Of Personal Information Essay
Susan Myers2 views
CS4001 Final Ethics Paper by Gino McCarty
CS4001 Final Ethics PaperCS4001 Final Ethics Paper
CS4001 Final Ethics Paper
Gino McCarty592 views
Government Policy Needs in a Web 2.0 World by Franciel
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
Franciel934 views
Presentation Yun Li by YunLi
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
YunLi509 views
Presentation Yun Li by YunLi
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
YunLi252 views
Presentation Y U N L I by YunLi
Presentation  Y U N  L IPresentation  Y U N  L I
Presentation Y U N L I
YunLi278 views
Presentation Yun Li by YunLi
Presentation Yun LiPresentation Yun Li
Presentation Yun Li
YunLi408 views
PRJ.1578-Omidyar-Network-Digital-Identity-Issue-Analysis-Executive-Summary-v1... by Nick Norman
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 Norman179 views
The Doorman Project 2.0 by Doug Loo
The Doorman Project 2.0The Doorman Project 2.0
The Doorman Project 2.0
Doug Loo205 views
Anonos FTC Comment Letter Big Data: A Tool for Inclusion or Exclusion by Ted Myerson
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
Ted Myerson1.1K views
digital identity 2.0: how technology is transforming behaviours and raising c... by Patrick McCormick
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...
Patrick McCormick1.7K views
Accessibility 101 for Financial Institutions by 3Play Media
Accessibility 101 for Financial Institutions Accessibility 101 for Financial Institutions
Accessibility 101 for Financial Institutions
3Play Media225 views
Hayes Privacy And Social Media Paper, October 29, 2010 by canadianlawyer
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
canadianlawyer1.4K views

Recently uploaded

Business Analyst Series 2023 - Week 3 Session 5 by
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5DianaGray10
248 views20 slides
Mini-Track: Challenges to Network Automation Adoption by
Mini-Track: Challenges to Network Automation AdoptionMini-Track: Challenges to Network Automation Adoption
Mini-Track: Challenges to Network Automation AdoptionNetwork Automation Forum
12 views27 slides
Democratising digital commerce in India-Report by
Democratising digital commerce in India-ReportDemocratising digital commerce in India-Report
Democratising digital commerce in India-ReportKapil Khandelwal (KK)
15 views161 slides
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdfDr. Jimmy Schwarzkopf
19 views29 slides
Future of Indian ConsumerTech by
Future of Indian ConsumerTechFuture of Indian ConsumerTech
Future of Indian ConsumerTechKapil Khandelwal (KK)
21 views68 slides
Vertical User Stories by
Vertical User StoriesVertical User Stories
Vertical User StoriesMoisés Armani Ramírez
14 views16 slides

Recently uploaded(20)

Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10248 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf by StephenTec
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf
StephenTec12 views
Piloting & Scaling Successfully With Microsoft Viva by Richard Harbridge
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft Viva
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
AMAZON PRODUCT RESEARCH.pdf by JerikkLaureta
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdf
JerikkLaureta26 views

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/