Accessibility Cookbook
There is a lot written about making your website or app accessible, but as a developer, it's sometimes hard to get "just the facts," the information you need to get the task at hand done. This cookbook tries to distill what's out there into something actionable by creating recipes that solve common problems.
Legend
- Tags are indicated with uppercase, such as DIV, SECTION, and INPUT.
- Attributes are indicated with monospaced text, such as
aria-live="polite",id, androle. - AT is short for Assistive Technology
What's understood
The recipes are concise, but occasionally offer some explanation for why a particular attribute is set, or a piece of markup used. It would be repetitive to give the same explanation across multiple recipes because a particular operation is done so often, but they are important to know, so we're calling them out here.
- The examples are not exhaustive. They show you only what you need to build the accessible component, follow a pattern, or solve a problem. You are expected to take the example and "run with it" in your own application.
- In some cases, an interaction is described, such as "listen for
clickevents." You're expected to use whatever method or framework makes sense for your application (addEventListener, $.on(), React, and so on). - Setting
tabindex="0"on an element makes in focusable in the natural order of the markup of its page. By following the natural order, tabbing in a page will feel right.