Accessible Signup Form
For this project, I designed a login/sign-up page for a SaaS platform, making sure it’s easy for everyone to use, including people with different abilities. I focused on accessibility and making sure the page works well for everyone.
- Accessibility: I made sure the colors and text are easy to see for people with visual challenges. I also made sure all the form fields have clear labels and helpful text.
- Ease of Use: The design is simple and clean, so users can easily fill out the form and fix any mistakes.
- Colors and Text: I used clear, readable text and good color contrast to make the page easy to use.
- Accessibility Testing with Figma Plugins:
- I used Figma plugins like Stark and Able to check color contrast and ensure the design is accessible for users with visual impairments.
- I tested the design for screen reader compatibility using the A11y plugin, making sure all elements are properly labeled.
- I ran a series of accessibility checks on buttons, forms, and text to ensure they follow WCAG guidelines.
I also made the design interactive, so people can try it out like they would on the real site.
Challenges: One challenge was making the page accessible while keeping it clean and attractive. But I was able to do it with the right tools.
The page follows accessibility guidelines and gives a good experience for all users.
Tools used
From brief
Topics
Share
Reviews
2 reviews
Your design is well-structured and follows accessibility best practices. It aligns with WCAG standards, usability heuristics, and interaction principles. Here’s how it performs and where it can improve:
✅ What Works Well:
Clear Form Flow (Jakob Nielsen’s Usability Heuristic: Match Between System & Real World)
- The step-by-step process makes it easy to follow.
- Users can fix errors without getting lost.
Strong Accessibility Support (WCAG 2.1 AA – Contrast, Labels, Keyboard Navigation)
- Good colour contrast improves readability.
- Form labels and real-time validation help users with assistive tools.
- Keyboard navigation works, making it usable for those who don’t rely on a mouse.
Effective Error Handling (Usability Heuristic: Error Prevention)
- The email validation prompt prevents incorrect input.
- Password rules guide users, reducing frustration.
Good Visual Hierarchy (Gestalt Principle: Proximity & Contrast)
- The layout is clean and easy to scan.
- The thumbnail presentation clearly shows accessibility features.
🔍 What Can Be Improved:
Make Focus States More Visible (WCAG 2.1 – 2.4.7 Focus Visible)
- The focus indicator is subtle.
- Stronger outlines or colour contrast will help keyboard users.
Show Password Requirements Before Typing (Jakob Nielsen’s Usability Heuristic: Error Prevention)
- Right now, users only see requirements after typing.
- Showing them upfront avoids unnecessary mistakes.
Improve "Skip" Button Visibility (Fitts’ Law – Target Size & Placement)
- It’s small and easy to miss.
- Increase size or reposition it near primary actions.
Better Button Feedback (Norman’s Principle: Immediate Feedback)
- Buttons change colour but lack hover or click effects.
- Microinteractions (slight animations, colour shifts) would improve responsiveness.
Fix Thumbnail Readability (Gestalt Law of Contrast)
- The bullet points feel cramped—increase spacing for easier reading.
- The yellow author tag blends with the background—adjustthe contrast.
Your design meets accessibility standards and has a strong usability foundation. Small improvements in focus states, button feedback, and visibility will make it even better. This is a solid accessibility-first design—just a few refinements will take it to the next level.
Nice presentation
You might also like
Satyajit Ray Memorial Landing Page - Daily UI 003
"Candle house - Landing page"
Florish Accessibility Signup Form
Notion - Accessibility Color System
Blip - Esport app design (Light & Dark UI)
Reimagining Asana's Color System
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
