Usability and Accessibility

It would seem that designers prepare design; how can there be problems with usability? But sometimes layouts are prepared by inexperienced beginners and sometimes by experienced designers who have never encountered web development before.

Here we will focus on the accessibility for users and not screen readers.

Insufficient contrast

A simple but important test is for color contrast. This is easy to do through the developer tools. The difference is evaluated according to the WCAG standard (although it is not ideal, and more advanced alternatives are already appearing). It will help you assess how easy to read a text for people with visual impairments or owners of inexpensive monitors and those who use the site in bright sunlight.

How to fix it? → choose more contrasting colors using developer tools.

Text is difficult to read

Pay attention to font sizes and line height. The font size should not be less than 16 pixels for the text to be readable. The line height should tend towards a ratio of 1.5 for texts and 1.3 for headings.

How to fix it? → if it is possible to increase the font size without harming the design, do it.

• The line height can be set in relative units: line-height: 1.5;
• So the line height will change along with the font size.

The area of ​​the elements is inconvenient for interaction

Please pay attention to the size of the elements and the distance between them. We will not go into deep research, but if you, as a developer, are uncomfortable getting into some elements, then it will be even more difficult for a user with motor impairments.

How to fix it? → For touch interfaces, it is recommended not to make interactive elements smaller than 40×40 pixels. Smaller for desktop, but don’t get carried away: if this is not a link inside the text, then it would be nice to keep the minimum size at least 32 by 32 pixels.

It also works well with using multiple sizes: they will bring order and lead you to elements that are familiar in size.

There are ideal processes and tools in a parallel universe that allow you to create design layouts without a single flaw or omission. It must be a beautiful universe. But until scientists invent ways to travel between worlds, developers will have to deal with layouts that have flaws. 

A designer can forget something, not double-check the project according to the checklist, not think about rare scenarios, make mistakes, or simply not know something. And there are cases when devs don’t have the opportunity to contact the designer for clarification. Hence, we have brought solutions to most of the commonly faced problems by a front-end developer.