Author Heydon Pickering

November 6, 2019 —

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.

November 23, 2017 — Creating inclusive experiences is a question of using the right menu patterns in the right places, with the right markup and behavior. In design, we often make the mistake of giving different things the same name. They appear similar, but appearances can be deceptive. In terms of inclusion, it may lead you to repurpose a semantically and behaviorally inappropriate component. Users will expect one thing and get another. In this article, Heydon Pickering will give you an insight into inclusive menus and menu buttons. Read more…

September 19, 2017 — Making toggle button inclusive is a question of language, visual design, markup, and behavior. In this inaugural post, Heydon Pickering will be exploring what it takes to make toggle buttons inclusive. As with any component, there’s no one way to go about this, especially when such controls are examined under different contexts. However, there’s certainly plenty to forget to do or to otherwise screw up, so let’s try to avoid any of that. You can take the basics explored here and add all sorts of design nuances, including animation. It’s just important to lay a solid foundation first. Read more…

July 11, 2017 — Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn’t be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors. When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I’m documenting inline, and this isn’t possible unless the documentation itself is made of HTML, CSS and JavaScript. In this article, I’ll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation. Read more…

November 21, 2016 — If you don’t want your design to look like it’s made out of unrelated things, this article is for you. There is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, you can propagate styles that cross the borders of your HTML components, ensuring a consistent design with minimal effort. Today, Heydon Pickering is going to revisit inheritance, the cascade and scope here with respect to modular interface design. He aims to show you how to leverage these features so that your CSS code becomes more concise and self-regulating, and your interface more easily extensible. Read more…

September 11, 2016 — Errata of the Inclusive Design Patterns book. Read more…

December 21, 2015 — Single-page applications tend to take the form of runtimes, JavaScript executables deployed like popup shops into vacant  elements. In this article, Heydon Pickering will introduce a solution for architecting progressive single-page applications using little more than a couple of CSS tricks, less than 0.5 KB of JavaScript and, importantly, some static HTML. It is not a perfect or complete solution, but it testifies to the notion that performant, robust and indexable single-page applications are achievable: You can embrace web standards while reaping the benefits of sharing data and functionality between different interface screens on a single web page. Read more…

September 14, 2015 — In this article, Heydon Pickering mixes old with new, taking a somewhat primitive art and breathing new life into it. With the help of Sass, he streamlines the necessary workflow and hopefully demonstrating that automation can, sometimes, be a friend to creativity. The reason he conceived the technique and wrote the necessary code for this article is because he really wanted to make cel animations of his drawings. There was already a goal. The design part is in determining what we want to make in the first place, for whom, and whether it’s really such a good idea. Read more…

April 27, 2015 — Perhaps the only thing worse than a fire that could happen to the office of a web development company would be losing connectivity to the web. This is why Google Mail inserts a warning whenever you go offline. As noted in Marco Zehe’s 2008 blog post, Google was an early adopter of ARIA live regions. In this article, Heydon Pickering is going to create a script which tests whether the user is online or off and uses ARIA to warn screen reader users of the change in this status so they know whether it’s worth staying at their desk or giving up and going for a beer. Read more…

July 9, 2014 — Because the W3C’s mission from the outset has been to make the web accessible, accessibility features are built into its specifications. As responsible designers, we have the job of creating compelling web experiences without disrupting the inclusive features of a simpler design. We need to find a way to adopt new tools and techniques to keep the playing field level. It’s time to embrace change. This article is an excerpt of a chapter in the eBook that introduces many of the ideas and techniques presented. Read more…

August 20, 2013 — In this article, we will explore an alternative approach to styling Web documents. With the use of “intelligent” selectors, we’ll cover how to query the extant, functional nature of semantic HTML in such a way as to reward well-formed markup. If you code it right, you’ll get the design you were hoping for. Heydon Pickering hopes that employing some of these ideas will make your workflow simpler and more transferable between projects. Read more…

January 18, 2013 — Now that HTML5 has finally made sectioning elements available, many of us greet them with great reluctance. Make no mistake: Sectioning elements help you improve document structure, and they’re in the spec’ to stay. Once and for all, Heydon Pickering will be exploring the problems these elements solve, the opportunities they offer and their important but misunderstood contribution to the semantic Web. Some people will tell you not to bother with sectioning. They say that it’s hard work or that it doesn’t make sense. This is hokum. Using sections demonstrably enhances HTML structure without breaking accessibility. Read more…

June 19, 2012 — Classes, classes, classes everywhere. What if we don’t need CSS classes at all? What if we stopped worrying about how many classes we’re using and what we should be calling them and just finished with them once and for all? Read more…

November 29, 2011 — In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now. Despite their ubiquity, we frequently neglect their presentation. This is a mistake. Read more…

January 1, 0001 — We make inaccessible and unusable websites and apps all the time, but it’s not for lack of skill or talent. It’s just a case of doing things the wrong way. We try to build the best experiences we can, but we only make them for ourselves and for people like us. Read more…

January 1, 0001 —

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.