Availability
Our mission is to make product interfaces accessible to the maximum number of users. It is important for us that users with disabilities can use our services. This is accessibility.
How visual language materials are tested
Basic visual language materials, such as colours, their combinations and typographic schemes must comply with WCAG accessibility guidelines and undergo a perception study in the product.
We test the basic recognizability of the visual language elements. In addition to this, the designer is also responsible to pay attention to it.
Structure
Page structure, meaning and options for interacting with it are easy to understand.
Typography
The text is easy and comfortable to read.
Colour
Elements, their functions and states are distinguishable.
Graphics
Metaphors complementing the meaning of the content are clear.
Interactive areas
Clickable areas are not obstructed.
Text
he meaning of the text is clear.
Structure
The user must intuitively perceive the structure, meaning of a page and the key actions on it. Design should be done to help the user easily find key information.
The page content should correspond to the structure of the headers. Also, the user must have an alternative navigation: site map, table of contents, menu, search, etc.
Maintaining the information structure for the screen reader
The screen reading order must match the order in which information is provided on the page.
Pay attention to the styles: the first level headers on the layout must be coded as h1 headers - this will preserve the correct reading structure.
Screen reader doesn't work well with pop-ups and modal windows.
Typography
When working with typography, pay consideration to both the readability rules and the characteristics of a particular font.
Typography
- Use a font size that is comfortable to read: at least 16px for body text.
- Line length for comfortable reading: acceptable number of characters — 45 – 75, optimal — 66.
- Comfortable ratio of line spacing to size for headers: 1 – 1,3.Comfortable ratio of line spacing to size for body text: 1,4 – 1,65.
- The interval between the following paragraphs is recommended to be at least 2 times larger than the font size.
- The spacing between letters must be at least 0.12 times times the font size.
Color
The recommendations given in this section do not apply to promotional materials and external communication of the products.
Make sure that the contrast between the text colour and the background is sufficient.
Make sure to use additional methods aside from colour for communication or markup.
Acceptable contrast for colour pairs and combinations
The permissible contrast is calculated using the WCAG standard contrast ratio formula: (L1 + 0.05) / (L2 + 0.05), in which L1 is the relative brightness of the lightest color, L2 is the relative brightness of the darkest color.
AAA
7+
Uncorrectable visual impairments
AAA Large
4.5+
Age-related changes in visual acuity
AA
>4.5
Normal vision or minor visual impairment
AA Large
3.5+
Normal vision or minor visual impairment
Fail
3.5+
Not recommended
Contrast guidelines for mobile devices
Devices with high matrix values provide more freedom to vary the contrast ratio. Keep in mind the impact of the external environment: direct sunlight, high level of information noise, etc.
When testing contrast on a mobile device, it is necessary to take into account the parameters of the matrix of popular devices as well as the contrast ratio.
Graphics
The user should understand the graphic content: graphs, icons and images. Don't rely solely on graphics to explain the content. Graphics should set the mood and complement the narrative, but not replace it.
- Use icons as additional visual cues, not as decor.
- When applying text to a picture, mind the contrast.
- Make sure all graphics go with a concise and clear description.
Interactive areas
On touch devices, the tapping area should be large enough and accessible. Pay extra attention to working with the tapping area on devices with a large screen.
- Make sure that the main controls can be reached with the thumbs of both the left and right hands.
- Watch the size of the tapping area: the size of the fingertip is about 10 mm. Work near this value.
Text
Visual architecture in design is inextricably linked with text. If you are not sure about the text, use the services of professional copywriters.
- The elements captions should explain what happens when you click.
- If a click leads to downloading a document, write about it directly. This is critical for mobile device users who may have limited data or memory capacity.
- Do not make references to shape, size, visual position or sound - they may not always be perceived by users.
Don't forget about assistive technologies
Assistive technologies are technical means to facilitate the life of people with disabilities.
Screen Reader
A computer or smartphone screen reader program designed for the blind and visually impaired. The screen reader voices the interface and provides sound and vibration feedback.
Scaling
Scaling is a standard tool for the visually impaired. Make sure that increased to 200%, the page remains readable and functional.
How to maintain a balance
To make your interfaces more accessible, study graphic design. Most of the techniques and rules of graphic design are based on the principles of accessibility to a large number of users.
