Accessibility
Travelling should be possible for everyone and the same applies for the use of our selling platform. That is why accessibility is important for us and part of our design values.
Principles
Supportive
Personal
Joyful
Four factors of accessible design
1. Perceivable: The content of the page needs to be perceivable by a wide range of different user-types.
2. Operable: It needs to be possible to navigate on the page in multiple ways: mouse, keyboard, screen reader.
3. Understandable: The content and its appearance has be consistent and easy to consume.
4. Robust: The technology, concept and design has to have a high browser compatibility and support of assistive programs.
Checklist
Here is a checklist including the most important characteristics a concept should fulfill.
Color Contrast
Affected elements: text, headlines
To guarantee good readability of text and clear visual hierarchy a sufficient color contrast is indispensable. For Text with at least 18pt or 14pt in bold a contrast of 3 to 1 is recommended. For smaller text the contrast should be 4.5 to 1.
Highlighting not only by color
Affected elements: text-links, graphs, info-boxes
To visually highlight important information do not use color only. Depending on the color vision of the user that way information can get lost. Better add iconography, text or text decoration to make the highlighting more clear.
Focus states
Affected elements: navigation, links, inputs, form fields, widgets, buttons, and menu items
Focus states become very important when using the keyboard to navigate. They highlight the element which is focused by the keyboard and help that way to navigate and orientate. The focus styling should stand out very clearly.
Labels instead of placeholder
Affected elements: inputs, form fields
Do not use a placeholder to offer information in an input or form field. Otherwise the information gets lost as soon as the user starts typing or the field is focused which can become a problem specially when navigating with the keyboard. Also the contrast of placeholders is usually bad. Use a label instead that stays visible and has a better contrast.
Keyboard navigation
Affected elements: navigation, links, inputs, form fields, widgets, buttons, and menu items
To guarantee a good keyboard navigation not only the focus state comes into play. The order you navigate on the page width tab should follow a logical concept. It is also important to enable an interaction via enter button.