Successfully reported this slideshow.
Your SlideShare is downloading. ×

Intro to Accessible Web Design

Ad

Intro to Accessible Web
Design
CODE LOUISVILLE FRONT-END WEB DESIGN
MAY 2020 SESSION
Beth Gray

Ad

What is
Accessibility?
Accessibility – Accessibility is defined as a "word
used to describe whether a product can be used ...

Ad

Why is it important?
Missing a lot of
customers.
According to the
CDC, around 26% of
Americans have some
form of disabilit...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
RIM On The Social Side
RIM On The Social Side
Loading in …3
×

Check these out next

1 of 13 Ad
1 of 13 Ad

Intro to Accessible Web Design

Download to read offline

This is meant to be a very introductory Accessibility presentation that I gave to the Code Louisville May 2020 Front-End Web Development course I am volunteer mentoring.

This is meant to be a very introductory Accessibility presentation that I gave to the Code Louisville May 2020 Front-End Web Development course I am volunteer mentoring.

Advertisement
Advertisement

More Related Content

Similar to Intro to Accessible Web Design (16)

Advertisement

Intro to Accessible Web Design

  1. 1. Intro to Accessible Web Design CODE LOUISVILLE FRONT-END WEB DESIGN MAY 2020 SESSION Beth Gray
  2. 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. 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. 4. Accessibility Categories Hearing Vision Mobility Comprehension Technological Access Moment of Panic Types Temporary Permanent Situational Time Visible Invisible Visibility
  5. 5. What can you do? Meet standards: ADA, WCAG (AA), Section 508, etc. Follow best practices: W3C, PEP Respectful, people-first language
  6. 6. Accessibility Standards WCAG ADA Section 508 Compliance
  7. 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. 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. 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.
  10. 10. Accessibility Tools and Resources
  11. 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
  12. 12. American Printing House for the Blind
  13. 13. Imagination Library and Braille Tales

Editor's Notes

  • “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
  • 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.
  • People categorize accessibility needs differently. For example, the CDC lists mobility, hearing, cognition, vision, self-care, and independent living.
  • 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
  • WCAG is version 2.1 as of June 2018.
  • 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.
  • 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/

×