Free Course

Web Accessibility

by

Google

Developing with Empathy

Start Free Course

About this Course

In this course you’ll get hands-on experience making web applications accessible. You’ll understand when and why users need accessibility. Then you’ll dive into the “how”: making a page work properly with screen readers, and managing input focus (e.g. the highlight you see when tabbing through a form.) You’ll understand what “semantics” and “semantic markup” mean for web pages and add ARIA markup to enable navigating the interface with a range of assistive devices. Finally, you’ll learn styling techniques that help users with partial vision navigate your pages easily and reliably.

This course is also featured in our Senior Web Developer Nanodegree program.

Course Cost
Free
Timeline
Approx. 2 weeks
Skill Level
Advanced
Included in Course
  • Icon course 01 3edf6b45629a2e8f1b490e1fb1516899e98b3b30db721466e83b1a1c16e237b1 Rich Learning Content

  • Icon course 04 2edd94a12ef9e5f0ebe04f6c9f6ae2c89e5efba5fd0b703c60f65837f8b54430 Interactive Quizzes

  • Icon course 02 2d90171a3a467a7d4613c7c615f15093d7402c66f2cf9a5ab4bcf11a4958aa33 Taught by Industry Pros

  • Icon course 05 237542f88ede3178ac4845d4bebf431ddd36d9c3c35aedfbd92e148c1c7361c6 Self-Paced Learning

  • Icon course 03 142f0532acf4fa030d680f5cb3babed8007e9ac853d0a3bf731fa30a7869db3a Student Support Community

Course Leads

  • Alice Boxhall
    Alice Boxhall

    Instructor

  • Rob Dodson
    Rob Dodson

    Instructor

  • Michael Wales
    Michael Wales

    Instructor

What You Will Learn

Lesson 1

Overview

  • Learn why accessibility matters, and who it affects.
  • Get a first look at the web accessibility guidelines (WAI – Web Accessibility Initiative).
  • Understand “POUR” means for accessibility, and locate checklists to help make your own sites accessible.
Lesson 1

Overview

  • Learn why accessibility matters, and who it affects.
  • Get a first look at the web accessibility guidelines (WAI – Web Accessibility Initiative).
  • Understand “POUR” means for accessibility, and locate checklists to help make your own sites accessible.
Lesson 2

Focus

  • Learn how to make a page usable for anyone navigating with the keyboard.
  • An exploration of focusable elements.
  • Learn how to manage focus in forms, in custom components, pop-ups, and off-screen content.
Lesson 2

Focus

  • Learn how to make a page usable for anyone navigating with the keyboard.
  • An exploration of focusable elements.
  • Learn how to manage focus in forms, in custom components, pop-ups, and off-screen content.
Lesson 3

Semantics Basics

  • Make a page work for people who are unable to use a standard user interface.
  • Use a screen reader to try out ordinary form elements and add markup to make them work even better.
  • Understand the accessibility tree the browser constructs from the DOM.
Lesson 3

Semantics Basics

  • Make a page work for people who are unable to use a standard user interface.
  • Use a screen reader to try out ordinary form elements and add markup to make them work even better.
  • Understand the accessibility tree the browser constructs from the DOM.
Lesson 4

Semantics Extras

  • Dive deeper into the screen-reader experience to add hyper-fast navigation.
  • Learn how to arrange headings and label links so screen reader users can fly through your pages!
  • Call out “landmarks” into your page to speed up navigation even more.
Lesson 4

Semantics Extras

  • Dive deeper into the screen-reader experience to add hyper-fast navigation.
  • Learn how to arrange headings and label links so screen reader users can fly through your pages!
  • Call out “landmarks” into your page to speed up navigation even more.
Lesson 5

Semantics - ARIA

  • Move beyond the native elements of HTML into building custom controls and interactions.
  • Accessible Rich Internet Applications (ARIA).
  • Learn how to add attributes to your custom interactions to make them as accessible as native elements.
Lesson 5

Semantics - ARIA

  • Move beyond the native elements of HTML into building custom controls and interactions.
  • Accessible Rich Internet Applications (ARIA).
  • Learn how to add attributes to your custom interactions to make them as accessible as native elements.
Lesson 6

Style

  • Learn the third pillar of Accessibility (after Focus and Semantics): Styling.
  • Highlight the focus, indicate ARIA states, zoomed in or out, and support limited color or contrast vision.
  • Audit your page with the Chrome Accessibility Tools and correct any styling issues that pop up.
Lesson 6

Style

  • Learn the third pillar of Accessibility (after Focus and Semantics): Styling.
  • Highlight the focus, indicate ARIA states, zoomed in or out, and support limited color or contrast vision.
  • Audit your page with the Chrome Accessibility Tools and correct any styling issues that pop up.

Prerequisites and Requirements

Students should know HTML, CSS, and JavaScript.

See the Technology Requirements for using Udacity.

Why Take This Course

Not every user approaches their applications with the same abilities. Whether it’s age, vision concerns, limited hearing, a broken arm, or other limitations, everybody deserves access to their apps. This course dives into the why and how of making web applications accessible. As a bonus, accessible sites also tend to be more usable for everybody!

What do I get?
  • Instructor videos
  • Learn by doing exercises
  • Taught by industry professionals

Thanks for your interest!

We'll be in touch soon.

Icon globe e82eae5d45465aba4fbe4bb746905ce55dc3324f310b79c60e4a20089057d347

Udacity 现已提供中文版本! A Udacity tem uma página em português para você! There's a local version of Udacity for you!

前往优达学城中文网站 Ir para a página brasileira Go to Indian Site or continue to Global Site