DESIGN GRAPHIQUE

Owned by ANNICK LALIBERTE
Last updated: May 16, 2023 by MATHIEU Côté
4 min read


Table des matières
  • 1. La navigation
    • 1.1 Navigation globale
      • 1.1.1 Prévoir un fil d’Ariane
      • 1.1.2 Prévoir au moins deux moyens de navigation
      • 1.1.3 Différencier visuellement la position courante dans les menus
      • 1.1.4 Assurer la cohérence visuelle de la navigation
      • 1.1.5 Prévoir une sous-navigation accessible dans une application
    • 1.2 Aide à la navigation
      • 1.2.1 Prévoir une page d'aide
      • 1.2.2 Prévoir des liens d'évitement
      • 1.2.3 Prévoir l'aspect visuel et l'ordonnancement de la navigation par tabulation (focus)
  • 2. Les textes et les polices de caractères
    • 2.1 Textes
      • 2.1.1 Conserver les accents sur les lettres capitales
      • 2.1.2 Conserver la ponctuation comme élément de texte et non comme action
      • 2.1.3 Ne pas justifier le texte
      • 2.1.4 Ordonner le texte de manière logique
    • 2.2 Polices de caractères
      • 2.2.1 Choisir une police appropriée pour le numérique
      • 2.2.2 Garantir la lisibilité des contenus sur le web
      • 2.2.3 Garantir la lisibilité des contenus dans une application
  • 3. Les couleurs
    • 3.1 Contrastes
      • 3.1.1 Assurer un contraste suffisant entre les contenus et l'arrière-plan
    • 3.2 Sens véhiculé par la couleur
      • 3.2.1 Assurer la compréhension de l'information en l'absence de couleurs
      • 3.2.2 Garantir la lisibilité des contenus lorsque les images ne sont pas affichées
  • 4. Les liens
    • 4.1 Identification visuelle
      • 4.1.1 Distinguer les liens du texte courant
    • 4.2 Intitulés
      • 4.2.1 Utiliser un intitulé explicite
      • 4.2.2 Identifier les liens externes
      • 4.2.3 Préciser les liens pointant sur des documents à télécharger
  • 5. Les visuels
    • 5.1  Icônes, symboles et pictogrammes
      • 5.1.1 Assurer la compréhension des pictogrammes
      • 5.1.2 Utiliser la police d'icônes de Radio-Canada
      • 5.1.3 Utiliser des icônes d’action claires pour les carrousels
    • 5.2 Visuel imagé (photographie, vidéo, illustration)
      • 5.2.1 Décrire le visuel
      • 5.2.2 Limiter l'usage du texte sur le visuel
    • 5.3 Visuel informatif (tableau, illustration de données, infographie)
      • 5.3.1 Bannir les illustrations de données sous forme d’image statique
      • 5.3.2 Prévoir un titre pour chaque visuel informatif
  • 6. Les formulaires
    • 6.1 Intitulés et champs
      • 6.1.1 Prévoir des intitulés clairs
      • 6.1.2 Regrouper et titrer les champs de même nature
      • 6.1.3 Indiquer clairement les champs obligatoires
    • 6.2 Boutons
      • 6.2.1 Prévoir un bouton de soumission à la fin de chaque formulaire
      • 6.2.2 Utiliser des intitulés clairs pour chaque bouton
      • 6.2.3 Prévoir des zones réactives suffisamment grandes et espacées
    • 6.3 Messages d'information
      • 6.3.1 Identifier les formats de saisie spécifiques
      • 6.3.2 Prévoir des messages d'erreur explicites et des suggestions de correction
      • 6.3.3 Prévoir un message de confirmation
    • 6.4 Formulaires à étapes multiples
      • 6.4.1 Indiquer clairement le nombre d'étapes
    • CAPTURES D'ÉCRAN
      • 6.4.2 Prévoir un récapitulatif des données
    • CAPTURES D'ÉCRAN
    • 6.5 CAPTCHA (système anti-spam)
      • 6.5.1 Privilégier des tests de sécurité sous forme de tests logiques plutôt que sous forme de CAPTCHA
  • 7. Le multimédia
    • 7.1 Contenus vidéo
      • 7.1.1 Prévoir un titre ou un résumé
      • 7.1.2 Prévoir le contrôle de l'avancement et du volume sonore
      • 7.1.3 Prévoir l'activation des sous-titres
      • 7.1.4 Prévoir l'activation de la vidéo description
    • REMARQUES
      • 7.1.5 Prévoir un accès à la transcription textuelle intégrale
    • 7.2 Contenus audio
      • 7.2.1 Prévoir un titre ou un résumé
      • 7.2.2 Prévoir le contrôle de l'avancement et du volume sonore
      • 7.2.3 Prévoir un accès à la transcription textuelle
    • 7.3 Contenus animés (carrousel, bannière, contenus défilants, musique)
      • 7.3.1 Prévoir l'arrêt manuel de chaque contenu animé
      • 7.3.2 Prévoir l'arrêt manuel de chaque son lancé automatiquement

Contexte et objectifs

Ce document doit être transmis à tous les designers graphiques de Musique et services numériques ou ceux produisant des pages à l’externe (fiches télé, par exemple), aux infographistes de première ligne ainsi qu’aux intégrateurs. Il est fortement recommandé que les chefs de produit en prennent également connaissance.Il vient en complément aux cahiers de normes graphiques numériques sur Repères et aux feuilles de styles. Les recommandations peuvent être complétées, mises à jour ou retirées au besoin. La dernière version sera toujours en ligne sur le site de normes Reperes.ici.ca.Les recommandations doivent être prises en compte en phase de conception graphique, et pour certaines d’entre elles, lors de la conception des storyboards, du prototypage et des spécifications fonctionnelles.Ce document peut également servir d’aide à la maîtrise d’ouvrage pour vérifier la prise en compte de l’accessibilité dès la visualisation des wireframes, prototypes, ou maquettes graphiques fournies par le designer.Certaines annotations viennent compléter le document, celles-ci sont nécessaires pour la compréhension de chaque recommandation :


REMARQUES

Les remarques permettent de compléter les recommandations en apportant des précisions applicables à des situations techniques précises et ponctuelles.

HTML5

Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.

ASTUCES

Les astuces ne sont pas directement liées à l’accessibilité, mais leur prise en compte permet généralement d’améliorer la qualité générale des interfaces ou de faciliter la prise en compte de l’accessibilité sur les étapes suivantes du projet. À l’inverse, les recommandations de ce document, bien que dédiées à l’accessibilité, rejoignent souvent de bonnes pratiques en matière d’ergonomie, d’expérience utilisateur, de performance ou de référencement.

ASTUCES - BONIFICATION

Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.

ATTENTION

Les avertissements mettent en avant des points particuliers qu’il est important de respecter ou des pièges à éviter pour garantir une bonne accessibilité.

CAPTURES D'ÉCRAN

Des exemples provenant d’ICI Radio-Canada, ICI Musique, ICI tou.tv, ou d’autres exemples pertinents sont inclus dans le document.

RESSOURCES

Des liens sont inclus pour faciliter l'application des normes : ils mènent soit à des sites externes (lectures, meilleures pratiques, etc.), ou font référence à d'autres sections du présent guide.

Mention légale

La société Atalan est l'auteure et la responsable du site web : www.accede-web.com. Les documents disponibles dans Repères sont une version modifiée des normes d’accessibilité de www.accede-web.com.

 


AcceDe Web - La démarche accessibilité


Si vous avez des questions ou des commentaires, merci de les adresser à accessibilite@radio-canada.ca. Nous y répondrons dès que possible.