Gain insights into web accessibility fundamentals, terminology, and best practices. Learn about WCAG, identify and fix accessibility issues, and create inclusive websites for all users.

Introduction to Accessibility for the Web.png

Accessibility means everyone should have equal access to the internet regardless of physical or mental disabilities or differences. As developers, you must create websites that are easily understood and navigated by everyone. While the concept of accessibility might initially feel intimidating, developers of all experience levels can create accessible products. Users are at the heart of everything developers build—and all users should have equal access to what you create as a developer.

In this course, you’ll learn the basic terminology, high-level concepts, and standard practices you need to start creating accessible websites and applications. You’ll look at the Web Content Accessibility Guidelines, learn how to catch (and correct) common accessibility mistakes, and become a more considerate and empathetic developer.

By the end of this course, you’ll have the knowledge you need to create accessible UIs, write accessible code, and adapt inaccessible web experiences into accessible ones.

A Beginner’s Guide to Web Accessibility

**(True or False)** Color is the only factor in determining whether a contrast ratio will pass or fail.


(True or False) Color is the only factor in determining whether a contrast ratio will pass or fail.

Whether the contrast ratio is high enough

Whether the design is compelling and interesting enough

Whether any information is being communicated by color, alone 

Whether there's enough white space in the design 

**(Select all that apply.)** What can changing your display color mode to greyscale reveal about your design? 


(Select all that apply.) What can changing your display color mode to greyscale reveal about your design?

**(True or False)** If an element is inaccessible, the best option is to remove it from our website or application.


(True or False) If an element is inaccessible, the best option is to remove it from our website or application.

By adding icons or symbols to differentiate state/status

By using patterns or textures to distinguish content

By checking our design in greyscale to see if it still makes sense

**(Select all that apply.)** Which are ways that you can ensure color isn’t the only way information is being communicated in our designs?


(Select all that apply.) Which are ways that you can ensure color isn’t the only way information is being communicated in our designs?

**(True or False)** If you offer multiple color themes, it’s fine to only have one of the themes be accessible.


(True or False) If you offer multiple color themes, it’s fine to only have one of the themes be accessible.

Which is the minimum target size, as specified by the WCAG? 

Which is the minimum target size, as specified by the WCAG?

**(Fill in the blank.)** According to WCAG, users should be able to zoom in on website or app content up to ________ without losing functionality.

(Fill in the blank.) According to WCAG, users should be able to zoom in on website or app content up to ________ without losing functionality.

**(True or False)** To write the most effective accessible styles, you should use relative units in your CSS whenever possible and avoid using absolute units unless absolutely necessary. 

(True or False) To write the most effective accessible styles, you should use relative units in your CSS whenever possible and avoid using absolute units unless absolutely necessary.

**(True or False)** There should only be one `<h1>` tag per page.

(True or False) There should only be one <code>&lt;h1&gt;</code> tag per page.

**(True or False)** The `<lang>` attribute can only be specified at the `<html>` level.

(True or False) The <code>&lt;lang&gt;</code> attribute can only be specified at the <code>&lt;html&gt;</code> level.

Test your knowledge of accessible user interfaces. 

Quiz: Accessible User Interface

Test your knowledge of accessible user interfaces.

Before We Begin

Getting Started

Accessible User Interfaces

Accessible HTML

Navigation without a Mouse

Alternate Presentations of Information

Challenge: Find and Solve Common Accessibility Mistakes

Wrap Up

Quiz: Accessible User Interface