Accessible Sign-Up Form Design

‍
‍Overview:
‍This project aims to enhance the accessibility and the overall user experience for Zoho CRM platform’s sign up form. Their original design could be challenging for users with disabilities to navigate. Therefore, several solutions are implemented in order to make the form more accessible and user-friendly for users.

‍

‍

Main issues identified:

- Error Messages: Only color (red) is used to indicate errors, which may not be accessible to all users.

- Screen Reader Compatibility: Screen readers cannot read text in the popover modals beside the password input that specify it must contain at least 8 characters.

- Focus Visibility: Focused input fields are difficult to see, with only a 1-pixel stroke.

- Focusable Elements: Some interactive elements, such as the checkbox for terms of use and social media sign-up buttons, are not focusable.

- Focus Indicator Contrast: The focus indicator on buttons lacks sufficient contrast, making it hard to see.

‍

‍‍

Solutions applied:
For accessibility:

- Providing various cues for the error state: To make error states more noticeable, the input label now changes to red, accompanied by a warning icon and a light red input background. A helper text provides clear guidance on the required input format.

- Reconsidering the placement of the microcopy: Instructional text for password requirements is placed directly below the input label, making it accessible to screen readers and ensuring that users see the requirement before entering information.

- Improving the visibility of the focused input: A higher-contrast blue outline (#1266F1) with increased thickness (2px) is used for focused inputs, making them stand out compared to the original color (#4285F4).
Making the focus indicator stand out: Negative space of the focus indicator is added between the outline and the button, which help to make the focus state stand out from the button.

- Making all important elements focusable: All interactive elements such as checkboxes and buttons for creating account with social media platforms are able to be focused with the keyboard control.

For overall user experience:

- Using an input mask: A phone number mask is applied to guide users as they enter their numbers, reducing typing errors.

Conclusion:
These optimizations enhance accessibility and improve overall user experience for the sign-up form. The adjustments increase inclusivity, making the form easier to navigate for all users and contributing to a smoother, more intuitive experience.