Workshop: The Cake is a Lie!

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 practical walkthrough, 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 minor 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 of accessibility, especially concerning authentication processes and its special needs. So grab your portal gun—let's work together to break down these barriers and ensure that authentication truly works for everyone. The cake might be a lie, but accessibility doesn't have to be!

Transcript

1. @leichteckig The cake is a lie! Let’s use Slido… and LucidSpark …or enter #reactadvanced-a11y in slido.com
2. … and so is your login‘s accessibility @leichteckig
3. @leichteckig The Cake is a Lie! Who are you? Lucidshart
4. @leichteckig The Cake is a Lie!
5. @leichteckig The Cake is a Lie!
6. @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"
7. @leichteckig The Cake is a Lie! Does this story sound familiar to you? Lucidshart
8. @leichteckig The Cake is a Lie! This could be how it feels, if you have a disability
9. @leichteckig The Cake is a Lie!
10. @leichteckig Title of my talk 01/XX "Hello and, again, welcome to the [a11y] enrichment center." - IRL Situation
11. @leichteckig The Cake is a Lie! Cake [...] will be available at the conclusion of the test. a11y == cake
12. @leichteckig The Cake is a Lie! A11y == websites, applications, etc usable and accessible for everyone
13. @leichteckig The Cake is a Lie!
14. @leichteckig The Cake is a Lie! The European Accessibility Act (EAA) The Americans with Disabilities Act (ADA)
15. @leichteckig Title of my talk Slido Did you experience this before?
16. @leichteckig The Cake is a Lie! Permanent Temp Situational Permanent Temp Situational Touch See Hear Speak
17. @leichteckig The Cake is a Lie! What is Disability for You? Lucidshart
18. @leichteckig Title of my talk … and why Portal? What’s accessibility (a11y)?
19. @leichteckig The cake is a lie! “main” for solutions, “dont” for fixing. https://github.com/leichteckig/ login-a11y/tree/dont
20. @leichteckig The Cake is a Lie!
21. @leichteckig Our Companions Screenreader • describes aloud what appears on your computer screen • Mac: Activate by Command-F5 • VoiceOver will be in use here • Windows: Win + Crtl + Enter • Linux: Super + Alt + S The Cake is a Lie! Google DevTools & Lighthouse • Dev-Tools: A Set of tools directly built into the browser • A11y: Are the page’s elements properly marked up for screen readers? • Lighthouse: Open-source, automated tools for audits… like a11y
22. @leichteckig The Cake is a Lie! Repo 01/XX "Hello and, again, welcome to the [a11y] enrichment center.” - Let’s set up our sample app.
23. @leichteckig The Cake is a Lie! What’s wrong with the form? Tipp: Use the tools we talked about! <3 Lucidshart
24. @leichteckig The Cake is a Lie! 01/XX "Do not look directly at the operational end of The Device" - Semantics
25. @leichteckig The Cake is a Lie!
26. @leichteckig The Cake is a Lie!
27. @leichteckig Semantics “What that <div> exactly?!” • HTML tags to define the meaning and structure of web content • …making it more understandable for both humans and search engines • The right HTML element for the right purpose • …instead of relying on generic tags for styling or layout Title of my talk
28. @leichteckig The Cake is a Lie! Let's use Semantic HTML! Lucidshart
29. @leichteckig Role-Attribute If you really need to go for the <div>… • role=“cakes” overwrites the native semantics • “I’m not a div, but a cake” directed to the screen reader • Like the promise to be cake • Doesn’t add functionality: the <div> stays a plain div • “No ARIA is better than bad ARIA” The Cake is a Lie!
30. @leichteckig The Cake is a Lie! The bad example
31. @leichteckig The Cake is a Lie! 01/XX "Do not look directly at the operational end of The Device" - Let’s bring the label back. Repo
32. @leichteckig The Cake is a Lie! <input placeholder="Username "type="text">
33. @leichteckig The Cake is a Lie!
34. @leichteckig The Cake is a Lie! <label for="username">Username</label> <input id="username" type="text">
35. @leichteckig The Cake is a Lie! Video
36. @leichteckig The Cake is a Lie! 01/XX "What is that? It's not the surprise... I've never seen it before" - Colors
37. @leichteckig The Cake is a Lie!
38. @leichteckig The Cake is a Lie! Choosing a darker color for the input fields border Mind the contrast!
39. @leichteckig The Cake is a Lie! 01/XX "What is that? It's not the surprise... I've never seen it before" - Let’s Fix the Colors. Tipp: Use Google’s DevTools to test. Repo
40. @leichteckig The Cake is a Lie! Video
41. @leichteckig The Cake is a Lie! 03/XX "You are now in possession of the Aperture Science Handheld Portal Device" - Keyboard Navigation
42. @leichteckig The Cake is a Lie!
43. @leichteckig The Cake is a Lie! 01/XX "You are now in possession of the Aperture Science Handheld Portal Device" - Let’s fix the focus state of the input fields and the login button in an accessible way. Repo
44. @leichteckig The Cake is a Lie! .input-field { outline: none; &:focus { border-color: var(--color-primary); } } .btn { outline: none; }
45. @leichteckig The Cake is a Lie! .btn { outline: none; }
46. @leichteckig The Cake is a Lie!
47. @leichteckig The Cake is a Lie! .btn { /* Keep the outline and style it */ &:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } }
48. @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; } }
49. @leichteckig The Cake is a Lie!
50. @leichteckig The Cake is a Lie!
51. @leichteckig The Cake is a Lie! <br/> Be Back in 10 minutes
52. @leichteckig The Cake is a Lie! 04/XX “This Weighted Companion Cube will accompany you through the test chamber. Please take care of it.” - Error Handling in Code
53. @leichteckig Title of my talk
54. @leichteckig ARIA-Tags “Accessible Rich Internet Applications” • Specification of WCAG • A set of defined attributes and roles to describe the status of elements • Enables screenreader to interpret correctly • Roles belong to ARIA, too Title of my talk
55. @leichteckig Title of my talk 04/XX “This Weighted Companion Cube will accompany you through the test chamber. Please take care of it.” - Please change the error handling into a form that can be read through a screen reader Consider… - Fixing required field handling - Reading all error messages aloud - Linking input field with the error message Repo MDN
56. @leichteckig The Cake is a Lie! <div role="alert">
57. @leichteckig The Cake is a Lie! <input aria-required={required} />
58. @leichteckig The Cake is a Lie! <input aria-invalid={!! errorMessage} />
59. @leichteckig The Cake is a Lie! <input id={id} aria-describedby={errorMessage ?? `input-error-${id}` : null} /> {errorMessage && <div id="{`input-error-${id}`}" className="input-error-msg"> {errorMessage} </div> }
60. @leichteckig The Cake is a Lie! <svg aria-hidden="true">
61. @leichteckig The Cake is a Lie! Native Browser Handling can be laggy
62. @leichteckig The Cake is a Lie! 01/XX "Most importantly, under no circumstances should you [bzzzpt]" - Error Handling in UX
63. @leichteckig The Cake is a Lie! Screenshot
64. @leichteckig The Cake is a Lie! Which error messages would you write? Lucidshart
65. @leichteckig The Cake is a Lie! Thanks for inviting me in! <3 Don’t overshare in your error messages!
66. @leichteckig The Cake is a Lie! Color-Blindness!?
67. @leichteckig The Cake is a Lie! 05/XX "Most importantly, under no circumstances should you [bzzzpt]" - Let’s change the form in a way that’s easier to use when colorblind. Repo
68. @leichteckig The Cake is a Lie!
69. @leichteckig The Cake is a Lie! 01/XX "Who's gonna make the cake when I'm gone? You?" - Authentication specifics
70. @leichteckig Title of my talk Slido What can go wrong in accessibility, specifically with authentication?
71. @leichteckig Web Content Accessibility Guidelines (WCAG) The gold standard of a11y • Currently in Version 2.1 • POUR Principle: Everything needs to be Perceivable, Operable, Understandable, and Robust • Three levels: A (absolute minimum), AA (global standard), and AAA (perfect!) • Two Success Criteria for Authentication: 3.3.8 and 3.3.9 The Cake is a Lie!
72. @leichteckig The Cake is a Lie! Do NOT disable paste functionality Biometric authentication Passwordless, e.g. Passkeys and Magic Links
73. @leichteckig The Cake is a Lie! Never do Object recognition or Personal content identification!
74. Never do Object recognition or Personal content identification!
75. @leichteckig Title of my talk Slido What can go wrong in accessibility, specifically with authentication?
76. @leichteckig The Cake is a Lie! Multi-Factor Authentication (MFA/2FA)
77. @leichteckig Multi-Factor Authentication (MFA/2FA) • Offer Multiple MFA Options: Do not limit users to a single MFA method • Consider Cognitive Load for OTPs • Use a generous Time Limit • facilitate auto-copy or provide a "copy code" button • User Interface for MFA • Step indication and reduce Context switches • Mind the QR codes! The Cake is a Lie!
78. @leichteckig The Cake is a Lie!
79. @leichteckig The Cake is a Lie! 01/XX "The experiment is nearing its conclusion." - Some more general tipps
80. @leichteckig The Cake is a Lie!
81. @leichteckig The Cake is a Lie! Which advice do you like to share? Lucidshart
82. @leichteckig The Cake is a Lie!
83. @leichteckig The Cake is a Lie!
84. @leichteckig The Cake is a Lie! "Thank you for helping us help you help us all."