Accessibility optimization for Taskade's Sign Up & Login pages

Updates on 11 July 2024

1. Error message in Sign-in flow is more specific.
2. Border-color of Input field's focus stage is changed to brand color ( white -> pink )

=======

About Taskade: this is a collaboration platform designed to streamline teamwork and boost productivity. It combines task management, note-taking, and real-time communication in a unified workspace. Taskade helps teams organize ideas, track progress, and collaborate seamlessly on projects of any size.

Accessibility issues:

1) Insufficient contrast between text and background: The light gray text on the dark gray background does not meet the minimum contrast ratio of 4.5:1 for normal text, as required by WCAG . This can make it difficult for users with low vision or color blindness to read the text.

2) Missing Indicators:

• When inputting, there's no clear visual indicator to show which element is currently focused.
• Error / Warning messages don't have icon, this cause difficulties for color blindness users.
• No labels of the input fields. Placeholder text disappears when the user starts typing, which can cause confusion, especially for users with cognitive disabilities or memory impairments

3) No input assistance: There's no error handling or input assistance (e.g., password visibility toggle, password guides) to help users fill out the form correctly.

4) Blocks access for users who forgot their password: Users who forget their password are unable to recover their account and access the service without this feature.

5) Lack of clear visual separation between the two login options (3rd party accounts vs. Taskade account). This can lead users to accidentally choose the wrong login method, causing frustration and delays

How I address these issues:

1. Increase Color Contrast to the minimum 4.5:1 contrast ratio
2. Add visible focus indicators such as icons, thicken border in focus state.
3. Make labels visible by positioning outside the input field when users start inputting.
4. Provide Input Assistance includes:

• Better error messages and always display guidelines to prevent users enter incorrect info.
• Show password toggle
• "Remember me" feature

5. Allow users to reset password by adding a button in the login page

6. Use clear visual cues to group the two login options separately through: Spacing & Divider