Skip to main content Jump to list of all articles Jump to all topics

Author Heydon Pickering

16 articles

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.

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.

Read more…

Building Accessible Menu Systems

Building Inclusive Toggle Buttons

Building Pattern Libraries With Shadow DOM In Markdown

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

Reimagining Single-Page Applications With Progressive Enhancement

Creating Cel Animations With SVG

“It’s Alive!”: Apps That Feed Back Accessibly

The WAI Forward

Semantic CSS With Intelligent Selectors

Structural Semantics: The Importance Of HTML5 Sectioning Elements

The Perfect Paragraph

Inclusive Design Patterns (eBook)

Inclusive Design Patterns

We might not realize it, but as developers, we build inaccessible websites all the time. It’s not for the lack of care or talent though — it’s a matter of doing things the wrong way. In our new book, Inclusive Design Patterns, we explore how we can craft accessible interfaces without extra effort — and what front-end design patterns we can use to create inclusive experiences.

Accessibility has always been a slightly unsettling realm for web developers. Surrounded with myths, misunderstandings and contradicting best practices, it used to be a domain for a small group of experts who would “add” accessibility on top of the finished product. Today, in many simple and complex websites, it’s still unclear what makes up an accessible interface and what developers need to know to get there.

Read more…