---

€549^.00 Excl. 21% VAT Register for this workshop → Get a single workshop, or bundle with a conference.

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

What you will learn

We’ll walk through some of the most common UI patterns and learn what it takes to make them accessible. We will 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 the browser communicates with assistive technology, and how you can get insights into how your code is conveyed to assistive technologies like screen readers.
• HTML and HTML Accessibility API mappings: What makes HTML elements “accessible”? How does the way you write HTML affect how it is conveyed to assistive technologies like screen readers?
• Responsible ARIA: When to use ARIA and how to avoid the “over-ARIAing” trap.
• Accessible names and descriptions: How the browser computes the accessible names of elements, and what that means to how you provide accessible names and descriptions. We’ll learn a few tips and techniques for writing more ‘DRY’ (Don’t Repeat Yourself) code.
• Patterns:
  • Navigation patterns: simple website navigation, dropdown navigation, and slideout navigations.
  • Tooltips and other popovers: Using the new native button functionalities to create tooltips and other types of popovers.
  • Dialogs: Using native HTML to create accessible dialogs (mostly without javaScript today!)
  • Buttons and disclosure widgets: Accessible show/hide patterns.
  • Accordions: Communicating relationships between groupings of disclosure widgets.
  • Cards: Managing complex clickable areas and information hierarchy.
  • and as many more as time allows

We’ll cover the requirements for building these patterns, and how to avoid common pitfalls to ensure your patterns meet accessibility requirements.

What prerequisites skills do you need?

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 through the workshop, but you’ll get the most out of this workshop if you already have some experience with accessibility.

What hardware/software do you need?

You will need to bring your own laptop, as well as headphones or earphones. We’ll be sending you a list of tools and resources to install before the workshop, including screen reader setup instructions.

The workshop is packed with content, so prepare to take a lot of notes, and have a lot of homework to do when you’re back home or in the office. At the end of the workshop, you will get a copy of the workshop slides, as well as a mini pattern library of all the components covered in the workshop.

About Sara Soueidan

Sara Soueidan is an inclusive UI engineer, author, speaker, and educator from Lebanon. With more than a decade of experience in front-end development, she has worked with companies around the world building accessible, performant web interfaces with a focus on responsive design, accessibility, and cutting-edge tech.

Today, she is dedicated to teaching designers and developers how to create inclusive and usable web interfaces. She is the creator of the “Practical Accessibility” course—an online video course for Web designers and developers who want to start creating more accessible Web user interfaces today.

She is also the author of the Codrops CSS Reference and co-author of Smashing Book 5. She writes about inclusive UI engineering on her blog and delivers talks and workshops at events worldwide, sharing practical insights for building scalable, resilient, and accessible front-end foundations.

Time & Location

This full-day workshop will take place the day before SmashingConf. The workshop will be running from 09:30 to 17:00 on Monday, April 13, 2026.

The workshop is happening at Theo Thijssenhuis (HvA), Wibautstraat 2-4, 1091 RZ Amsterdam.

Schedule for Monday, April 13, 2026

09:00 – Doors open, Registration
09:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:00 – The End

Save 100 EUR when signing up for the conference and a workshop!