The 4 principles of accessibility in the design of prototypes

Accessibility is the design of products or services, whether they are digital or not so that they are used by as many people as possible regardless of their abilities and without making specific adaptations for existing diversities.

For example, by applying accessible design, a digital product can be used by a colorblind person and a non colorblind person equally.

A good part of the accessibility is part of the design, but another very important part is exclusive to the development and depends on following good practices in the code and using the appropriate labels. In this article, we will focus only on the parts that apply to design.

WCAG, the organization that regulates accessibility standards, defines 4 principles of an accessible user interface: perceptible, operable, understandable, and robust.

Principle 1 of accessibility: Perceptible

The information and components of the user interface must be presented to the user in such a way that he can perceive them.

This principle encompasses all visual elements of the interface. Let’s put some examples of the most relevant.

Colors 

As for the colors, it is necessary to make revisions to ensure that all the elements are visible to colorblind users, or with other diversities of vision that have to do with colors.

It is especially important to be careful with the colors green and red when they go together.

 

Accesibilidad-diseño-prototipos-Daltonismo-Itequia-Design-eng

 

It is also important not to use color as the only indicator of information, for example, in graphics where data is displayed.

 

Accesibilidad-diseño-prototipos-Graficos-Datos-Itequia-Design

 

The problem presented in this graphic is that a colorblind user will have difficulty identifying which bar corresponds to each year. A solution could be, instead of indicating the year separately through colored boxes, to search for each bar to which year it corresponds.

 

Accesibilidad-diseño-prototipos-Graficos-años-Itequia-Design

 

Another interesting solution is to superimpose textures or patterns on the colors for better identification:

 

Accesibilidad-diseño-prototipos-Texturas-Itequia-Design

 

Contrast

Another important point that also has to do with color is contrast. It consists in that the texts can be read correctly when they are on a colored background. In this example, we see that the first button is read well, but the second one is not.

 

Accesibilidad-diseño-prototipos-Contrast-Itequia-Design-eng

 

To check if the contrast is adequate, we can follow the WCAG guidelines, which indicate that the minimum contrast so that the texts can be read correctly is 4.5:1 (or 3:1 in large headlines and similar items). This is a measure that is given by some parameters of the luminance of the colors and we do not need to know how to calculate it; to do the verification we can use tools that do the review. For example, with Figma plugins.

Text size

To ensure good reading, it is also necessary that the text has an adequate size. If it is too small, there will be many people who find it difficult to read it, especially older people or people with vision problems. Many authors recommend that the minimum size for paragraph text is 16px and that this size increases if the user zooms in on the page.

 

Accesibilidad-diseño-prototipos-Tamaño-Texto-Itequia-Design

 

Principle 2 of accessibility: Operable

The user interface and navigation components must be operable.

This principle refers to being able to interact with the components correctly. For example, users must know what a button or link does before clicking, or forms must be able to be navigated only with the keyboard.

Navigation 

The web page must be easy to navigate and identify which section we are in. It must be borne in mind that the user will not always arrive at the website through the home or home page, so it is important to always indicate which section they are in (with a clear title), and an extra way to orient themselves and change section if you need it (for example, via breadcrumbs or a navigation menu). The links to the different sections must be short and descriptive so that the user knows what he is going to find when he clicks.

 

Accesibilidad-diseño-prototipos-navegacion-Itequia-Design-eng

 

Time and animations

In the case that the interface has interactions based on movement, we must consider whether they are necessary, whether they have enough time for the user to take action on them, and give the option to deactivate the movement if they are not necessary. For example, when deleting an element a message appears indicating that it has been deleted and the option to undo the action and that this message does not disappear until the user has read it and considered whether they wish to take action.

 

Accesibilidad-diseño-prototipos-deshacer-Itequia-Design-eng

 

Principle 3 of accessibility: Understandable

The information and operation of the user interface must be understandable.

In this principle, we talk about everything that influences the user’s understanding of the interface, whether it is the language, the use of simple or complex words, a clear identification of the elements, error messages and help, etc.

Forms 

Forms have their accessibility considerations apart from the perceptible principles we have already seen (color, contrast, text size). Many pages and products choose to design modern and original forms, or remove the label from the fields and put it inside the field itself (as placeholder) to save space or make it visually more compact. But this can cause problems.

In small forms (for example, login with email and password), it is not so problematic, but in longer forms, when filling in the fields the user may feel lost if he has to go back and the field is not identified.

The placeholders also present several problems, the first of them being the low contrast since normally a lighter color is used. The other problem is that there are some cases in which users may think that the fields are already filled.

 

Accesibilidad-diseño-prototipos-label-Itequia-Design-eng

 

Error messages

The indication of the errors should be done clearly and, if possible, indicate the solution or where you can find help. It is also optimal to put the error code for possible identification of the exact error.

 

Accesibilidad-diseño-prototipos-error2-Itequia-Design-eng

 

In the specific case of forms, the best thing is that the warning is next to the field that is giving the error. The color can be used as a support to indicate the error, but always with other elements that help identification (such as icons and the text of the alert itself).

 

Accesibilidad-diseño-prototipos-error-Itequia-Design-eng

 

Principle 4 of accessibility: Robust

The content must be robust enough to be interpreted by a large number of devices, including assistive technologies.

This principle has more to do with development than with design and refers to the creation of quality code following guidelines and standards. The interface must be viewed correctly regardless of the browser (Chrome, Firefox, Safari…) and the device (computer, tablet, mobile…).

In addition, the interfaces must be compatible with assistive technologies such as screen readers.

To learn more about accessibility standards, you can consult the WCAG Accessibility Guide.

Subscribe to our newsletter

    How can we help you?