Learn accessibility terminology, high-level concepts, and standard practices, so that you can start creating accessible websites and web applications today!

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

Moves the focus to the next interactive element on the page

Returns the user to the last page they visited in the browser

What is the expected behavior of the “Tab” key when navigating with the keyboard? 

What is the expected behavior of the “Tab” key when navigating with the keyboard?

Use semantic HTML to designate landmark sections so assistive technologies can offer users an outline of the page without needing to read every element.

Offer jump links to allow the user to skip to later sections on a long page.

Add a timer at the top of the page so the user is encouraged to move quickly.

Add clickable menus, section lists, or tables of contents that allow users to navigate to their chosen section.

**(Select all that apply.)** What can you do as a developer to improve the speed and ease of keyboard navigation on a page?

(Select all that apply.) What can you do as a developer to improve the speed and ease of keyboard navigation on a page?

**(True or False)** Accessibility is the only reason why a user would navigate with their keyboard. 

(True or False) Accessibility is the only reason why a user would navigate with their keyboard.

Which term refers to the visual designation of the focus on the page? 

Which term refers to the visual designation of the focus on the page?

Images, text, or other non-focusable items placed in-between focusable items

Changes to the DOM that add or remove items

**(Select all that apply.)** What can disrupt the natural focus order? 

(Select all that apply.) What can disrupt the natural focus order?

To draw the user’s attention to an important but noninteractive element 

To allow a user to focus on a custom interactive element you've built that wouldn't otherwise be focusable

To improve the accessibility of web content by ensuring keyboard navigation for elements that are essential for user interaction, even if they aren’t part of the natural tab order

**(Select all that apply.)** When should you manually add an element to the focus order using `tabindex`? 

(Select all that apply.) When should you manually add an element to the focus order using <code>tabindex</code>?

Which CSS property changes the style of the visible focus indicator? 

Which CSS property changes the style of the visible focus indicator?

**(True or False)** Focus indicator styling is exempt from color contrast accessibility requirements. 

(True or False) Focus indicator styling is exempt from color contrast accessibility requirements.

**(True or False)** The focus indicator should never be removed entirely. 

(True or False) The focus indicator should never be removed entirely.

Test your knowledge of accessible navigation without a mouse. 

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: Navigation Without a Mouse