Accessible Sign-Up for Notion

Improving Accessibility: A Redesign of Notion's Sign-Up Page

Notion is a popular note-taking and productivity tool used daily by a variety of users, including myself. While its sign-up page has a minimalist design, my research revealed several accessibility challenges for different users.

To make the sign-up page more accessible, I followed a three-step process using the following tools for testing and improving accessibility:

Step 1: Content structure

First, I ran the page through WAVE Accessibility Tool and identified there was no H1 heading, which is crucial for organizing content for screen readers. A proper H1 heading was added to improve content structure.

Step 2: Color contrast

Next, I focused on color contrast issues highlighted by the Bureau of Internet Accessibility. Colors that look nice aren’t always easy to read, so I adjusted the contrast to make sure text and background colors meet WCAG’s minimum requirements. This change makes the page clearer for users with low vision or color blindness.

Step 3: Tabbing sequence

Finally, I used Lighthouse, which flagged more color contrast problems, so I updated the text colors for consistency. It also pointed out that the tabbing sequence wasn’t logical, which is a big deal for keyboard users. I fixed that by restructuring the tab order and placing it in the left corner where users can choose their desired language. Next, users can choose to skip to the main content and sign-up with different options.

Additional Improvements

Notion’s sign-up form lacks a “show password” option, which can be helpful for users with cognitive impairments, motor disabilities, or simply those on mobile devices who find it challenging to enter complex passwords.

The Notion icon in the top-left corner has been made bigger (44x44) to follow accessibility guidelines for touch targets, ensuring it is easier for users to interact with.

I’ve replaced the 'Continue' text with 'Sign Up' to make the action clear and unambiguous for all users.

The text 'Use your work email to continue' has been replaced with 'We’ll send you a confirmation email to get started,' providing a clearer explanation of what users can expect after entering their email.

Finally, I adjusted the heading to simply 'Create your Notion account,' streamlining the page and making the purpose immediately clear to users.