Accessible Sign-Up for Notion

Open full project

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.

Reviews

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque u
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum

Good job @Kristina

Thank you!
21
Claps
Average 4.2 by 5 people
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Accessible Signup Form for SaaS Platform project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>