Overview
Note: This pre-event full day workshop runs from 10:00 a.m. to 4:00 p.m. on Wednesday October 9 and requires a separate WORKSHOP ticket to attend.
CSS is more capable than ever, even replacing some behaviours previously only possible via JavaScript. Join this workshop to learn about the dynamic features now available in modern CSS, as well as discover the JavaScript that’s required to ensure accessibility of your components. Learn to establish a “future-first” set of solutions, and review the boundaries that require fallbacks. You’ll leave the workshop with a toolbox for evaluating, styling, and building accessible tooltips, popovers (toggletips), dropdown menus, modals, and tabs.
For modern CSS, learn about anchor positioning, new animation behaviours, cascade layers, composing dynamic styles using custom properties as an API, and more. 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 behaviours.
Objective
Create a library of accessible, interactive components, including cutting-edge modern CSS techniques.
Target Audience
Front-end engineers looking to increase their modern CSS skills and awareness of accessibility requirements for interactive components.
Assumed Audience Knowledge
Working knowledge of basic CSS, HTML, and vanilla JavaScript.
Audience Members Will Learn
- Modern CSS features such as anchor positioning, cascade layers, and advanced custom property use
- Vanilla JS solutions for techniques such as roving tabindex, light dismiss, and responding to specific keys
- Features and limitations of interactive native HTML components
- How to use the native web popover API
- Accessibility requirements for common interactive components
To bring
Preferred note-taking tools, laptops optional
