Search⌘ K
AI Features
Home
Courses
Building Progressive Web Applications

Accessibility

Understand how to create accessible Progressive Web Apps by implementing semantic HTML, descriptive alt text, effective color contrast, ARIA attributes, and accessible animations to ensure inclusivity and usability for all users.

We'll cover the following...

Accessibility is an important aspect of any web app, including progressive web apps (PWAs). PWAs offer a great opportunity to provide a seamless experience to users across different devices and platforms, but it’s important to ensure that users can access and use the app regardless of their disabilities.

Why is accessibility important?

Accessibility ensures that people with disabilities can access and use an app. It also improves the user experience for everyone, which makes navigating and interacting with the app easier. By implementing accessibility features, we can make our app more inclusive, which can help us reach a wider audience.

How to implement accessibility

Here are some ways to implement accessibility in web apps.

Use semantic HTML

Semantic HTML is an important aspect of accessibility and helps screen readers and other assistive technologies understand the content and structure of a web page. Using semantic tags such as <nav>, <header>, <footer>, and <main> make the different parts of an app clearer. This makes it easier for people with disabilities to navigate the app.

Here are two examples of HTML pages, one with semantic tags and one without:

Without Semantic Tags
With Semantic Tags
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Example without Semantic Tags</title>
</head>
<body>
	<div id="header">
		<div id="nav">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
	</div>
	<div id="main">
		<div id="article">
			<div id="article-header">
				<h1>Article Title</h1>
				<p>Written by John Doe on April 1, 2023</p>
			</div>
			<div id="article-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus, tellus sit amet congue malesuada, lorem dolor vestibulum lacus, eget laoreet risus dolor eu metus.</p>
			</div>
			<div id="article-footer">
				<p>Published by Jane Doe</p>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>&copy; 2023 Example Company. All rights reserved.</p>
	</div>
</body>
</html>
Two HTML pages, one with semantic tags and one without

Using the descriptive alt text for images

The alt text describes images on a web page to users who require visual aids, such as those who use screen readers. Using descriptive alt text that accurately describes the image’s content is vital to ensure PWAs a remore accessible and inclusive.

HTML
<img src="woman-using-smartphone.jpg" alt="A woman using a smartphone to access the PWA">

Adding motion with animations

Animations can affect the accessibility of a website. We must ensure that motion does not cause discomfort, or distract or prevent users from being able to interact with the website.

Guidelines and best practices for creating accessible animations include:

  • Providing controls for animation speed.
  • Ensuring that animations are not too fast or slow.
  • Avoiding rapid, flashing, or jittery animations.

We can also use the prefers-reduced-motion media query to provide an alternative experience for users who prefer less motion.

To add animations to web apps, we can use the CSS transition property and @keyframes animations with the animation-timing-function and animation-duration properties to control the speed and smoothness of animations.

A CSS animation example

Here’s a basic example of how we can control the speed of an animation using CSS:

In this example, a red circle moves back and forth inside a container using a CSS animation. We also have a slider control that sets the speed of the animation.

  • Line 19: Use the move animation with a duration of 2s and an ease-in-out timing function set to repeat infinitely using the infinite keyword.
  • Lines 22–24: Define the animation in CSS using the @keyframes rule named move. It moves the circle back and forth inside the container by changing its transform property.

In HTML, the slider control is created using an input element with a type of range. We set its min and max values to control the speed range and step to control the increment/decrement rate. We also give it an id of the animation-speed to control the animation speed.

In JavaScript, we control the animation speed with the slider. We get a reference to the slider and the circle using their respective selectors. We add an event listener to the slider that listens for changes to its value and updates the animation-duration property of the .circle element accordingly.

Using color contrast effectively

Color contrast is crucial for people with visual impairments to ensure sufficient contrast between the text and the background. Let’s use a color contrast checker to ensure the app meets the WCAG 2.0 AA standard.

NAME_
CSS
body {
  color: #333;
  background-color: #fff;
}

WebAIM Color Contrast Checker is a free online tool that allows us to check the contrast ratio between two colors and determine if they meet the WCAG 2.1 color contrast requirements. You can browse it to find the contrast ratio between the colors in the above CSS code snippet.

Using aria-* roles and attributes

ARIA (Accessible Rich Internet Applications) roles and attributes provide additional information to assistive technologies about the purpose of the elements on a web page. We use ARIA roles and attributes to make the web app more accessible.

Here’s an HTML snippet that includes a couple of aria-* attributes:

HTML
<div role="dialog" aria-labelledby="dialog-title">

  <h2 id="dialog-title">Dialog Title</h2>

  <p>Dialog content goes here.</p>

  <button role="button" aria-label="Close">X</button>

</div>

In this example, we have a dialog box that contains a title, some content, and a close button. We use the following two aria-* attributes:

  • aria-labelledby: This attribute associates a dialog box with its title. We set it on the div element representing the dialog box and set its value to the id of the h2 element containing the title. This helps screen readers announce the title when the dialog is opened.
  • aria-label: This attribute provides an accessible name for the close button. We set it on the button element representing the close button and set its value to Close. This helps screen readers announce the button’s purpose when it’s focused or activated.