Skip to main content

Accessible Components from Design to Development

Carie Fisher
Your instructor
Carie Fisher

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 workshop • Monday, October 7, 2024.
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, responsible AI and utilize testing tools and techniques at each step of the product development lifecycle.

Here’s What You Should Be Expecting:

  • Inspiring & Inclusive

    A full day of teaching in a friendly, inclusive group

  • Interactive & Practical

    Plenty of time for practice & feedback

  • Hands-on exercises

    With reviews by your teacher

  • Collaborative

    Learn from your teacher and other attendees

  • Dedicated Q&A time

    To ask all your questions

  • Digital Smashing Certificate

    A well-deserved reward for your work

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
  • Responsible AI
    • How to write more accessible code snippets with GitHub Co-pilot AI
    • Using responsible AI chatbots for scaling teams and growing accessibility knowledge
  • 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 take place the day before SmashingConf. The workshop will be running from 9:00 AM to 4:45 PM on Monday, October 7, at the Microsoft Conference Center.

Schedule for Monday, October 7

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 US$100 when signing up for the conference and a workshop!