Skip to content

Latest commit

 

History

History
62 lines (45 loc) · 2.65 KB

accessibility.md

File metadata and controls

62 lines (45 loc) · 2.65 KB

Web Accessibility

Projected Time

60 minutes

20 min - Slideshow & Lesson 40 min - Independent Practice

Motivation

Accessibility refers to the design of products, devices, services, or environments for people who experience disabilities.-Wikipedia. As developers and designers, it's essential that we ensure the products we build can be used by anyone, regardless of different abilities.

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. Try navigating a website with your keyboard only. 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?

Common Mistakes / Misconceptions

Myth: Accessibility is just for people with disabilites 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,

Independent Practice

  1. Read the Accessibility section on the Google Developers Site through the "Accessible Styles" chapter.
  2. Download the aXe Chrome Extension.
  3. Follow the guide on How to Do an Accessibility Review
  • What are the main user goals/paths in your Portfolio Page?
  • Are they accessible?
  • How can you make them accessible?
  • Write down three specific things you can do to make your Portfolio Page more accessible.

Additional resources