A11Y Signup Form for Dating App

What better sign-up form to revamp for a SaaS than a SaaS that is truly dedicated to making those with disabilities lives better?

This is Dateability, an app focused on creating connections with those who have labeled themselves as disabled as well as any abled person looking for love. The original Sign up form was very clean I have to say. However it was missing a lot of key components needed for accessibility.

The Original

The first thing I noticed was how many interactive item's there were on one page. This would immediately cause heavy cognitive load to occur in those with autism as well as anxiety. The use of pure black and white also caught my attention as those with ASD, Dyslexia and Anxiety may also have issues with that.

Here's further mark up of things that caught my attention.

In the updated version I broke down the form into multiple steps effectively reducing cognitive load based on Millers Law.

Changes I've made:

• added more prominent focus modes.

• added active and inactive states for those not using assistive technology.

• added icons to text fields to give those with dyslexia confidence in the that they are filling out the right information.

• Made form edges more prominent so that those with visual disabilities can more quickly find where to begin typing.

• added a more prominent back button for users to feel as though they are in control and to reduce any push back and anxiety.

• added form progress to orient users within the form.

More Steps

Error Page (WCAG Compliant AA)

Check out the project link for more details!

Thanks for checking this out, Excited to see the feedback I receive, good or bad 💖