Accessible Frontend Patterns

Your instructor: Manuel Matuzović
Tickets: Get a ticket ↓

Workshop includes:

🔖 Practical examples to take away
🗣 Interactive sessions
📺 Workshop recordings
🎤 Dedicated Q&A time
🏅 Smashing Certificate

Workshop, 5×2h + Q&A • Mon & Tue, October 12 – November 2, 2026
9:00 – 11:30 AM PT • 18:00 – 20:30 CET • Check your time zone ⏰

To build an accessible website, we need to understand HTML well. But once our designs and patterns get more complex and dynamic, being good at HTML is not enough. We need practical knowledge about UX, ARIA, assistive technology, and testing tools.

In this workshop, Manuel Matuzović will teach you how to build and test complex accessible components like accordions, modals, tabs, cards, and tables.

Here’s What You Should Be Expecting:

Interactive live sessions

5 × 2.5h live sessions

Practical insights

From foundational concepts to real-world component patterns

Hands-on exercises

With reviews by Manuel

Lifetime access

To all video recordings and examples

Dedicated Q&A time

To ask all your questions

Smashing Certificate

A well-deserved reward for your work

$350^.00 $450^.00 Register for this workshop → 5 × 2h live sessions + Q&A. Oct 12 – Nov 2.
With all video recordings & slides. Get a ticket.

🎪 Save up to 25% on this workshop with a Smashing Membership.

You will get a deep understanding of foundational accessibility principles as we go through various UI patterns. Each pattern teaches an important aspect of accessibility, and you will walk away with practical techniques you can apply in your projects right away.

What Will Attendees Learn In This Workshop?

We’ll walk through common UI patterns and what it takes to make them accessible. We’ll explore how code translates to assistive technology and how to handle complex interactions.

Some topics we’ll cover include:

The accessibility tree and Accessibility APIs: How browsers communicate with assistive technology, and how to inspect how your code is conveyed to screen readers.
HTML and HTML Accessibility API mappings: What makes HTML elements accessible, and how your markup decisions affect assistive technologies.
Responsible ARIA: When ARIA helps, and how to avoid over-ARIAing.
Accessible names and descriptions: How accessible names are computed, and techniques for writing more DRY, maintainable code.
Patterns:
- Navigation patterns: Simple site navigation, dropdown navigation, and slideout navigation.
- Tooltips and other popovers: Using native browser features and progressive enhancement.
- Dialogs: Creating accessible dialogs with modern HTML patterns.
- Buttons and disclosure widgets: Building robust show/hide interactions.
- Accordions: Communicating relationships between grouped disclosures.
- Cards: Managing complex clickable areas and information hierarchy.
- …and as many more as time allows.

We’ll cover requirements for building these patterns and how to avoid common pitfalls so your components meet accessibility expectations.

Who Is This For?

This workshop is designed for front-end developers who are already comfortable with HTML and CSS. We’ll cover several foundational accessibility concepts as we go, but you’ll get the most out of this workshop if you already have some experience with accessibility.

What Hardware/Software Do You Need?

Please bring your own laptop and headphones or earphones. We’ll send a list of tools and resources to install before the workshop, including screen reader setup instructions.

The workshop is packed with content, so come prepared to take notes. At the end, you’ll receive the slides and a mini pattern library of the components covered in the workshop.

About Manuel Matuzović

Manuel Matuzović is a frontend developer who's passionate about HTML and CSS. He's a freelance consultant, accessibility auditor, teacher, and book author. He writes about accessibility, HTML, and CSS on his personal blog matuzo.at and htmhell.dev.

Time & Schedule

This workshop is split over five days. The workshop sessions will run on the following days:

Mon, October 12, 9:00 – 11:30 AM PT (18:00 – 20:30 CET)
Tue, October 13, 9:00 – 11:30 AM PT (18:00 – 20:30 CET)
Mon, October 19, 9:00 – 11:30 AM PT (18:00 – 20:30 CET)
Tue, October 20, 9:00 – 11:30 AM PT (18:00 – 20:30 CET)
Mon, November 2, 9:00 – 11:30 AM PT (18:00 – 20:30 CET)

$350^.00 $450^.00 Register for this workshop → 5 × 2h live sessions + Q&A. Oct 12 – Nov 2.
With all video recordings & slides. Get a ticket.

🎪 Save up to 25% on this workshop with a Smashing Membership.