Accessible front-end patterns

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.

Here’s what you should be expecting

• Interactive live sessions — 5 × 2.5h live sessions
• Practical insights — from user testing to building components
• Hands-on exercises — with reviews by your teacher
• Lifetime access — to all video recordings and examples
• Dedicated Q&A time — to ask all your questions
• 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.

Day 1 — Accessible Component Fundamentals & Design Accessibility

• Virtual doors open, registration, chat and introductions.
• Workshop session
  • 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
• Q&A with Carie on the day’s material. Chat with each other.

Day 2 — Testing Tools and Techniques

• Virtual doors open, registration, chat and introductions.
• Workshop session
  • Automated accessibility testing
  • Manual accessibility testing
  • Assistive technology testing
  • UX and acceptance testing
• Q&A with Carie on the day’s material. Chat with each other.

Day 3 — ARIA + HTML

• Virtual doors open, registration, chat and introductions.
• Workshop session
  • Introduction to ARIA
  • When to use ARIA vs. HTML
  • Examples focus on:
    • Content structure
    • Tabbing order
    • Other document elements
• Q&A with Carie on the day’s material. Chat with each other.

Day 4 — CSS

• Virtual doors open, registration, chat and introductions.
• Workshop session
  • CSS accessibility fundamentals
  • Examples focus on:
    • Color and contrast
    • Images, animation, and motion
    • Typography and focus indicators
• Q&A with Carie on the day’s material. Chat with each other.

Day 5 — JavaScript

• Virtual doors open, registration, chat and introductions.
• Workshop session
  • JavaScript accessibility fundamentals
  • Examples focus on:
    • Trigger events
    • Focus/state management
    • Dynamic content
• Q&A with Carie on the day’s material. Chat with each other.