Heydon Pickering

Inclusive Components

Inclusive Components

At its heart, “Inclusive Components” is a detailed, practical handbook for building fully accessible interfaces. The book examines common interface patterns — accordions, tables, tabs, toggles and everything in-between — through the lens of inclusion. The result is a dozen of fully accessible and robust patterns we author, plug in, and use daily. Jump to table of contents.

The book features 12 common UI components, broken down in detail, one by one. The in-depth explorations are meticulously illustrated and code examples culminate as bulletproof code snippets, applicable to your work right away. Plus a strategy for building accessible interfaces for your own components — all in one book. Download a free PDF excerpt (1.1 MB).

You’ll learn how to build:

  • accessible buttons and toggle buttons,
  • navigation menus and dropdowns,
  • keyboard-friendly tooltips,
  • “dark mode” themes,
  • accessible content sliders,
  • inclusive notifications,
  • semantic sortable data tables,
  • accessible dialogs and modals.

  • Published on December 2019
  • Tags: Accessibility, UI

Print + eBook

$44.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

€18.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with your Smashing Membership.

“Inclusive Components is chock-full of practical and comprehensive advice on building accessible UI. It’s my go-to resource after the official WCAG and ARIA documentation. I’ve found it extremely helpful when building our design system!”

Sarah Federman

Senior front-end developer

About The Book

Because we often build and deploy under tough deadlines, we tend to break accessibility without even noticing it. Our products become slower, clunkier and more painful to use — often simply unbearable for keyboard- and screen reader users, and as such fragile and vulnerable for legal disputes. Let’s fix it.

We’ve teamed up with Heydon Pickering, a seasoned front-end developer with a focus on accessibility, to examine common web UI patterns through the lens of inclusion. The result is a dozen of accessible and robust solutions for the patterns we author, plug in, and use every day.

With Inclusive Components, we’ve tried to create a very focused handbook with applicable, long-living solutions and strategies to create accessible and inclusive interfaces. Download a free PDF sample (PDF, 1.1 MB)