100 points à savoir sur…
Accessibilité numérique

La conception accessible profite à tous

Une conception Web accessible peut avoir un effet positif sur l'expérience en ligne de tous les utilisateurs, qu'ils aient ou non un handicap permanent ou temporaire. Certains utilisateurs peuvent avoir des limitations matérielles, telles que des écrans de petite taille ou à faible contraste ou l'absence de souris. De même, tout utilisateur peut avoir des besoins et des préférences spécifiques dans la manière dont il préfère accéder à l'information. Par exemple, certains utilisateurs préfèrent naviguer avec un clavier, tandis que d'autres doivent utiliser un lecteur d'écran.

Les situations mentionnées ci-dessus montrent toutes la nécessité de tenir compte de la diversité des utilisateurs et, par conséquent, d'adopter un design universel, à la fois agréable et fonctionnel.

Le contraste est la clé de la lisibilité

Pour que le contenu soit lisible par tous, il est important d'avoir un contraste élevé entre l'arrière-plan d'une page Web et son contenu. Ce contraste élevé permettra un meilleur accès à certains cas de daltonisme et de déficience visuelle. Il peut également être utile dans le cas d'un écran à faible contraste ou d'une lecture en plein air au soleil.

Pour plus d'informations sur le contraste des couleurs et sur la manière de vérifier si votre page Web respecte les directives en la matière, consultez ce contenu :

Transcription du diaporama
Qu'est-ce que le contraste des couleurs ?

Le contraste des couleurs est la différence entre la couleur utilisée pour les informations au premier plan (polices, images d'un texte, liens, infographies, diagrammes, etc.) et la couleur d'arrière-plan.

Sur une roue des couleurs :

• Avec 2 couleurs accolées l'une à l'autre, on a un faible contraste (ou une petite différence).
• Avec 2 couleurs éloignées ou opposées, nous avons un contraste élevé (ou grande différence).

---NOUVELLE SLIDE---

Quels sont les avantages d'un bon contraste des couleurs pour l'accessibilité du Web ?

En matière de conception web, un bon contraste des couleurs est essentiel pour la lisibilité de votre contenu.
Il devient :

• facile à lire,
• reconnaissable,
• mémorisable.

Le choix du bon contraste des couleurs est un élément clé pour un site web accessible : les utilisateurs souffrant de déficiences visuelles et des déficiences chromatiques seront en mesure de lire vos pages web

---NOUVELLE SLIDE---

Exemples de bons et mauvais contrastes de couleurs

• Un bouton "Menu" avec un fond violet clair et des lettres vert foncé. Ce contraste de couleurs est mauvais : les deux couleurs ne sont pas suffisamment différenciables l'une de l'autre.

• Un bouton "Menu" avec un fond violet foncé et des lettres blanches. Ce contraste de couleurs est bon : nous pouvons lire clairement les informations au premier plan.

N'oubliez pas que la perception des couleurs peut varier d'une personne à l'autre. Veillez à bien choisir le contraste de vos couleurs afin qu'il convienne à tous vos utilisateurs.

---NOUVELLE SLIDE---

Comment vérifier si une page web a un bon contraste de couleurs ? 1/3

Un contraste élevé des couleurs (ou une grande différence dans les tons de couleur) ne signifie pas nécessairement un bon contraste des couleurs.
Pour savoir si votre contenu est accessible à tous les spectateurs, vous pouvez utiliser le rapport de contraste des couleurs.

Le rapport de contraste des couleurs est une valeur mesurée par le contraste entre deux couleurs. Cette valeur peut aller de 1:1 (pas de contraste du tout) à 21:1 (le contraste le plus élevé possible).

Pas d'inquiétude, il existe des outils pour vous aider à vous aider à le calculer, vous verrez !

---NOUVELLE SLIDE---

Comment vérifier si une page web a un bon contraste de couleurs ? 2/3

Les directives WCAG définissent une norme minimale de rapport : 4,5:1 (la norme maximale est de 7:1). Si votre rapport de contraste des couleurs est inférieur à 4,5:1, vous ne respectez pas la norme.

Ce ratio ne s'applique pas aux éléments suivants :

• Texte de grande taille : doit avoir un rapport de contraste d'au moins 3:1 ;
• Texte secondaire (décoration) : aucune exigence de contraste ;
• Logos : aucune exigence de contraste.

---NOUVELLE SLIDE---

Comment vérifier si une page web a un bon contraste de couleurs ? 3/3

De nombreux outils (applications, plugins, sites web) peuvent vous aider à calculer le le rapport de contraste des couleurs, comme le Color Contrast Accessibility Validator (https://color.a11y.com/?wc3).

Ajoutez l'URL de votre page web ou les codes de couleur (Hex ou RGB) de ses couleurs d'arrière-plan et de premier plan et il vérifiera l'accessibilité du contraste des couleurs pour vous !

---FIN DU DIAPORAMA---

Fournir des alternatives aux médias

Les images, les vidéos et le son sont par défaut moins accessibles que le texte. Un navigateur Web peut interpréter le texte pour produire une version avec synthèse vocale ou l'agrandir. Le texte peut être calculé de nombreuses façons et plus facilement que les vidéos ou l'audio. Par exemple, certains utilisateurs préfèrent avoir accès à la transcription ou aux sous-titres d'un document audio ou vidéo. Certains utilisateurs suppriment même les images et le style des pages qu'ils visitent afin d'avoir une expérience plus ciblée (autrement appelé Mode lecture).

Pour toutes ces raisons, vous devriez toujours disposer d'une alternative textuelle en plus de vos médias par le biais des attributs HTML alt, d'un texte descriptif, d'un système de transcription ou d'un simple paragraphe.

Connaître le comportement attendu

Certains éléments d'une page web suivent un comportement attendu : un lien ouvre une nouvelle page, un bouton valide un formulaire, un menu déroulant affiche une liste d'options. Il en va de même pour le contenu et sa structure : l'utilisateur s'attend à utiliser des sections et des titres pour trouver des informations. Ce type de comportement attendu et de contenu structuré rend à son tour le contenu plus accessible.

Mais cela ne s'arrête pas là. Une conception ergonomique doit aider les utilisateurs à accéder à un contenu spécifique facilement, rapidement et confortablement. Un contenu accessible rend cela possible pour tout le monde.