Heydon Pickering

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)

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.

Each chapter tackles a single component, addressing how we might read and interact with it, and how we can make the component more reliable and robust for every single customer.

Toggle Buttons +: What does it take to make toggle buttons inclusive? To start off, Heydon takes a look at common pitfalls and what you need to keep in mind to do better.
A Todo List +: You’ll learn how to build an integrated todo list component from the ground up. This doesn’t have to apply only to todo lists but also to making the basic creation and deletion of content inclusive.
Menus & Menu Buttons +: Menus, dropdowns, subnavigation. There’s a lot of confusion happening around these terms. Why is this happening, why are WAI-ARIA semantics often misused here, how do we properly use “hamburgers” and “navicons,” and what do you need to consider to make your menus keyboard- and screen-reader-accessible?
Tooltips & Toggletips +: Inclusive design is often about providing the user with the right tool for the job and the right kind of tooltip to go with that tool. In this chapter, we’ll be looking at situations which might call for a tooltip and learn how to formulate inclusive implementations for them.
A Theme Switcher +: Offering alternative themes often represents a maintenance issue. This chapter explores how to make an efficient and portable React component that allows users to switch a default light theme into “dark mode”.
Tabbed Interfaces +: What makes a tabbed interface a tabbed interface is in the ergonomics of its keyboard behavior. Heydon takes you step-by-step through the process of applying ARIA semantics to master the challenges that tabbed interfaces might bring along.
Collapsible Sections +: Although implementing collapsible sections is rather simple, the interaction does not have a consistent native implementation across browsers. The tips in this chapter will help you turn your collapsible regions into web components that are easy to include as part of larger patterns and in content files.
A Content Slider +: Carousels don’t have to be bad, but we have a culture of making them bad. This chapter explores how you can create something that fulfills a basic purpose without overloading it with features.
Notifications +: When web pages undergo changes as you operate them, it’s important that users are kept abreast of changing states. This chapter looks at notification components and how they can increase confidence in the use of web applications, in an inclusive way.
Data Tables +: Let’s explore what it takes to make your data tables screen reader accessible, responsive, and as ergonomic as possible for everyone. Plus a trick for fixing old layout tables that cause confusion for visually-impaired users.
Modal Dialogs +: Modal dialogs are often contentious and problematic, so let’s reconsider if they really make sense for your use case and, if yes, examine them in the context of inclusive design thinking and performance.
Cards +: The card component is the last component tackled in the book as it requires the most invention. So in this final chapter, we’ll look into a few permutations of a simple card component and find a balance between sound HTML structure and ergonomic interaction.

About The Author

Heydon Pickering (@heydonworks) has worked with The Paciello Group, The BBC, Smashing Magazine, and Bulb Energy as a designer, engineer, writer, editor, and illustrator. He was shortlisted for Designer Of The Year in The Net Awards. Heydon previously wrote Inclusive Design Patterns which sold over 10,000 copies. Proceeds from this title were donated to the ACLU and The Democratic Socialists Of America, to help these organizations fight fascism and create a more inclusive society.

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.

Frequently Asked Questions

If you have any questions, we are right here to answer them. We love our customers, and we’d love to help you in any way or just listen to your story. So please feel free to ask questions via @smashingmag on Twitter — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

How much does shipping cost to my country? +: No shipping costs — wherever you are in the world! We ship everywhere, worldwide, via airmail shipping. What you see is what you pay. No ifs or buts.
Delivery times to my country? +: All books are shipped via airmail to keep delivery times as short as possible. You can check the anticipated delivery times for your country.
Is the eBook included with print? +: When you purchase a printed book, you’ll get a friendly discount on the eBook. All eBooks are available in usual formats — PDF, ePUB, and Amazon Kindle.
What payment methods are accepted? +: PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers. (Obviously.)
Is there a money-back guarantee? +: Yes, absolutely! No risk at all — our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back without ifs or buts!
I have a question that is not covered here. +: No worries! Please get in touch with us via the contact form. We would love to help you as soon as we possibly can!