We aim to build inclusive products by considering any special needs of our users (color blindness, dyslexia, financial difficulty, transportation limitations, etc) or any environments in which our users might use our products.
We follow the Web Content Accessibility Guidelines (WCAG) requirements:
1. Provide sufficient contrast between foreground and background
Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements.
2. Don’t use color alone to convey information
While color can be useful to convey information, color should not be the only way information is conveyed. When using color to differentiate elements, also provide additional identification that does not rely on color perception.
3. Ensure that interactive elements are easy to identify
Provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of input focus or hover to the button. Ensure that styles and naming for interactive elements are used consistently throughout the app.
4. Provide clear and consistent navigation options
Ensure that navigation across screens within a app has consistent naming, styling, and positioning. Help users understand where they are in a app or screen by providing orientation cues, such as clear headings.
5. Ensure that form elements include clearly associated labels
Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right. Avoid having too much space between labels and fields.
6. Provide easily identifiable feedback
Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the screen. Instructions should be easy to identify. Important feedback that requires user action should be presented in a prominent style.
7. Use headings and spacing to group related content
Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter, and make it easier to scan and understand.