We are building our product for users and all users should have the most pleasant experience.
We have a few components that will help you to make your webpages keyboard friendly.
Why care about accessibility?
👌”By designing for someone with a permanent disability, someone with a situational limitation can also benefit. For example, a device designed for a person who has one arm could be used just as effectively by a person with a temporary wrist injury or a new parent holding an infant.” — Microsoft Inclusive Design manual
Consider these use cases when using a phone or our website:
- too much bright light – using a mobile device on a beach or on the sun
- a very low brightness of a display in dark environments
- someone has not perfectly calibrated glasses or just eyes are too tired
- non-quality displays in foreign countries
- non-stable environment like bus or subway where you are balancing in a crowd and need to find information quick
- 9.1% of adults with vision trouble [Source: Disability and Functioning, CDC], and 8% of men and 0.5% of women who are color blind [Source: Color Blind Awareness
- 8% of adults with red-green color blindness [Source: https://visiontechnology.co/statistics/]
- 5-10% of adults with dyslexia
- 15.1% of adults with physical functioning difficulty [Source: Disability and Functioning, CDC]
- 4.4% of adults with cognitive disabilities [Source: 2016 Disability Statistics Annual Report (PDF)]
Color Contrast Guidelines
- Minimum requirement: Level A according to WCAG
The contrast ratio between background and foreground should be at least 3:1 as this ration is recommended for users with normal vision.
- Recommended requirement: Level AA according to WCAG
We should have a contrast ratio of at least 4.5:1 between background and foreground. There is an exception for larger text over 24px (or 18px bold) – contrast ratio for this case should be at least 3:1.
This color contrast ratio should be used for any color which is used for showing important information (icon and text).
How accessibility rules affect design?
- Avoid using pure black text on a pure white background, it’s difficult to read for dyslexic users. Combination of these colors is causing blurring the words together.
- Avoid using color as the only thing how to communicate state. Give other visual cues to show important states.
- Be aware of touch target in size at least 40px. Touch targets should be spaced at least 8px from each other, so people are not accidentally tapping on something else.
- Don’t rely on input placeholder as a label, always use a label or very understandable icon
- Don’t rely on color when indicating an error as most common color blindness is not differentiating between red and green. Always add something else to indicate the error.
How will it affect development?
- HTML is using proper semantics and is well-structured, so application is understandable and usable with CSS disabled (or read by screen readers).
- Any “ALL CAPS” should be typed in its proper casing and capitalization should be achieved by CSS property.
- Every non-text content (e.g. photo, icons or illustration) have alternative text.
- All main functionality should be accessible by keyboard.
Hooked in the accessibility?
There are some interesting sources you can explore!