Skip to content

Latest commit

 

History

History
165 lines (117 loc) · 8.16 KB

accessibility.md

File metadata and controls

165 lines (117 loc) · 8.16 KB
Raw

Web Accessibility

Projected Time

About 120 minutes

  • 60 minutes for Lesson
  • 45 minutes for Independent Practice
  • 15 minutes for Check for Understanding

Motivation

A11Y (Accessibility) or ADA (American's With Disabilities) compliance means making your site usable to everyone no matter their limitations.

As more and more of our lives revolve around using the internet it is important to remember that not everyone uses the web in the same way. Not only should we strive to create a positive user experience for everyone to be equitable, but creating accessibility sites has become a legal requirement in many industries.

Objectives

Participants will be able to:

  • Evaluate whether their website, app, or product is accessible with respect to visual, audio, motor, or cognitive impairments.
  • Determine changes that can make websites more accessible.
  • Implement those changes.

Topics to cover

  • What is accessibility?
  • Why is it important?
  • How do we design and build for accessibility?

Lesson

  1. Read through the a11y slideshow.

  2. Watch Accessibility Fundamentals with Rob Dodson 28:15

  3. Try navigating a website with your keyboard only. (5 min) -Tab through focusable items. -Arrow keys for radio buttons, dropdowns. -Spacebar to check/uncheck boxes. -Enter to submit.

    Start with www.trello.com.

    Things to pay attention to:

    • How does it feel to navigate like this?
    • Is it easy to accomplish your goals?

    Next, navigate a website you use often (e.g. GitHub, Gmail, Facebook, LinkedIn).

    • Talk to a partner about what was easy, hard, or surprising.
    • How would you make it better?
    • What did they do that worked well?

  4. Spend 15 minutes setting up your screen reader and trying it out. Scan through the linked directions just long enough to get it working.

    The following combination of screen reader and browsers are recommended:

    • Mac
      • VoiceOver + Safari
    • iOS Devices
      • VoiceOver + Safari
    • PC
      • NVDA + Firefox
      • JAWS + Edge
    • Android Devices
      • Talkback + Chrome

    On the site you use often:

    • Close your eyes and try to understand the content.
    • Do images have clear descriptions?
    • Can you understand and sumbit forms?
    • Can you visualize where you are on the page?

  5. Get a disability simulator Chrome Extension such as Web Disability Simulator (10 min)

    Now try out the different options.

    • Can you clearly see text with the color blindness options turned on?
    • Can you select buttons and click on links easily in the Parkenson's mode?

Common Mistakes / Misconceptions

Myth: Accessibility is just for people with disabilities.
Fact: Accessibility benefits everyone using the web.

Myth: We only need to consider color contrast when designing for vision impairments.
Fact: We also need to consider text size, line height, font, and more!

Myth: The only sort of disability we need to consider are vision impairments.
Fact: We also need to think of people who have physical or cognitive impairments that might make using a mouse, keyboard, or audio cue difficult.

Myth: Making a site accessible makes it ugly!
Fact: Most accessibility features are not visible. Many websites and apps are starting to incorporate accesibility widgets which will allow the user to make any adjustments they need. This feature allows for a main design that might not follow contrast and sizing rules on the main site, but will still be fully accessible for those that need it.

Independent Practice

  1. Read about the Lighthouse extension - Lighthouse is an open-source tool by Google that gives you a way to analyzes web apps and web pages performance. It is integrated directly into the Chrome Developer Tools, under the "Audits" panel.
  2. Read the Accessibility section on the Google Developers Site through the "Accessible Styles" chapter.
  3. Download the aXe Chrome Extension.
  4. Follow the guide on How to Do an Accessibility Review

Supplemental Resources - for later

Links from slideshow

Developer/QA Resources

Assistive Technologies

Community

  • a11y Slack - This is a Slack group where you can ask questions on any accessibility-related topics.

Check for Understanding

  • Why is accessibility important?
  • What are some actions that make it difficult for a site to be accessible?
  • What are the main user goals/paths in your Portfolio Page?
  • Are they accessible?
  • Write down three specific things you can do to make your Portfolio Page more accessible.