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

`<img src="chart.jpg" alternative="The description of the chart."/>`

`<canvas src="chart.jpg" alt="The description of the chart."/>`

`<img src="chart.jpg" alt="The description of the chart."/>`

Which code snippet shows the correct way to add alternative text to an image? 

Which code snippet shows the correct way to add alternative text to an image?

**(True or False)** Alternative text for icon buttons should capture a literal description of how the icon looks. 

(True or False) Alternative text for icon buttons should capture a literal description of how the icon looks.

The caption will be read aloud to users with screen readers, but will not be visible in the UI. 

The caption will appear below the chart. 

The caption will appear above the chart. 

The caption will appear to the right of the chart.

What best describes the way the following code will display in the UI? 
```HTML
<figure>
 <div class="chart"></div>
 <figcaption>This bar chart depicts the breakdown of user feedback. 40% of users replied "Yes", while 60% replied "No".</figcaption> 
</figure>
```

What best describes the way the following code will display in the UI?
<pre><code class="language-HTML">&lt;figure&gt;
 &lt;div class=&quot;chart&quot;&gt;&lt;/div&gt;
 &lt;figcaption&gt;This bar chart depicts the breakdown of user feedback. 40% of users replied &quot;Yes&quot;, while 60% replied &quot;No&quot;.&lt;/figcaption&gt; 
&lt;/figure&gt;
</code></pre>

What is the correct HTML element to use for text summaries of complex written content? 

What is the correct HTML element to use for text summaries of complex written content?

``` HTML
<video width="320" height="240" controls autoplay muted>
 <source src="video.webm" type="video/webm"/>
</video>
```

``` HTML
<video width="320" height="240" autoplay muted>
 <source src="video.webm" type="video/webm"/>
</video>
```

``` HTML
<video width="320" height="240" controls autoplay>
 <source src="video.webm" type="video/webm"/>
</video>
```

What is the most accessible way to code autoplaying media? 

What is the most accessible way to code autoplaying media?

**(True or False)** Auto-generated captions are a cheap and effective way to make video accessible for everyone without needing to get an actual person involved. 

(True or False) Auto-generated captions are a cheap and effective way to make video accessible for everyone without needing to get an actual person involved.

Which CSS media query should be used to offer users an opt-in experience with reduced (or no) animations, transitions, or motion graphics? 

Which CSS media query should be used to offer users an opt-in experience with reduced (or no) animations, transitions, or motion graphics?

When the time limit is shorter than five minutes. 

When the time limit is required and removing or extending it will make the content pointless. 

When the time limit is due to real-time time limitations and extending or removing the time limit is impossible.

When the time limit is longer than 20 hours.

What is *not* an exception to the guidelines around time limitations? 

What is not an exception to the guidelines around time limitations?

**(True or False)** If timers or time limits aren't absolutely needed, we shouldn’t use them. 

(True or False) If timers or time limits aren’t absolutely needed, we shouldn’t use them.

**(True or False)** You don’t need to warn the user about an automatic timeout if their data will be preserved for more than 20 hours without user action. 

(True or False) You don’t need to warn the user about an automatic timeout if their data will be preserved for more than 20 hours without user action.

Test your knowledge about alternative methods of displaying inaccessible content. 

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: Alternatives for Inaccessible Content