Table des matières
| Table of Contents |
|---|
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
HTML5
ASTUCES
ASTUCES - BONIFICATION
ATTENTION
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
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.
Si vous avez des questions ou des commentaires, merci de les adresser à accessibilite@radio-canada.ca. Nous y répondrons dès que possible.
1. La navigation
1.1 Navigation globale
1.1.1 Prévoir un fil d’Ariane
Un fil d’Ariane (parfois appelé « chemin de fer » ou « breadcrumb ») doit être présent sur chaque page. Il propose une navigation complémentaire à la navigation principale et facilite le repérage en plus d’offrir une autre manière de naviguer de manière contextuelle. Le fil d’Ariane doit :
- Indiquer la position courante de l’internaute dans l’arborescence du site par rapport à la page d’accueil.
- Permettre à l’internaute de remonter dans l’arborescence du site. Pour les besoins de Radio-Canada.ca, un fil d’Ariane de type Attributs est privilégié.
- Toujours être situé au même endroit.
REMARQUES
Le fil d’Ariane n’est pas obligatoire sur la page d’accueil.
ASTUCES - BONIFICATION
Une autre bonne pratique à implanter est de proposer des mots-clés en fin d’article, menant à une autre navigation contextuelle.
CAPTURES D'ÉCRAN
Le fil d’Ariane dans un article de nouvelles, en vue desktop…
… et en vue mobile. Une bonne pratique est de différencier visuellement le dernier élément du fil d’Ariane lorsqu’il s’agit de la position courante.
L’usage de mots-clés en fin d’article proposera une méthode de navigation contextuelle plus granulaire (fonctionnalité en développement).
1.1.2 Prévoir au moins deux moyens de navigation
Parmi les trois moyens de navigation suivants, au moins deux doivent être présents sur le site :
- Un menu principal.
- Un plan du site qui doit permettre de comprendre la structure et a minima d’accéder à l’ensemble des rubriques et des fonctionnalités du site.
- Un moteur de recherche global qui doit permettre la recherche dans l’ensemble des contenus (textes, documents, vidéos, etc.).
Ces éléments doivent être disponibles depuis le même endroit, sur toutes les pages, partout sur le site.
Sur le site de Radio-Canada:
- Le menu est disponible sur toutes les pages, masquées en vue mobile (tablette verticale et téléphone).
- Le plan de site est accessible du pied de page: http://ici.radio-canada.ca/plan-site.
- Le moteur de recherche sera accessible depuis l’entête (mars 2018).
REMARQUES
Si nécessaire, il est possible de prévoir des filtres sur le moteur de recherche pour ne pas proposer seulement une recherche globale.
ASTUCES
Présenter une page de résultats de recherche regroupés, soit par pertinence, par thème, par date, etc.
RESSOURCES
Veiller à assurer la cohérence du flux d'une page à l'autre (re document HTML CSS).
1.1.3 Différencier visuellement la position courante dans les menus
Dans chaque menu, l’élément courant doit avoir un aspect différent pour se distinguer.
ASTUCES
Il est fortement recommandé de prévoir également un aspect différent au survol des éléments. Un ratio de contraste de 3:1 doit être respecté (voir Contrastes au point 3.1).
CAPTURES D'ÉCRAN
Un exemple de menu où l’élément courant se distingue des autres éléments.
1.1.4 Assurer la cohérence visuelle de la navigation
Pour assurer une cohérence sur l’ensemble du site, l’apparence et le positionnement des éléments suivants doivent rester au même endroit (sans qu’ils soient nécessairement identiques) :
- Les menus de navigation.
- Le moteur de recherche.
- Et, de manière générale, l’ensemble des éléments qui apparaissent sur toutes les pages (logo, icônes, barres de défilement, tiroirs, réseaux sociaux, partages, liens utiles, etc.).
REMARQUES
L’apparence de la page d’accueil peut être différente de celle du reste du site.
RESSOURCES
Veillez à assurer la cohérence du flux d'une page à l'autre (re document HTML CSS).
1.1.5 Prévoir une sous-navigation accessible dans une application
La barre de tabulation qui se trouve en bas ou en haut de l’écran doit répondre aux critères d’accessibilité suivants:
- Le contrôle servant à identifier chacun des onglets de la barre de tabulation doit avoir un libellé qui décrit le contenu de la sous-section correspondante.
- Un indicateur visuel doit être présent pour distinguer les onglets non actifs de celui qui est présentement sélectionné.
- Le focus doit être fait sur le premier onglet lorsque la page qui contient la barre de tabulation est chargée ou lorsque le contenu de la page est rechargé.
- Lors de la sélection d’un onglet de la barre de tabulation, le focus doit être fait sur le premier élément de la sous-section correspondante.
IOS
Sur iOS, l’utilisateur doit être ramené au premier onglet lorsque l’utilisateur navigue au-delà du dernier onglet.
ANDROÏD
- Sur Android, la navigation peut s’arrêter sur le dernier onglet.
RESSOURCES
- En savoir plus sur le premier focus en contexte mobile (applications)
- En savoir plus sur le focus inutile en contexte mobile (applications)
1.2 Aide à la navigation
1.2.1 Prévoir une page d'aide
Une page d’aide doit être prévue sur le site :
- La page d’aide doit fournir des informations qui facilitent la consultation et l’utilisation du site, de même que les enjeux techniques. Le lien vers le site Assistance technique répond à ce besoin.
- La page d’aide doit également fournir des informations concernant l’accessibilité du site. Elle doit également comporter les préférences pour l’accessibilité (navigateur, etc.).
- Préférablement le positionnement est en haut de page, ou en pied de page avec un lien d’évitement en haut de page. Le lien vers la page d’aide à la navigation doit être disponible depuis le même endroit, sur toutes les pages, sur tous les sites de Radio-Canada, ICI TOU.TV et ICI MUSIQUE.
Sur Radio-Canada:
- Page Aide
- Page Accessibilité web
REMARQUES
Présenter les deux liens « Aide » et « Accessibilité » de façon distincte, dans le pied de page par exemple, même si le lien «Accessibilité» fait aussi partie de la page «Aide à la navigation».
RESSOURCES
1.2.2 Prévoir des liens d'évitement
Un lien d’évitement « Aller au contenu principal » doit être affiché au même endroit sur toutes les pages, au sommet de chaque page.
REMARQUES
Des liens « Aller au menu principal », « Aller au formulaire de recherche » et « Aller au pied de page » peuvent aussi être ajoutés aux côtés du lien « Aller au contenu principal » lorsque ces éléments sont éloignés du sommet de la page.
ASTUCES
Les liens d’évitement sont affichés seulement lors de la navigation par tabulation.
CAPTURES D'ÉCRAN
Les liens d’évitement «Aller au menu», «Aller au contenu principal» et «Aller au pied de page» sont offerts sur l’ensemble du site.
RESSOURCES
Voir aussi le document HTML / CSS
1.2.3 Prévoir l'aspect visuel et l'ordonnancement de la navigation par tabulation (focus)
À l’activation de la navigation par tabulation, il est nécessaire de distinguer de façon claire et apparente l’élément sélectionné à l’aide d’un focus, un élément graphique qui met l’emphase sur l’élément.
Le focus par défaut du navigateur n’est pas obligatoire, et le CSS peut en être modifié.
Une bonne manière de vérifier si l’aspect visuel de la présentation du focus est optimal est de valider son apparence (couleur, épaisseur, etc). sur fond pâle ou foncé.
Dans une application, il est important de spécifier le premier élément à recevoir le focus chaque fois que le contenu d’une page de l’application change. Le focus doit être automatiquement mis sur l’élément décrit plus haut à la suite des actions suivantes faites par l’utilisateur :
- Navigation vers une nouvelle page de l’application
- Retour vers la page précédente de l’application
- Rafraîchissement complet de la page
- Rafraîchissement partiel de la page si la zone rafraîchie contient l’élément en question
- Mise en avant-plan de l’application
RESSOURCES
2. Les textes et les polices de caractères
2.1 Textes
2.1.1 Conserver les accents sur les lettres capitales
Les accents doivent être conservés sur les mots écrits en capitales et sur les acronymes.
REMARQUES
Selon les normes de rédaction de Radio-Canada, les accents ne sont pas requis sur les acronymes.
ATTENTION
Les informations relatives aux pièces musicales (titre, artiste, album, compositeur, interprète, etc.) provenant de la base de données musicales n’ont pas d’accent.
RESSOURCES
2.1.2 Conserver la ponctuation comme élément de texte et non comme action
La ponctuation doit être utilisée comme tel, et non comme un élément cliquable. Par exemple, si les points de suspension sont utilisés lorsque le chapeau (lead) est trop long, ce ne sont pas les points qui sont cliquables mais l’ensemble de la carte qui nous amène à la suite de la lecture, au deuxième niveau.
2.1.3 Ne pas justifier le texte
Les textes ne doivent pas être justifiés. Il est recommandé d’utiliser l’alignement à gauche en tout temps. Les textes courts, les titres et les intitulés peuvent être centrés.
2.1.4 Ordonner le texte de manière logique
Lorsque des listes déroulantes sont utilisées, les options qu’elles contiennent doivent être ordonnées de manière logique.
L’ordre logique dépend du contexte, mais il peut s’agir notamment :
- D’un ordre alphabétique (une liste de titres, par exemple).
- D’un ordre numérique (une liste de chapitres, ou des dates, par exemple).
L’ordre demandant des connaissances particulières ou plus précises (par exemple, un ordre provincial géographique – d’ouest en est, la Colombie-Britannique vient avant l’Alberta) est à éviter.
REMARQUES
Dans une liste présentant les titres d'émissions débutant par un article défini ou indéfini (le, la, l', un, des), le nom suit l'ordre alphabétique du titre, et non l'article qui le précède. Pour faciliter la lecture et éviter de dénaturer le nom de l'émission, l'entrée dans la liste peut cependant débuter avec l'article. Par exemple, l'émission « La facture » est ordonnée sous « F » et non sous « L ».
2.2 Polices de caractères
2.2.1 Choisir une police appropriée pour le numérique
Prioriser une police de caractère Google Fonts ou une fonte web qu’il sera possible d’afficher à même la feuille de style CSS. Les polices de caractères utilisées doivent pouvoir être affichées sous forme de texte plutôt que sous forme d’images. La police de caractères Radio-Canada a été développée à ce dessein, et est accessible en format EOT, OTF, TTF, WOFF, WOFF2
- Seules les polices officielles de Radio-Canada sont utilisées avec la propriété CSS3 @font-face. (Exemple: Radio-Canada).
- Par défaut, font-family : idéal, commun, générique (ex. Arial, sans-serif).
REMARQUES
Pour définir les tailles des polices de caractères, utiliser uniquement des unités relatives en pixels.
ATTENTION
Utiliser CSS pour mettre en forme du texte sur des images. N’utiliser des textes intégrés aux images qu’en dernier recours. Voir la règle relative aux images informatives.
RESSOURCES
- Télécharger la police de caractères Radio-Canada
- Télécharger des Fontes Google
2.2.2 Garantir la lisibilité des contenus
Garantir la lisibilité des contenus, même si l’utilisateur peut doubler la taille du texte dans son navigateur.
- Spécifier un interlignage optimal pour les textes. La norme recommandée se situe entre 1.3 et 1.9 de ratio. Sur Radio-Canada, l’interlignage par défaut est de 1.5 pour les documents simples. Pour les cas avec peu de texte (titre, amorce, liste de liens, fil en continu), un interlignage de 1.3 est acceptable.
- Prévoir une marge entre les paragraphes d’au moins 1.5 fois la valeur de l’interligne, quelle que soit la taille du texte.
- Lorsqu’une mise en page comporte plus d’une colonne de contenus côte à côte, en vue desktop par exemple, s’assurer qu’il n’y a aucun chevauchement de boîte ou de disparition de texte lors d’un agrandissement de page. En vue mobile, s’assurer que les colonnes s’empilent de façon optimale.
ASTUCES
- Prévoir un moyen de contrôler la taille du texte à même la page, à l'aide d'une icône qui permet un zoom manuel.
RESSOURCES
3. Les couleurs
3.1 Contrastes
3.1.1 Assurer un contraste suffisant entre les contenus et l'arrière-plan
Le contraste entre les contenus et l’arrière-plan doit être suffisant pour l’ensemble des éléments (textes, images, animations, etc.). Si ce n’est pas le cas, proposer une solution de remplacement contrastée adéquate. Le contraste entre le contenu cliquable et celui non cliquable doit également être suffisamment perceptible.
Les ratios de contraste entre le texte et les images sont les suivants:
- Un rapport de contraste de 1 pour 4,5 est requis entre un arrière-plan et un texte rédigé en 14 px ou moins.
- Un rapport de contraste de 1 pour 4,5 est requis entre un arrière-plan et un texte rédigé entre 14 px et 18 px, si le texte est en léger ou en régulier.
- Un rapport de contraste de 1 pour 3 est requis entre un arrière-plan et un texte rédigé en 18 px ou plus.
Cette règle ne s’applique pas dans les cas suivants:
- Texte décoratif (sans information pertinente)
- Logo sans pertinence principale à la compréhension de la page
(par exemple commanditaires – information secondaire vs. logo d’émission – information principale).
RESSOURCES
Pour tester les contrastes:
- http://leaverou.github.io/contrast-ratio/ (en anglais)
- https://contrasteapp.com/ (en anglais)
- http://webaim.org/resources/contrastchecker/ (en anglais)
- http://wiki.accede-web.com/ressources/mode-d-emploi-du-logiciel-contrast-analyser.
- http://www.paciellogroup.com/resources/contrastanalyser/ (en anglais)
Couleurs accessibles des bannières de Radio-Canada, selon le contraste de 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
L’information ne doit pas être véhiculée uniquement par la couleur. Il faut s’assurer que la densité et la saturation des couleurs choisies soient suffisamment distinctes pour percevoir une différence dans la palette, pour ceux qui ne perçoivent pas la couleur.
ASTUCES
- Convertir la maquette en nuances de gris et vérifier que l’ensemble des informations reste compréhensible (exemple A).
- Utiliser le schéma qui convient à l’information présentée. Par exemple, si l'usage d'un schéma n’est pas concluant, car il nécessite une légende explicative basée sur la couleur, privilégier un autre type de schéma (tartes, colonnes, lignes, etc.), ou apporter des modifications à la mise en page afin d'inscrire l’information à côté de chaque portion (exemple B).
CAPTURES D'ÉCRAN
Cet exemple (A) permet de constater que lorsque toutes les données sont sélectionnées, il est impossible de distinguer quoi que ce soit pour ceux qui ne perçoivent pas la couleur.
Cet exemple (B) démontre que la tarte de droite est conçue de façon compréhensible pour ceux qui perçoivent pas la couleur.
RESSOURCES
Vérifiez l'accessibilité des couleurs à l'aide de cet outil en ligne (en anglais).
3.2.2 Garantir la lisibilité des contenus lorsque les images ne sont pas affichées
Lorsque les images ne sont pas affichées, les contenus textuels de la page doivent rester visibles et lisibles. Aucune information ne doit être perdue, et le contraste entre la couleur du texte et la couleur d’arrière-plan doit être suffisamment élevé (se référer à la notice d’accessibilité pour la conception graphique).
C’est-à-dire que tous les contenus doivent pouvoir être lus :
- Même lorsque les images intégrées en CSS ne sont pas chargées dans la page.
- Même lorsque les images intégrées en HTML sont remplacées par le contenu de leur attribut « alt ».
ASTUCES
Chaque fois qu’un texte est superposé à une image d’arrière-plan, veiller à mettre en place une couleur de remplacement, qui garantira la lisibilité du texte en l’absence de l’image. Dans le cas d’une image à fort contraste, éviter de faire passer du texte en négatif et en positif à la fois (dégradé, par exemple), dans le but d’assurer la lisibilité sur la couleur de remplacement qui elle, est uniforme. Cette couleur de remplacement peut être héritée d’un élément parent.
4. Les liens
4.1 Identification visuelle
4.1.1 Distinguer les liens du texte courant
Lorsque des liens sont intégrés dans les contenus, ils doivent être différenciés visuellement du texte qui les entoure, par exemple, en les soulignant.
Cette règle concerne uniquement les liens à même le contenu principal. Les liens intégrés dans des groupes de liens (dans les menus, par exemple) ne sont pas concernés car suffisamment reconnaissables comme tels.
ASTUCES
En plus de cette recommandation, il est également utile de prévoir l’apparence des liens au survol dans les maquettes :
- Lien avec trait (exemple A) Normal : lien de couleur, souligné d'un trait pointillé 1 px. Survol : trait plein et large bande de couleur en arrière-plan. Usage : liens intégrés dans un texte courant. Pour les titres de grands formats et les titres dans un fil éditorial, le soulignement n'est pas nécessaire; cependant l'état de survol doit être précisé.
- Lien sans trait (exemple B): Normal : lien de couleur. Survol : changement de couleur du lien et large bande de couleur en arrière-plan, déclinaison pâle de la couleur du lien. Usage : liens en énumération (module d'informations complémentaires, fil de liens éditoriaux, mots-clés, etc.).
ASTUCES - BONIFICATION
- Une autre bonne astuce est de modifier la couleur du lien lorsque le contenu a été consulté.
ATTENTION
Il est fortement déconseillé de :
- Se baser uniquement sur la couleur pour différencier visuellement les liens du texte qui les entoure.
- D’appliquer un effet de soulignement à d’autres éléments que les liens.
CAPTURES D'ÉCRAN
RESSOURCES
Lecture pertinente 1 (en anglais)
Lecture pertinente 2 (en anglais)
4.2 Intitulés
4.2.1 Utiliser un intitulé explicite
Un intitulé explicite doit être prévu pour chaque lien et chaque bouton, c’est-à-dire que la fonction du lien doit être parfaitement compréhensible à la lecture du seul intitulé, par exemple, Consulter le site.
Malgré tout, pour demeurer compréhensible, l’information précise concernant la page d’aboutissement doit se trouver dans l’attribut « title » (par exemple, Consulter le site Médium Large).
4.2.2 Identifier les liens externes
Pour chaque lien qui déclenche une sortie du site, soit par l’ouverture d’une fenêtre d’extraction ou d’un nouvel onglet, prévoir une identification claire à l’aide d’une icône afin de prévenir l’utilisateur de cette action.
Cette icône complète le lien en le suivant immédiatement.
REMARQUES
On applique une règle d'exception pour les contenus provenant de sites qui appartiennent à Radio-Canada, même si l'url diffère du site de Radio-Canada.ca: ICI TOU.TV, ICI MUSIQUE, ICI EXPLORA, ICI ARTV.
CAPTURES D'ÉCRAN
Le pictogramme indiquant qu’il s’agit d’un lien externe complète le lien.
4.2.3 Préciser les liens pointant sur des documents à télécharger
Chaque fois qu’un lien pointe sur un document à télécharger, les informations suivantes doivent être précisées à même l’intitulé :
- Le nom du document;
- Le type de document;
- Le poids du document;
- La langue du document (si celle-ci est différente de la langue principale de la page).
CAPTURES D'ÉCRAN
L’information relative au document (type de document, poids, langue) doit être intégrée dans le lien.
5. Les visuels
5.1 Icônes, symboles et pictogrammes
5.1.1 Assurer la compréhension des pictogrammes
L’usage d’un pictogramme devrait faciliter la compréhension d’un élément en un coup d’oeil. Si sa signification est complexe ou n’est pas immédiatement évidente, le pictogramme doit :
- Être accompagné d’un texte qui en précise le sens.
- Être positionné à proximité de ce texte.
REMARQUES
S’il n’est pas envisageable d’associer un texte à certains pictogrammes dont le sens peut porter à confusion, des solutions sont possibles, comme la présentation d'une légende, ou l'ajout d’infobulles, par exemple.
CAPTURES D'ÉCRAN
Voici un exemple où un libellé accompagne un pictogramme afin d’en préciser le sens.
5.1.2 Utiliser la police d'icônes de Radio-Canada
Les icônes utilisées sur les sites d’ICI Radio-Canada.ca, ICI Musique et ICI Tou.tv font partie d’une police de caractères créée spécialement pour l’usage numérique. Pour assurer leur reconnaissance sur l’ensemble des plateformes, privilégier l’usage de cette police plutôt que toute autre image vectorielle. Au besoin, des icônes peuvent être ajoutées ou modifiées.
La police d’icônes de Radio-Canada (eot, svp, ttf, wott)
RESSOURCES
5.1.3 Utiliser des icônes d’action claires pour les carrousels
Les carrousels, qu’ils soient à défilement manuel ou automatique, doivent être accompagnés d’icônes claires pour la pagination (points de progression, numérotation, etc.) et pour la navigation (flèches, barres de progression).
Dans le cas d’un carrousel à défilement automatique, dès qu’une action est entreprise (par la flèche ou la pagination) le défilement automatique s’arrête. Un système de mise en pause (texte et/ou icône pause) et de relance (texte et/ou icône flèche) du mouvement est requis pour ce type de carrousel (contenu animé).
REMARQUES
Appliquez les mêmes icônes provenant de la police de Radio-Canada à l'ensemble des carrousels utilisés sur Radio-Canada.ca, ICI TOU.TV et ICI MUSIQUE.
CAPTURES D'ÉCRAN
Dans le cas d’un carrousel sans défilement automatique, privilégier des indications claires pour la pagination (chiffrée) et la navigation (flèches).
Pour un carrousel avec défilement automatique, un système de pause est requis.
RESSOURCES
Voici quelques exemples et lectures pratiques pour créer des carrousels optimaux en terme d’accessibilité :
- http://bxslider.com/examples/multiple-slideshows (en anglais)
- http://www.sitepoint.com/unbearable-accessible-slideshow/ (en anglais)
- http://libeo.com/blogue/2014/02/12/decouvrez-des-pratiques-essentielles-pour-un-site-web-accessible/
- http://wet-boew.github.io/v4.0-ci/demos/tabs/tabs-carousel-fr.html
- http://blog.60canards.com/2012/01/ergonomie-des-carrousels-10-principes-a-respecter
- http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/ (en anglais)
- http://skyefradd.me/plugins/a11ycarousel/ (en anglais)
5.2 Visuel imagé (photographie, vidéo, illustration)
5.2.1 Décrire le visuel
Tout visuel imagé (photographie, vidéo, illustration) doit avoir un descriptif qui l’accompagne, incluant, dans l’ordre, une courte légende ainsi qu’un crédit. Ces deux éléments sont obligatoires par souci légal.
Pour les crédits, deux intitulés sont possibles : pour une photo, l’intitulé est PHOTO, alors que pour une vidéo ou une illustration de données, l’intitulé est SOURCE.
CAPTURES D'ÉCRAN
Voici un exemple de descriptif (légende et crédit photographique) accompagnant une photo.
5.2.2 Limiter l'usage du texte sur le visuel
Pour faciliter la lisibilité et l’impact visuel des images photographiques ou illustratives, limiter le texte au sein de toute image statique (teaser, etc.). S’il s’agit d’une action à poser, l’indiquer clairement et de façon concise :
- Participez au concours.
- Consultez le dossier complet.
Une pratique optimale pour le référencement est de limiter le texte à 60 caractères ou moins, et de l’indiquer dans le alt-tag de l’image.
L’utilisation d’une étiquette superposée à une image doit être faite en CSS, afin de s’assurer que l’étiquette soit lue par un lecteur d’écran.
CAPTURES D'ÉCRAN
Un texte d’action clair utilisé sur un fond uni facilite la compréhension du message.
5.3 Visuel informatif (tableau, illustration de données, infographie)
5.3.1 Bannir les illustrations de données sous forme d’image statique
Les illustrations de données interactives ou les infographies doivent pouvoir être lues par un lecteur d’écran. Les données présentées sous forme d’images sont à proscrire : elles ne sont pas lisibles par un lecteur d’écran et ne sont pas prises en compte dans le référencement. S’il est impossible de ne pas utiliser une image statique, s’assurer que les données sont copiées dans le champ long dans le HTML.
REMARQUES
Avant de concevoir une telle illustration, privilégiez des outils de création d'illustrations qui répondent aux normes d'accessibilité, en vérifiant dans la liste des outils de publication approuvés.
ASTUCES
Un lien « Consulter sous forme de texte » sous forme d’accordéon doit figurer sous le tableau, comprenant une description détaillée du tableau. La description se situe sous l’image, alignée à gauche, et le style devra être conforme au style appliqué au corps du texte. (re interfaces riches) (fonctionnalité en développement)
CAPTURES D'ÉCRAN
L’exemple de gauche présente de l’information pertinente qui est inaccessible aux lecteurs d’écran car elle est imbriquée uniquement dans l’image. Il est préférable d’écrire toute information pertinente en HTML, comme l’exemple de droite.
Un autre exemple où l’extrait d’un document n’a pas fait l’objet d’une saisie dans l’éditeur Scoop!, ni retranscrit dans le alt. L’information est impossible à lire pour un lecteur d’écran. Sans contrôle sur l’interlignage puisque c’est une image, le document peut être difficile à lire.
Un exemple de retranscription de données dans un lien «Consulter sous forme de texte » présenté en accordéon (maquette en développement).
RESSOURCES
Exemple d'accordéon où figurent les données reliées à une illustration
Liste des outils utilisés par l'équipe multiplateforme
5.3.2 Prévoir un titre pour chaque visuel informatif
Lorsque des tableaux de données sont utilisés, ils doivent être immédiatement précédés d’un titre clair et concis qui décrit explicitement le contenu.
6. Les formulaires
6.1 Intitulés et champs
6.1.1 Prévoir des intitulés clairs
Un intitulé explicite doit être prévu pour chaque champ de formulaire. Cet intitulé doit être positionné à proximité du champ auquel il est associé. Seuls quelques pixels doivent séparer un intitulé de son champ correspondant.
REMARQUES
S’assurer de l’uniformité des formulaires, autant dans le choix des intitulés que dans l’ordre de présentation des champs ou les champs utilisés, d’une plateforme à l’autre.
ASTUCES
Utiliser le champ est une bonne astuce pour indiquer le type d'information requise.
CAPTURES D'ÉCRAN
Un exemple de formulaire avec des intitulés clairs.
RESSOURCES
- Voir le document HTML et CSS : Intégrer les informations utiles à la saisie directement dans les balises
6.1.2 Regrouper et titrer les champs de même nature
Lorsque des champs de même nature sont présents dans les formulaires longs (par exemple, une liste de participants, avec une répétition de champs semblables, ex. Nom, prénom, adresse), ceux-ci doivent :
- Être visuellement regroupés entre eux.
- Titrés de façon claire et concise.
- Être présentés dans le même ordre.
CAPTURES D'ÉCRAN
Un exemple de formulaire avec des champs de même nature présentés à répétition.
6.1.3 Indiquer clairement les champs obligatoires
Sur chaque formulaire, les champs obligatoires doivent être clairement indiqués :
- Un signe distinctif (mention, symbole, pictogramme, etc.) doit être prévu dans l’intitulé de chaque champ obligatoire, au-dessus de chaque champ.
- Si tous les champs sont obligatoires, une mention doit apparaître au début du formulaire, positionnée en haut du premier champ, avec le symbole ou le pictogramme qui signale un champ obligatoire. Ce symbole apparaîtra au-dessus de chaque champ.
6.2 Boutons
6.2.1 Prévoir un bouton de soumission à la fin de chaque formulaire
Un bouton de soumission doit être prévu à la fin de chaque formulaire, positionné de manière accessible et intuitive.
REMARQUES
Dans certaines situations, il n’est pas nécessaire de prévoir un bouton. C’est le cas pour une liste déroulante (baladodiffusion, module de commentaires) qui permet de trier dynamiquement une liste de résultats, car l’action est déclenchée dynamiquement.
CAPTURES D'ÉCRAN
Un exemple de bouton de soumission positionné à la fin du module de commentaires. La liste déroulante, qui permet de trier les commentaires, ne requiert pas de bouton de soumission.
6.2.2 Utiliser des intitulés clairs pour chaque bouton
Un intitulé explicite doit être prévu pour chaque bouton de formulaire. C’est-à-dire que la fonction du bouton doit être parfaitement compréhensible à la lecture du seul intitulé, même si ce dernier est lu en dehors de son contexte.
Par exemple, les intitulés suivants sont à éviter :
OK
Valider
Confirmer
Et devraient être remplacés par un verbe d’action et son complément :
- S’inscrire
- Passer à l’étape 2
- Confirmer le paiement
6.2.3 Prévoir des zones réactives suffisamment grandes et espacées
IOS
La norme actuelle qui prévaut sur les applications de Radio-Canada est de 48 points x 48 points.
ANDROÏD
La norme actuelle qui prévaut sur les applications de Radio-Canada est de 48 dp x 48 dp.
6.3 Messages d'information
6.3.1 dentifier les formats de saisie spécifiques
Chaque fois qu’un format de saisie spécifique est attendu dans un champ de formulaire (par exemple, le poids maximum d’une image, le format accepté, le maximum de caractères, les tirets entre les chiffres d’un numéro de téléphone, l’omission des espaces entre les blocs de chiffres d’une carte de crédit, etc.), celui-ci doit être indiqué a priori à l’utilisateur.
ASTUCES
Des suggestions de saisie facilitent la complétion d’un formulaire ou d'une requête.
CAPTURES D'ÉCRAN
Exemples de formats de saisie (poids de l’image, longueur de texte).
Exemple de suggestion de saisie dans un moteur de recherche.
6.3.2 Prévoir des messages d'erreur explicites et des suggestions de correction
Chaque fois qu’un formulaire est susceptible de contenir des erreurs, les éléments suivants doivent être prévus :
- Des messages d’erreur explicites.
- Des suggestions de correction.
Ces éléments doivent être positionnés au-dessus de chaque champ concerné.
Les messages d’erreur doivent être clairs : à la lecture du seul message, la cause de l’erreur doit être compréhensible et le champ concerné identifiable.
Des suggestions de correction doivent être prévues dès qu’une erreur est due à un format de saisie incorrect.
ASTUCES
L'utilisation d'une couleur différente, rouge par exemple, appliqué au message, et un filet large entourant la boîte du champ, aide à identifier l'erreur pour qui perçoit la couleur.
CAPTURES D'ÉCRAN
Un exemple de champ qui comporte une erreur (maquette en développement).
6.3.3 Prévoir un message de confirmation
Chaque fois qu’un formulaire est validé avec succès, un message de confirmation doit être prévu. Ce message doit rappeler la nature de l’action effectuée.
REMARQUES
Dans certaines situations, le message de confirmation n’est pas nécessaire, car la page affichée après la soumission rend le résultat de l’action évident. Par exemple :
- Formulaire de connexion qui envoie vers une page de profil utilisateur.
- Bouton « Passer à l’étape suivante » utilisé dans un formulaire à étapes multiples, dont l'intitulé est en soi explicite.
CAPTURES D'ÉCRAN
Un exemple de message confirmant l’action effectuée.
6.4 Formulaires à étapes multiples
6.4.1 Indiquer clairement le nombre d'étapes
Pour chaque formulaire à étapes multiples, le nombre total d’étapes ainsi que l’étape en cours de consultation doivent être clairement indiqués, entre autres avec une couleur spécifique qui différencie l’onglet actif.
Un moyen de revenir aux étapes précédentes doit aussi être prévu. L’intitulé doit être explicite.
CAPTURES D'ÉCRAN
Un exemple où le nombre d’étapes est bien indiqué. L’étape en cours est distincte, et le retour à une étape précédente est possible (changement de couleur au survol).
6.4.2 Prévoir un récapitulatif des données
Pour chaque formulaire à étapes multiples, un récapitulatif de l’ensemble des données entrées doit être proposé à l’utilisateur avant la soumission finale du formulaire.
À partir de ce récapitulatif, il doit être possible de modifier directement une donnée ou l’ensemble des données, ou de revenir aux étapes précédentes, afin d’en certifier l’exactitude.
CAPTURES D'ÉCRAN
Un exemple où un récapitulatif des données se met à jour étape par étape dans le formulaire à étapes multiples.
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
Les systèmes antispam (CAPTCHA) sont des systèmes conçus pour empêcher les « spammeurs » d’accéder à un site.
Pour valider un CAPTCHA, il faut renseigner le champ correspondant avec le code préalablement déchiffré visuellement ou écouté. Mais les CAPTCHA sont problématiques pour l’accessibilité car ils peuvent êtres très compliqués pour de nombreux utilisateurs. Notamment les personnes aveugles, malvoyantes ou encore dyslexiques.
Par conséquent, privilégier des tests de sécurité moins bloquants pour les utilisateurs comme les tests logiques, par exemple une question mathématique.
Question mathématique
Cette solution consiste à intégrer une question mathématique élémentaire dans le formulaire dans un champ de type texte. La réponse doit s’afficher en chiffres. Voici quelques exemples :
- Combien font 8 moins 2 ? (en chiffres)
- Quel est le nombre entre 45 et 47 ? (en chiffres)
ASTUCES
- Il est recommandé d’introduire ce test logique par une mention du type : « La question ci-après nous permet de vérifier que ce formulaire n’est pas rempli par un robot. ».
- Une bonne pratique d’accessibilité particulièrement intéressante pour les personnes déficientes cognitives consiste à prévoir une solution de rafraîchissement de la question simple ou mathématique.
ATTENTION
S’il n’est pas envisageable d’utiliser un test logique et qu'on préconise la solution du CAPTCHA, prévoir une alternative pour chaque CAPTCHA uniquement visuel ou sonore, de la même langue que la page (par exemple, en français sur radio-canada.ca).
CAPTURES D'ÉCRAN
Exemple de question mathématique
RESSOURCES
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
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.3.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| 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)
- 1.1 Navigation globale
- 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
- 2.1 Textes
- 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
- 3.1 Contrastes
- 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
- 4.1 Identification visuelle
- 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
- 5.1 Icônes, symboles et pictogrammes
- 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
- 6.1 Intitulés et champs
- 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
- 7.1 Contenus vidéo
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
HTML5
ASTUCES
ASTUCES - BONIFICATION
ATTENTION
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
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.
Si vous avez des questions ou des commentaires, merci de les adresser à accessibilite@radio-canada.ca. Nous y répondrons dès que possible.