Copy - Animation : Présentation de l'information

Accessibilité numérique

Module 10Présentation de l'information

Quelques informations ...

Accessibilité numérique

Les feuilles de styles sont utilisées pour contrôler la présentation de l’information:- Les balises et attributs servant à présenter l’information ne doivent pas être présentes dans le code source;- Les espaces ne doivent pas être utilisés pour séparer les lettres d’un mot, simuler des tableaux ou des colonnes de texte.Le contenu porteur d’information reste présent et l’information reste compréhensible lorsque les feuilles de style sont désactivées.Dans le cas où la taille des caractères est agrandie à 200% dans le navigateur par l'utilisateur, l'ensemble du texte doit rester lisible.Exception : textes en image et sous-titres de vidéos.

Quelques informations ...

Accessibilité numérique

Les déclarations CSS de couleurs de fond d’élément (background, background-color) et de police (color) doivent être correctement utilisées : - Pas de déclaration de couleur de fond sans déclaration de couleur de police et inversement ;- Chaque image utilisée pour créer une couleur de fond d’un élément susceptible de contenir du texte est accompagnée d’une déclaration de couleur de fond.Chaque lien dont la nature de lien n’est pas évidente doit être visible par rapport au texte environnant.Pour chaque élément recevant un focus, la prise de focus doit être visible.

Quelques informations ...

Accessibilité numérique

Les contenus cachés doivent être adaptés aux technologies d’assistance : - Attribut aria-hidden pour les contenus qui ont vocation à être ignorés par les technologies d’assistance - S’il n’a pas vocation à être ignoré, il doit pouvoir être convoqué par une action réalisable au clavier ou dispositif de pointage sur un élément précédent ou suite à un repositionnement du focus dessus.Note : WAI-ARIA propose un attribut aria-hidden (true ou false) qui permet d'inhiber la restitution d'un contenu en direction des technologies d'assistance, sans action sur sa visibilité en direction des agents utilisateurs : un contenu avec aria-hidden="true" ne sera donc plus vocalisable, mais restera visible. L’information (texte, image, media) ne doit pas être donnée uniquement par la forme, taille ou position.

Quelques informations ...

Accessibilité numérique

Dans chaque page web, l’augmentation de la taille des caractères jusqu’à 200 %, au moins, ne doit pas provoquer de perte d’information.

• Lors de l’utilisation de la fonction d’agrandissement du texte du navigateur ;
• Lors de l’utilisation des fonctions de zoom graphique du navigateur ;
• Lors de l’utilisation d’un composant d’interface propre au site permettant d’agrandir le texte ou de zoomer.

Quelques astuces ...

Accessibilité numérique

- Utiliser des polices simples et faciles à lire, telles que Arial, Helvetica ou Verdana. Éviter les polices fantaisistes qui peuvent être difficiles à lire.- Utiliser une taille de police suffisamment grande pour que le texte soit facilement lisible, en particulier pour les personnes ayant une déficience visuelle. Une taille de police de 16px est souvent recommandée pour le contenu principal, tandis que les titres peuvent être plus grands.- Éviter d'utiliser des caractères en majuscules pour tout le texte, car cela peut être difficile à lire pour certaines personnes. Utiliser plutôt des majuscules pour les titres ou les mots clés.- S'assurer que le texte est suffisamment espacé pour faciliter la lecture. Éviter les blocs de texte sans espacement et utilisez plutôt des marges et des espacements pour séparer les paragraphes et les sections.

Les contenus additionnels apparaissant à la prise de focus ou au survol d’un composant d’interface doivent être contrôlables par l’utilisateur.Ex : vidéo à lancement automatique au survol doit pouvoir être mise en pauseSur la page d’accueil du site Inetum une vidéo est lancée automatiquement mais il est possible d’afficher les commandes (via clic droit) afin notamment de la mettre en pause .Les contenus additionnels apparaissant via les styles CSS uniquement.

Exemple :

Accessibilité numérique

Quiz ...

Accessibilité numérique

Quiz 1

Accessibilité numérique

Quiz 2

Accessibilité numérique

Play

Pour voir concrêtement les éléments présentés précédement, consulter la vidéo ci dessous .

Merci d'avoir suivi de module.

Bonne nouvelle ! Vous pouvez agir concrètement pour améliorer et changer le quotidien de (très) nombreuses personnes

Thanks!