Skip to main content

Accessible Components from Design to Development

Carie Fisher
Your instructor
Carie Fisher
Tickets
Get a ticket

Workshop includes:

  • 🧑‍🏫 A full day of teaching in a small group
  • 🏅 Digital certificate
  • 🍵 Tea, coffee, snacks and drinks during the whole day
  • 🥪 Lunch
  • 📒 Paper and pen/pencil

Full-day in-person workshop • Fri, May 26, 2023.
Digital accessibility is the practice of making products — such as websites and apps — accessible to everyone, including those with disabilities. But accessibility is often an afterthought at the end of a project when a user submits a bug or when legal issues arise — if it is thought of at all.

In this workshop, Carie will walk through the process of creating accessible front-end components from design to development. Throughout the workshop sessions, we will rely on accessibility best practices/guidelines and utilize testing tools and techniques at each step of the product development lifecycle.

While digital accessibility can be difficult or frustrating to many people, it doesn’t have to be. By learning front-end techniques, utilizing targeted accessibility tools, and making small changes to your everyday workflow, you can make the digital world more inclusive — without crushing your creativity or sacrificing your sanity!

We will focus on the areas in front-end components that impact your users most — whether you are writing HTML/ARIA, CSS, or JavaScript. The attendees will leave the workshop with a deeper understanding of digital accessibility and resources to get started designing and building accessible components of their own.

What Will Attendees Learn In This Workshop?

  • Essential accessibility annotations for a smoother design-to-development handoff between teams.
  • An overview of currently available accessible style guides, patterns, and libraries, and how to know what is best for your specific environment.
  • How to conduct basic automated, manual, assistive technology (AT), and user tests — and when each technique/tool should be applied in the software development lifecycle.
  • Focused component walk-throughs and examples for HTML/ARIA, CSS, and JavaScript using a “code along at home” approach to teaching. Attendees will leave with enough resources, tools, and techniques to hit the ground running after the workshop is over!

Who Is This Workshop For?

If you’re a web or app designer or developer and feel comfortable using HTML, CSS, and writing intro-level JS, this workshop is for you. A basic sense of WCAG and digital accessibility is recommended to get the most out of the workshop.

In This Workshop, We Will Cover

  • Accessible Component Fundamentals & Design Accessibility
    • Fundamentals of accessible components and design accessibility
    • Rundown of existing patterns and libraries and how to determine which are the best options for your environment
    • Making inclusive design choices and working with accessibility annotations
  • Testing Tools and Techniques
    • Automated accessibility testing
    • Manual accessibility testing
    • Assistive technology testing
    • UX and acceptance testing
  • ARIA + HTML
    • Introduction to ARIA
    • When to use ARIA vs. HTML
    • Examples focussing on: Content structure, Tabbing order, Other document elements
  • CSS
    • Accessibility fundamentals
    • CSS examples focussing on: Color and contrast, Images, animation, and motion, Typography and focus indicators
  • JavaScript
    • Accessibility fundamentals
    • JavaScript focussing focus on: Trigger events, Focus/state management and Dynamic content

What hardware/software Do You Need?

To get the most out of the workshop, you’ll need to bring a laptop with your preferred text editor. We recommend bringing some headphones for accessibility testing.

About Carie Fisher

Carie Fisher is an author, speaker, and developer with over 15 years of technical experience helping individuals and companies achieve their digital accessibility goals. Carie is the Director of Digital Accessibility at Testlio and is a Ph.D. candidate in Human-Computer Interactions at Iowa State University, focusing on XR technology.

She is passionate about the intersection of front-end code and UX, digital accessibility, and diversity in technology. She recently completed writing the evergreen accessibility course Learn Accessibility with Google’s web.dev team.

Time & Location

This full-day workshop will be hosted at Fort Mason and will take place the day after SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Friday, May 26, 2023.

Schedule for May 26, 2023

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

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