Visual Design

Tu conçois l’aspect visuel du produit.

Structure les contenus

Assure-toi que les informations les plus importantes sont visibles au premier coup d’œil. Utilise une structure simple, une hiérarchie claire et respecte l’ordre de lecture. Assure-toi que la page reste parfaitement compréhensible même avec un zoom de 200%.

Comment tester: utilise la fonction zoom de ton navigateur ou de ton téléphone mobile.

Référence: https://www.w3.org/TR/WCAG21/#resize-text

Veille à ce que le contraste soit suffisant

Le contraste entre le texte et l’arrière-plan doit être d’au moins 4,5:1. Pour l’interface et les autres éléments non textuels importants pour la compréhension, respecter un contraste minimum de 3:1. Attention notamment aux images de fond, évite-les autant que possible.

Comment tester: utiliser un analyseur de contrastes de couleurs https://developer.paciellogroup.com/resources/contrastanalyser

Référence 1: https://www.w3.org/TR/WCAG21/#contrast-minimum
Référence 2: https://www.w3.org/TR/WCAG21/#non-text-contrast

Veille à ce que la taille des éléments soit suffisante

Assure-toi que toutes les cibles tactiles ont une taille minimale de 44x44 pixels. Utilise également des polices de caractères suffisamment grandes et lisibles. De manière générale, il est recommandé d’utiliser une taille minimale de 16 pixels.

Comment tester: réaliser des mesures à l’aide des outils de développeur correspondants.

Référence: https://www.w3.org/TR/WCAG21/#target-size

Veille à ce que le focus soit visible

Définis le focus clavier de manière à ce que les utilisateurs sachent où ils se trouvent en toute situation. À titre d’exemple, rends-toi sur le site cff.ch et appuie plusieurs fois sur la touche Tab.

Comment tester: débranche la souris ou connecte un clavier externe à ton téléphone mobile.

Référence: https://www.w3.org/TR/WCAG21/#focus-visible