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

Ramona Schwering

GDE in Web Technologies and a Women Techmaker and Cypress Ambassador

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

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!

This workshop has been presented at React Advanced 2025, check out the latest edition of this React Conference.

FAQ

Accessibility in web development refers to creating websites and applications that can be used by everyone, including those with disabilities. This involves ensuring content is perceivable, operable, understandable, and robust.

ARIA tags are important because they help screen readers interpret web content correctly by providing additional semantic information about elements, making the web more accessible to users with disabilities.

Developers can improve error handling accessibility by using ARIA tags to link input fields with error messages, ensuring error messages are specific but not overly detailed to avoid security risks, and making sure error indications are visible to all users, including those who are colorblind.

The WCAG, or Web Content Accessibility Guidelines, is a set of recommendations aimed at making web content more accessible, particularly for people with disabilities. It is important because it provides a standard for accessibility that helps ensure websites are usable by everyone.

Developers should avoid disabling paste functionality in password fields because it can hinder users who rely on password managers, especially those with cognitive or motor disabilities, making it difficult for them to log in.

Alternatives to traditional passwords include passwordless methods like magic links, biometrics, and passkeys. These methods reduce cognitive load and improve accessibility by eliminating the need to remember passwords.

Developers can ensure MFA is accessible by offering multiple methods, reducing cognitive load with features like auto copy-paste for one-time passcodes, and minimizing context switching between apps.

When implementing CAPTCHA, developers should ensure it is simple enough for screen readers to handle and avoid complex object recognition tasks that can be difficult for users with cognitive disabilities.

Developers should ensure sufficient color contrast between text and background to make content readable for users with visual impairments. This includes using tools to test contrast ratios and adjusting colors accordingly.

Screen readers are assistive technologies that read aloud content on a screen, allowing users with visual impairments to navigate and understand web content. Ensuring web elements are properly labeled and structured enhances their effectiveness.

accessibility

Ramona Schwering

100 min

02 Dec, 2025

Comments

Video Summary and Transcription

The Workshop covered a wide range of topics related to accessibility in software development. It included discussions on the spectrum of disabilities, the importance of meeting true accessibility standards, and the significance of error handling and focus indicators for better accessibility. Participants learned about enhancing error messages, considering colorblindness in design, and the use of biometrics and passkeys for authentication. The Workshop also highlighted the need for multiple MFA options, reducing contact switches for improved accessibility, and incorporating AI component libraries for enhanced user experiences.

Video transcription and chapters available for users with access.

Watch more workshops on topic

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications

React Summit 2023

109 min

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications

Workshop

2 authors

In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!

accessibility

Automated accessibility testing with jest-axe and Lighthouse CI

TestJS Summit 2021

85 min

Automated accessibility testing with jest-axe and Lighthouse CI

Workshop

Bonnie Schulkin

Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.

automated security testing automation accessibility

Web Accessibility in JavaScript Apps

React Summit 2022

161 min

Web Accessibility in JavaScript Apps

Workshop

Sandrina Pereira

Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)

javascript web apps accessibility

Creating Accessible React Native Apps

React Summit Remote Edition 2021

91 min

Creating Accessible React Native Apps

Workshop

Scott Vinkle

React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!

react native react native accessibility accessibility

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Accessibility at Discord

React Advanced 2021

22 min

Accessibility at Discord

Brandon Dail

Discord

This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.

accessibility case study

Nested Interactive Elements: An Nightmare in Accessibility

React Advanced 2023

23 min

Nested Interactive Elements: An Nightmare in Accessibility

Top Content

Steven Lambert

Deque Systems

AXe is an accessibility engine for automated web UI testing that runs a set of rules to test for accessibility problems. It can be configured to disable or enable specific rules and run based on tags. Axe provides various options, but axe linter does not support all options. The importance of investing time and resources in accessibility is emphasized, as it benefits not only those with disabilities but improves the web for everyone. Manual testing is also highlighted as a necessary complement to automated tests for addressing accessibility issues.

axe core react testing accessibility

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

JSNation 2023

10 min

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

Web Standards Specialist

The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

design systems accessibility

Building a Fast Website for Every Single Visitor

React Advanced 2024

31 min

Building a Fast Website for Every Single Visitor

Medhat Dawoud

Senior Software Engineer at Miro and a Google Developer Expert in Web Technologies

This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.

performance accessibility case study

a11y and TDD: A Perfect Match

JSNation 2022

24 min

a11y and TDD: A Perfect Match

Rita Castro

Mentorship available

Volkswagen Digital Solutions | SDC Portugal

This Talk explores the intersection of accessibility and test-driven development (TDD) in software development. TDD is a process that involves writing tests before writing production code, providing a safety net for code changes. The Talk demonstrates how to apply TDD principles to real-life examples, such as filling out a form, and emphasizes the importance of user-centric testing. By using atomic design principles, code can be organized in a clean and easy way. The Talk also discusses the use of labels and test IDs in tests for improved accessibility.

testing accessibility