About the Web Accessibility Cookbook

The Web Accessibility Cookbook focuses on the technical side of web accessibility.
You’ll learn how to build common patterns written accessibly in HTML, CSS, and JavaScript. You’ll also start to understand how good and bad practices affect people, especially those with disabilities.

Great for quick answers on what pattern is best to use, with good explanations why, for those who want to know more.

Sara Joy Web Developer, Pirate Ship Software GmbH

It's' available in print, PDF, EPub, and HTML on the O'Reilly Learning Platform.

Table of contents

  1. Structuring Documents
  2. Structuring Pages
  3. Linking Content
  4. Performing Actions
  5. Styling content
  6. Managing Focus
  7. Navigating Sites
  8. Toggling Content Visibility
  9. Constructing Forms
  10. Filtering Data
  11. Presenting Tabular Data
  12. Creating custom elements
  13. Debugging Barriers

1. Structuring Documents

Chapter 1 focuses on those parts of your websites that recur and are similar or identical on every page. You will learn how to set up the <head> and create a base structure in the <body>.

Recipes

  1. Define the natural language
  2. Describe the document
  3. Set the viewport width
  4. Optimize rendering order
  5. Structure the document

2. Structuring Pages

In Chapter 2, you leave the base structure of your website and move into the page itself. The foundation of a well-designed page is grouping elements, landmarks, and headings. You learn how to use <section>, <nav>, or <article> efficiently and how to combine them with headings to create a sound document outline.

Recipes

  1. Create navigation landmarks
  2. Create form landmarks
  3. Label landmarks
  4. Structure the main content
  5. Create a sound document outline
  6. Present content in order

3. Linking Content

Hyperlinks are the basis of the World Wide Web. That is why Chapter 3, which is all about linking content, is one of the book’s most extensive chapters. It analyzes the characteristics of the <a> element and helps you apply it efficiently. You’ll learn how to link different types of content, images, and groups of elements. One recipe focuses on client-side routing and what to consider when linking pages in a single application. Another addresses how to visually style links.

Recipes

  1. Pick the right element
  2. Style links
  3. Create download links
  4. Create email links
  5. Link images
  6. Inform users of changing context
  7. Fix client-side rendering
  8. Add links to groups of elements

4. Performing Actions

Chapter 4 is similar to the previous chapter, except that it puts the <button> element in the spotlight. You’ll learn different techniques for labeling buttons and how to use them with the most common ARIA attributes.

Recipes

  1. Pick the right element
  2. Label buttons clearly
  3. Remove default button styles
  4. Add states and properties
  5. Don’t disable buttons

5. Styling content

In Chapter 5, we move from HTML to CSS and discuss color, contrast, animation, units, and sizes. You’ll learn how to write CSS in a way that respects users’ preferences.

Recipes

  1. Work with color
  2. Respect user preferences
  3. Work with units and sizes
  4. Preserve semantic information and operability
  5. Add motion and animation

6. Managing Focus

Keyboard accessibility is an important topic in this book. Chapter 6 outlines everything you need to know about focus styling, focus management, and DOM order.

Recipes

  1. Provide focus styles
  2. Make elements focusable
  3. Move focus
  4. Keep focus contained
  5. Preserve order
  6. Allow users to skip elements

7. Navigating Sites

Almost every website has a main navigation. Chapter 7 dissects a typical site navigation and explains every part in detail, explaining why certain semantic elements can be useful for screen reader users. You’ll learn how to create responsive navigation with submenus and understand the difference between navigations and menus.

Recipes

  1. Create a Main Navigation
  2. Highlight the active page
  3. Announce the number of items
  4. Provide quick access
  5. Hide the navigation on narrow viewports
  6. Add a slide-in animation
  7. Add sub menus
  8. Avoid confusion with menus

8. Toggling Content Visibility

There are different ways of hiding content in CSS and HTML. Chapter 8 discusses their pros and cons. You’ll learn how to create disclosure widgets and accordions. The chapter also compares the native <details> element with custom solutions.

Recipes

  1. Hide content
  2. Create a native disclosure widget
  3. Create a custom disclosure widget
  4. Create groups of disclosure widgets

9. Constructing Forms

Chapter 9 focuses on a complex topic: forms. It starts with general best practices for creating forms and gets more specific with every recipe. You’ll learn the most important aspects of form design: labeling, description of form elements, error management, and grouping.

Recipes

  1. Create forms
  2. Identify form elements
  3. Describe form fields
  4. Highlight erroneous fields
  5. Group fields in a form
  6. Split forms into steps

10. Filtering Data

In Chapter 10, you’ll learn how to build a filter form from start to finish. You’ll also be introduced to dynamic feedback for screen reader users, pagination, and sorting.

Recipes

  1. Create a form
  2. Filter the data
  3. Paginate results
  4. Sort and display results
  5. Group filters

11. Presenting Tabular Data

Tables are misused so much that many developers are afraid of working with them. Chapter 11 demystifies the <table> element and presents best practices and guidance for using it. It also explains how to sort tables and combine them with interactive elements.

Recipes

  1. Pick the right elements
  2. Structure tables
  3. Add interactive elements
  4. Sort columns

12. Creating custom elements

Custom elements are an exciting standard and, paired with other APIs, a powerful tool for creating web components. Chapter 12 explains everything you must consider regarding accessibility when working with them.

Recipes

  1. Working with IDs
  2. Creating ARIA references
  3. Focus elements in Shadow DOM
  4. Debugging and testing
  5. Enforce best practices

13. Debugging Barriers

Trust is good; control is better. Chapter 13 introduces you to automatic testing and debugging tools that help you identify, debug, and fix accessibility issues.

Recipes

  1. Find accessibility issues automatically
  2. Explore the accessibility tree
  3. Debug roles, names, properties, and states
  4. Visualize tabbing order
  5. Emulate color deficiencies, reduced motion, and more
  6. Write custom debugging rules