Much like the promise of cake in Portal, login forms are everywhere in web development. While they may seem functional at first glance, many users with disabilities perceive a maze of invisible walls, from keyboard traps to inaccessible CAPTCHA. It's as if GLaDOS designed these forms herself to test us!In this workshop, we will fix accessibility problems in a real React login component together.

We will learn about the WCAG and how it helps you to keep your website accessible to everyone.

We will explore how simple changes can significantly improve the user experience.

For example, by using ARIA tags correctly and managing focus more effectively, and what matters for authentication in particular. And of course, how does AI come into the mix? The promise of cake may be a lie (or isn't it? 🤔), but accessibility can and should be!

Core Topics & Common Traps

• The WCAG Framework: Understanding success criteria and how to apply them.
• Form Field Improvements: * Moving beyond placeholders as labels.
  • Defining clear password requirements (length, strength).
  • Implementing proper "required field" indicators.
• Accessible Error Handling: * Communicating invalid fields to screen readers.
  • Designing visual cues beyond simple "red outlines" (e.g., icons and text).
• Fundamental Best Practices: Semantic HTML, alt attributes, and tab-index management.
• Edge Cases: Mastering Accessible Authentication patterns.
• The AI Connection: How AI tools assist (and sometimes hinder) accessibility.
• Testing Strategies: Methods for systematic accessibility audits.