Über diesen Kurs

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.

Kursgebühren
Kostenlos
Zeitachse
Ca.2weeks
Niveau
Profis
Vorteile

Rich Learning Content

Interactive Quizzes

Taught by Industry Pros

Self-Paced Learning

Student Support Community

Begib' dich auf den Weg des Erfolgs

Dieser kostenlose Kurs ist der erste Schritt auf dem Weg zu einer neuen Karriere mit dem Front-End Web Developer Programm.

Kostenlose Kurse

Web Accessibility

mit Google

Erweitere deine Fähigkeiten und Karriere durch innovatives und unabhängiges Lernen.

Icon steps 54aa753742d05d598baf005f2bb1b5bb6339a7d544b84089a1eee6acd5a8543d
 
 

Tutoren

Alice Boxhall
Alice Boxhall

Instructor

Rob Dodson
Rob Dodson

Instructor

Michael Wales
Michael Wales

Instructor

Was du lernst

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 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 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.

Voraussetzungen

Students should know HTML, CSS, and JavaScript.

Detaillierte technische Voraussetzungen

Was spricht für diesen Kurs?

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!

Was bekomme ich?
Instructor videos Learn by doing exercises Taught by industry professionals