---

$599^.00 Register for this workshop → Get a single workshop, or bundle with a conference.

Wrinting good components requires knowing CSS and JS, especially if you want to make them accessible. This workshop is evenly split between these CSS, JS and accessibility. After starting with a review of accessibility fundamentals, you’ll 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 use 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 accessible components — tooltips, popovers (toggletips), dropdown menus, modals, and tabs and more — plus a trusty toolbox of techniques to build interactive and accessible components from scratch or improve what you already have.

What You Will Be Learning

Part 1: Accessibility Fundamentals & Testing

• Introduction to accessibility fundamentals
• Review accessibility testing

Part 2: Tooltips & CSS Considerations

• Learn to evaluate when CSS-only solutions are acceptable
• Define, develop, and style an accessible tooltip

Part 3: Popovers and Anchor Positioning

• 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

Part 4: Modals and Tabs

• 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

Closing

Wrap-up with a review of workshop lessons

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 & Location

This full-day workshop will take place the day before SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Monday, October 6.

Schedule for Monday, October 6

8:30 AM – Doors open, Registration
9:00 AM – Introduction & Kick-off
10:30 AM – Coffee Break
12:00 PM – Lunch
1:00 PM – Afternoon Session
2:45 PM – Coffee Break
4:45 PM – The End

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