<?xml version="1.0" encoding="utf-8"?>

This accessible signup form design follows WCAG principles by ensuring the interface is perceivable, operable, understandable, and robust for all users, including those with disabilities. It uses clear visible labels (not placeholders) for each field, which improves usability for screen readers and cognitive accessibility, while high color contrast between text, inputs, and buttons ensures readability for users with low vision. The layout includes large, well-spaced touch targets (minimum 44px) for easier interaction on mobile and for users with motor impairments. A visible focus state allows keyboard navigation, making the form fully operable without a mouse. Features like a show/hide password toggle, password requirements, and inline guidance enhance understanding and reduce errors. Additionally, elements such as social login buttons include descriptive text for assistive technologies, and the structure is designed to support proper semantic HTML and ARIA roles, ensuring compatibility with screen readers and other assistive tools.

Tools used

Figma

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

1 review


This is a really nice clean log in page design. Great visual hierarchy and use of icons and color. You do a really good job of explaining your design rationale and including common patterns like the show/hide password, error/success state, forgot password, remember me checkbox, and social log in.

I would prefer to see more about the WCAG considerations, a mobile vs. desktop version, and personally would've loved to see some interactivity.

This is really great though, awesome work!


4 Claps
Average 4.0 by 1 person
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>