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 CAPTCHAs. 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 traversing those test chambers: Using an actual screen reader, we'll show how small improvements, such as proper ARIA implementation and effective focus management, can transform a complex test chamber into a smooth user experience. Additionally, we will address the common pitfalls that GLaDOS might throw at us in both the Portal universe and the real world. Last but not least, we'll discover authentication features, which will help us keep authentication accessible for everyone.

Transcript

1. @leichteckig
2. @leichteckig The cake is a lie!
4. @leichteckig The cake is a lie! "For your own safety and the safety of others, please refrain from-- [bzzzzzt]" "Por favor bord ó n de fallar Muchos gracias de fallar gracias"
5. @leichteckig The cake is a lie! This may be how it feels if you have a disability
6. @leichteckig The cake is a lie!
7. @leichteckig The cake is a lie!
8. @leichteckig The cake is a lie! 01/XX "Hello and, again, welcome to the [a11y] enrichment center." - IRL Situation
9. @leichteckig The cake is a lie! Cake [...] will be available at the conclusion of the test. a11y == cake
10. @leichteckig The cake is a lie! Permanent Temp Situational Permanent Temp Situational Touch See Hear Speak
11. @leichteckig The cake is a lie! A11y == websites, applications, etc usable and accessible for everyone
12. @leichteckig The cake is a lie!
13. @leichteckig The cake is a lie! 01/07 This Weighted Companion Cube will accompany you through the test chamber. Please take care of it." - Screen Reader
14. @leichteckig The cake is a lie! 01/07 This Weighted Companion Cube will accompany you through the test chamber. Please take care of it." - Screen Reader Companion Cube
15. @leichteckig The cake is a lie!
16. @leichteckig The cake is a lie! "Most importantly, under no circumstances should you [bzzzpt]" - Error Handling 02/07
17. @leichteckig The cake is a lie! Screenshot
18. @leichteckig The cake is a lie!
19. @leichteckig The cake is a lie!
20. @leichteckig The cake is a lie!
21. @leichteckig The cake is a lie!
22. @leichteckig The cake is a lie! Thanks for inviting me in!
23. @leichteckig The cake is a lie! "Do not look directly at the operational end of The Device" - Semantics 03/07
24. @leichteckig The cake is a lie!
25. @leichteckig The cake is a lie! 04/07 "You are now in possession of the Aperture Science Handheld Portal Device" - Keyboard Navigation
26. @leichteckig The cake is a lie!
27. @leichteckig The cake is a lie! .input-field { outline: none; &:focus { border-color: var(--color-primary); } } .btn { outline: none; }
28. @leichteckig The cake is a lie! .input-field { /* Keep the outline and style it */ &:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } } .btn { /* Keep the outline and style it */ &:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } }
29. @leichteckig The cake is a lie!
30. @leichteckig The cake is a lie!
31. @leichteckig The cake is a lie! "Who's gonna make the cake when I'm gone? You?" - Authentication specifics 05/07
32. @leichteckig The cake is a lie! Web Content Accessibility Guidelines (WCAG) - SC 3.3.8
33. @leichteckig The cake is a lie! Web Content Accessibility Guidelines (WCAG) - SC 3.3.8
34. Never do Object recognition or Personal content identification!
35. @leichteckig The cake is a lie! Multi-Factor Authentication (MFA/2FA)
36. @leichteckig The cake is a lie!
37. @leichteckig The cake is a lie!
38. @leichteckig The cake is a lie!
39. @leichteckig The cake is a lie!
40. @leichteckig The cake is a lie! "Thank you for helping us help you help us all." Slides