The Cake Is a Lie... And So Is Your Login's Accessibility

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 encounter 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 session, we will debug the accessibility issues of a real React login component live, similar to navigating those test chambers. Using an actual screen reader, we'll demonstrate how minor improvements in your login form can transform a complex test chamber into a seamless user experience.

Vorkenntnisse

• No specific requirements, apart from basis Frontend Development knowledge (HTML, CSS, JS/TS)

Lernziele

I detail, Ramona'll cover those points/traps:

• The WCAG success criterion Accessible Authentication (3.3.8)
  
• No description about how the password should look like (length, strengh)
  
• Placeholder as label
  
• No proper required field indicator
  
• No error handling on invalid fields for the screen reader
  
• No sufficient invalid field indication in the design/UX (No icon, only red outline)
  
• … next to the typical things like alt-attribute, semantic HTML