---

$300^.00 $400^.00 Register for this workshop → 4 × 2h live sessions + Q&A. August 18–27.
With all video recordings & slides. Get a ticket.

You’ll leave the workshop with a toolbox for evaluating, styling, and building accessible tooltips, popovers (toggletips), dropdown menus, modals, and tabs.

Learn about anchor positioning, new animation behaviors, cascade layers, composing dynamic styles using custom properties as an API, and more for modern CSS. Scripted solutions will be vanilla JS with no framework reliance, and we will also discuss how to evaluate ready-made components for accessibility.

Take-away techniques include roving tabindex, light dismiss, and handling of expected keyboard behaviors.

You’ll walk away with the skills (and confidence!) to create a wide range of components — plus a trusty toolbox of techniques to build interactive and accessible components from scratch or improve what you already have.

Who is this workshop for?

If you haven’t had time to catch up with the latest CSS capabilities or figure out how to integrate them into your projects, this workshop is for you! Additionally, emphasizing accessible best practices for interactive components is critical, whether you are building your own or using ones from a library.

Whether you’re a solo freelancer or part of a large development team, even with an existing design system, this workshop will upgrade your CSS and JS skills and increase your awareness of accessibility considerations.

The workshop will be pretty evenly split between writing CSS, writing JS, and reviewing accessibility criteria, including testing.

What do you need for this workshop?

• A baseline knowledge of CSS and JavaScript is recommended.
• No JavaScript framework knowledge is required as none will be used.
• Notes and full code samples will be provided after the workshop.

---

About Stephanie Eckles

Stephanie Eckles is a Senior Design Engineer for Adobe Spectrum CSS and a member of the CSSWG. She’s also the author of ModernCSS.dev, which provides modern solutions to old CSS problems as in-depth articles, and is the creator of StyleStage.dev, and author of SmolCSS.dev and 11ty.Rocks.

Steph has 15+ years of webdev experience that she enjoys sharing as an author, workshop instructor, and conference speaker. She’s an advocate for accessibility, scalable CSS, and web standards. Offline, she’s mom to two girls and enjoys baking and watercolor painting.

Time & Schedule

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

• Mon, August 18, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, August 20, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Mon, August 25, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, August 27, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

$300^.00 $400^.00 Register for this workshop → 4 × 2h live sessions + Q&A. August 18–27.
With all video recordings & slides. Get a ticket.

---

Day 1 — Intro and Tooltips

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM

• Introduction to accessible considerations
• Learn to evaluate when CSS-only solutions are acceptable
• Define, develop, and style an accessible tooltip
• Review accessibility testing

11:00 AM – 11:30 AM
Q&A with Stephanie on the day’s material. Chat with each other.

Day 2 – Popovers and Anchor Positioning

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM

• Introduction to the popover API
• Define, develop, and style accessible popovers/toggletips
• Learn how to position popovers using anchor positioning with a fallback strategy
• Use popover to develop accessible “dropdown menus”
• Review considerations and limitations of the popover API

11:00 AM – 11:30 AM
Q&A with Stephanie on the day’s material. Chat with each other.

Day 3 – Modals and Tabs

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM

• Introduction to native

• Understand the differences between popovers and modal vs. non-modal expectations
• Define, develop, and style an accessible modal
• Define, develop, and style accessible tabs

11:00 AM – 11:30 AM
Q&A with Stephanie on the day’s material. Chat with each other.

Day 4 — CSS Upgrades and Wrap-Up

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM

• Revisit the CSS of each component and integrate upgrades
• Add progressive enhancements for animation, typography, and more
• Understand how to create scalable, future-forward CSS solutions
• Wrap-up with a review of workshop lessons

11:00 AM – 11:30 AM
Q&A with Stephanie on the day’s material. Chat with each other.

Day 5 – Documenting and Collaborating

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM

• Figma team libraries
• Why document?
• For whom to document?
• Where to document: Figma files vs. design systems
• What and how to document: Colors, typography, spacing, components, and more
• Figma dev mode
• Time for your questions

11:00 AM – 11:30 AM
Q&A with Stephanie on the day’s material. Chat with each other.

Subjects and day-by-day might be slightly adapted.