Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Cake Is a Lie... And So Is Your Login’s Acc...

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.

Avatar for Ramona Schwering

Ramona Schwering

August 15, 2025
Tweet

More Decks by Ramona Schwering

Other Decks in Technology

Transcript

  1. @leichteckig Title of my talk What was your biggest "The

    Cake is a Lie" moment? #kcdc-cake Please join me in slido.com!
  2. @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"
  3. @leichteckig The cake is a lie! This may be how

    it feels if you have a disability
  4. @leichteckig The cake is a lie! Cake [...] will be

    available at the conclusion of the test. a11y == cake
  5. @leichteckig The cake is a lie! 01/XX "Hello and, again,

    welcome to the [a11y] enrichment center." - IRL Situation
  6. @leichteckig The cake is a lie! What is “Accessibility” for

    you”? #kcdc-cake Please join me in slido.com!
  7. @leichteckig The cake is a lie! The European Accessibility Act

    (EAA) The Americans with Disabilities Act (ADA)
  8. @leichteckig The cake is a lie! What might be wrong

    with the login form? #kcdc-cake Please join me in slido.com!
  9. @leichteckig The cake is a lie! 01/07 "Do not look

    directly at the operational end of The Device" - Semantics
  10. @leichteckig The cake is a lie! 01/07 "What is that?

    It's not the surprise... I've never seen it before" - Colors
  11. @leichteckig The cake is a lie! Choosing a darker color

    for the input fields border Mind the contrast!
  12. @leichteckig The cake is a lie! 03/07 "You are now

    in possession of the Aperture Science Handheld Portal Device" - Keyboard Navigation
  13. @leichteckig The cake is a lie! .input-field { outline: none;

    &:focus { border-color: var(--color-primary); } } .btn { outline: none; } .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; } }
  14. @leichteckig The cake is a lie! 04/07 "Most importantly, under

    no circumstances should you [bzzzpt]" - Error Handling
  15. @leichteckig The cake is a lie! 05/07 This Weighted Companion

    Cube will accompany you through the test chamber. Please take care of it." - Screen Reader
  16. @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> }
  17. @leichteckig The cake is a lie! 06/07 "Who's gonna make

    the cake when I'm gone? You?" - Authentication specifics
  18. @leichteckig The cake is a lie! 07/07 "The experiment is

    nearing its conclusion." - Some more general tipps
  19. @leichteckig The cake is a lie! Which other advice would

    you give? #kcdc-cake Please join me in slido.com!