Guide de création de contenu Web pour ontario.ca

Travailler avec le code HTML

N’utilisez pas de système de traitement de texte tel que Microsoft Word. Essayez Sublime Text (en anglais seulement) ou Notepad++ (en anglais seulement) ou un éditeur de texte de votre choix. Si vous ne pouvez pas installer de logiciels sur votre ordinateur professionnel, essayez d’utiliser une version portable de Sublime Text (en anglais seulement) out Notepad++ Portable (en anglais seulement) qui ne nécessitent pas d’installation préalable.

La plupart des éditeurs de texte sont dotés des fonctionnalités suivantes :

• sauvegarde du travail en cours
• mise en forme et en retrait du code HTML et CSS
• correction automatique de certaines erreurs
• affichage du code HTML et CSS en couleur afin de faciliter la lecture

Assurance de la qualité

Vérifiez manuellement si le code et le contenu sont exempts d’erreur et si les liens fonctionnent avant la publication.

Vérifiez si vous utilisez le format et les mots-clés appropriés en consultant le guide de conception.

Pour en savoir plus, consultez le site ontario.ca : vérifier votre travail et assurance de la qualité (AQ) (lien interne d’InsideOPS ; en anglais seulement).

Programme de validation

Copiez et collez votre code HTML dans le validateur HTML du W3C. Vous ne pourrez valider un HTML d’ontario.ca, parce que le contenu y est généré par JavaScript. Utilisez plutôt la commande « Validate by Direct Input » et choisissez « Validate HTML » fragment. Sélectionnez le bouton « Check ».

Avec le contenu d’ontario.ca, vous aurez des messages d’erreur ou des mises en garde si vous utilisez des éléments propres à <onesite>. Sautez ces éléments et réglez les autres problèmes.

Lignes directrices pour le code HTML

Suivez les styles et conventions HTML standard pour un code ordonné et cohérent. Voici des exemples :

• Écrire les noms des balises en minuscules
  • À faire : <p>
  • À ne pas faire : <P>
• Mettre les attributs entre guillemets
  • À faire : <span lang="en">
  • À ne pas faire : <span lang=en>
• Insérer une balise de fin pour tous les éléments qui ne sont pas mentionnés ci-dessus
  • À faire : <p>Ceci est une phrase.</p>
  • À ne pas faire : <p>Ceci est une phrase.

N’utilisez pas certains éléments et attributs HTML et les classes CSS répertoriés dans la liste ci-dessous ayant le libellé « ne pas utiliser ».

Éléments HTML utilisés sur le site ontario.ca

• a
• abbr
• acronym — ne pas utiliser
• aside
• b — ne pas utiliser
• blockquote
• br
• caption
• cite
• dd
• div
• dl
• dt
• em — ne pas utiliser
• figcaption
• figure
• h1 — ne pas utiliser
• h2, h3, h4, h5, h6
• hr
• i
• iframe
• img
• li
• ol
• onesite-datatable
• onesite-fax
• onesite-phone
• onesite-ref
• p
• q
• small
• span
• strong
• sub
• sup
• table
• tbody
• td
• tfoot
• th
• thead
• tr
• u — ne pas utiliser
• ul

Attributs HTML

• allowfullscreen — pour iframe pour iframe uniquement
• alt — pour img uniquement
• bullet-colour — pour ol.fancy uniquement
• class — peut être utilisé pour tous les éléments
• dir — peut être utilisé pour tous les éléments
• extension — pour onesite-phone uniquement
• frameborder — pour iframe uniquement
• headers — pour th et td uniquement
• height — pour img uniquement
• href — pour a uniquement
• hreflang — pour a uniquement
• icon — pour onesite-phone et onesite-fax uniquement
• id — peut être utilisé pour tous les éléments sauf h2
• label — pour onesite-phone et onesite-fax uniquement
• lang — peut être utilisé pour tous les éléments
• scope — pour th uniquement
• src — pour img et iframe uniquement
• summary — éviter; pour table
• tollfree — pour onesite-phone uniquement
• tty — pour onesite-phone uniquement
• type
• width — pour img uniquement

Éléments HTML personnalisés ontario.ca

Classes CSS

• alert
• button
• callout
• columns
• columns-x-large, columns-large, columns-medium, columns-small, columns-x-small
• end
• fancy
• full-width
• icon-name
• img-round
• inline-list
• large
• large-#
• left
• legal-list
• legal-list-parentheses
• medium-#
• medium-up-left, medium-up-right
• no-bullet
• no-stripes
• no-wrap
• non-numeric
• not-legal
• numeric
• org-chart
• parentheses, parentheses-right
• redacted
• right
• row
• show-for-sr
• small
• small-#
• smaller
• secondary
• summary
• text-left, text-right, text-center
• upper
• uppercase
• w-#

Abréviations

Les abréviations sont utilisées pour raccourcir des termes d’une certaine longueur. La balise <abbr> garantit que le sens des sigles, des acronymes et des abréviations employés est clair pour tous les utilisateurs. Faites un usage modéré des abréviations.

Les acronymes et les sigles sont également considérés comme des abréviations et les mêmes règles s’appliquent à ceux-ci. La balise <acronym> est dépréciée en HTML5.

Le guide de rédaction comporte des indications concernant les abréviations.

ONTERM et Termium sont d’excellentes ressources concernant de nombreuses abréviations employées par le gouvernement.

À faire et à ne pas faire

À faire

• utiliser la balise <abbr> avec la version complète la première fois que l’abréviation est utilisée sur une page, sans l’attribut title
• utiliser <abbr title="">…</abbr> à chaque occurrence après la première
• Placer les balises autour de mots complets
  • À faire : <abbr title="objets volants non identifiés">ovnis</abbr>
  • À ne pas faire : <abbr title="objets volants non identifiés">ovni</abbr>s

À ne pas faire

• utiliser une abréviation sur une page en français s’il n’y a pas d’équivalent en français (employer le mot complet en français, même si la version abrégée est utilisée sur la page en anglais)
• employer des sigles/acronymes/abréviations si le terme n’apparaît qu’une fois (employer le mot complet)
• utiliser des balises <abbr> pour des abréviations qui sont à présent employées comme des mots ou des abréviations qui sont très connues et qui se prononcent comme elles s’écrivent
• utiliser la casse de titre pour l’attribut title sauf s’il s’agit d’un nom propre

Accessibilité

Les lecteurs d’écran ne reconnaissent les sigles, les acronymes et les abréviations que s’ils sont identifiés par des balises. Par exemple, un lecteur d’écran peut dire « le gestionnaire de la ti » dans la phrase « Le gestionnaire de la TI est arrivé » au lieu de « le gestionnaire de la té-i ».

Première occurrence

Utilisez <abbr> avec la version complète la première fois, sans l’attribut title.

Occurrences suivantes

Après avoir défini l’abréviation la première fois, employez l’attribut title pour toutes les occurrences suivantes.

Balises HTML intérieures

Les abréviations peuvent être utilisées comme un élément « inline », c’est-à-dire qui peut être utilisé à l’intérieur d’autres codes.

Mots complets

Utilisez toujours les balises <abbr> autour du mot complet.

Pluriels

Seuls certains acronymes peuvent prendre la marque du pluriel en français, pas les sigles.

Lorsque l’abréviation constitue la racine d’un terme

Symboles

Utilisez les entités caractères ou HTML appropriées à la place d’abréviations. Reportez-vous à la liste officielle des entités caractères.

• s’il s’agit d’un signe moins dans une équation, utilisez − ou −
• s’il s’agit d’un tiret, utilisez – ou –
• s’il s’agit d’une multiplication, utilisez × ou ×

Abréviations courantes

Consultez les abréviations les plus couramment utilisées par le gouvernement de l’Ontario.

<abbr title="for example">e.g.</abbr>

<abbr title="par exemple">p.&nbsp;ex.</abbr>

<abbr title="et cetera">etc.</abbr>

<abbr title="et cetera">etc.</abbr>

<abbr title="versus">vs.</abbr>

<abbr title="contre">c.</abbr>

<abbr title="and others">et al.</abbr>

<abbr title="Incorporated">Inc.</abbr>

<abbr title="Incorporé">Inc.</abbr>

<abbr title="Limited">Ltd.</abbr>

<abbr title="Limitée">Ltée.</abbr>

Autres abréviations

Consultez les sigles correspondant aux ministères de l’Ontario.

<abbr title="Government of Ontario">GO</abbr> Transit

<abbr title="Gouvernement de l’Ontario">GO</abbr> Transit

<abbr title="Hypertext Markup Language">HTML</abbr>

<abbr title="langage de balisage d’hypertexte">HTML</abbr>

<abbr title="International Standard Serial Number">ISSN</abbr>

<abbr title="Numéro international normalisé des publications en série">ISSN</abbr>

<abbr title="Information and Information Technology">I&amp;IT</abbr>

<abbr title="information et technologie de l’information">ITI</abbr>

<abbr title="lesbian, gay, bisexual, transgender, queer and more">LGBTQ+</abbr>

<abbr title="lesbien, gai, bisexuel, transgenre, queer et autres">LGBTQ+</abbr>

<abbr title="Ontario terminology">ONTERM</abbr>

<abbr title="Terminologie de l’Ontario">ONTERM</abbr>

<abbr title="Ontario Student Assistance Program">OSAP</abbr>

<abbr title="Régime d’aide financière aux étudiantes et étudiants de l’Ontario">RAFEO</abbr>

<abbr title="Portable Document Format">PDF</abbr>

<abbr title="Format de document portable">PDF</abbr>

Unités

Les unités s’écrivent sans point et conservent la même forme au singulier et au pluriel. Consultez la section Nombres.

<abbr title="kilograms">kg</abbr>

<abbr title="kilogrammes">kg</abbr>

<abbr title="centimetres">cm</abbr>

<abbr title="centimètres">cm</abbr>

<abbr title="square kilometres">km<sup>2</sup></abbr>

<abbr title="kilomètre carré">km<sup>2</sup></abbr>

<abbr title="cubic metres">cm<sup>3</sup></abbr>

<abbr title="mètre cube">cm<sup>3</sup></abbr>

<abbr title="degrees Celsius">°C</abbr>

<abbr title="degrés Celsius">°C</abbr>

Termes juridiques

Les lois, les règlements et les titres d’autres documents, tels que le Budget ou l’Énoncé économique de l’automne, doivent être accompagnés de la balise <cite>. N’utilisez pas la balise <i> ou <em> tag. Voir la section concernant les caractères italiques.

Consultez également les Titres de directives, de politiques opérationnelles et de lignes directrices pour l’ensemble de la fonction publique de l’Ontario.

Chiffres romains

N’utilisez pas de chiffres romains sauf s’ils sont requis légalement ou s’ils sont employés pour renvoyer à des parties d’autres pages Web ou documents. Employez des balises d’abréviation avec les chiffres romains. Reportez-vous aux sections concernant les nombres et les listes numérotées en chiffres romains.

Cas où les mots ne sont pas signalés comme abréviations

Les termes qui étaient auparavant des abréviations ou des sigles et qui ont été tellement utilisés qu’ils deviennent des mots n’ont pas besoin d’être signalés comme des abréviations.

• fax
• vélo
• laser
• radar
• gym
• métro
• photo

Abréviations qui sont très connues et qui se prononcent comme elles s’écrivent.

• P.S.
• RSVP
• ASAP
• a.m.
• p.m.

Diagrammes, graphiques et infographies

Diagrammes et graphiques

Les diagrammes permettent de présenter des données visuellement. Utilisez un diagramme lorsque les comparaisons entre les valeurs et les tendances de données sont plus importantes pour l’utilisateur que les valeurs numériques en elles-mêmes.

À faire et à ne pas faire

À faire

• ajouter une légende qui décrit les comparaisons entre les valeurs et les tendances ou ajouter un tableau comportant les données correspondantes sous le diagramme
• utiliser du texte et des couleurs assez contrastés (en anglais seulement)
• utiliser une police de caractère d’au moins 12pt pour les étiquettes des diagrammes et des graphiques
• associer des étiquettes aux axes d’un diagramme ou d’un graphique
• vérifier que les graphiques sont lisibles sur des appareils mobiles (ou redimensionner le navigateur)

À ne pas faire

• utiliser une image d’un diagramme ou d’un graphique s’il peut être réalisé en HTML et en CSS (voir la section Infographies)
• utiliser des images de tableaux; il est préférable de créer un tableau
• appliquer une rotation à un texte pour qu’il s’affiche verticalement et non horizontalement (difficile à lire)

Accessibilité

Les graphiques en HTML accessibles ne nécessitent pas de texte de remplacement. Si votre graphique est une image, rédigez une légende détaillée présentant tous les renseignements qu’un utilisateur voyant peut avoir sur l’image.

Le texte de remplacement n’est pas suffisant pour les diagrammes complexes. Chaque navigateur comporte une limite du nombre de caractères que peut contenir le texte de remplacement. Évitez de dépasser 125 caractères car le texte de remplacement risque dans ce cas d’être coupé. Utilisez les légendes de schémas pour afficher un texte plus long.

Employez différents styles et tailles, différentes nuances claires et sombres ou différentes textures, en plus de la couleur, pour distinguer les séries de données et améliorer l’accessibilité pour les utilisateurs daltoniens. Les diagrammes et les graphiques doivent être compréhensibles s’ils sont imprimés en noir et blanc.

Pour en savoir plus, consultez la section sur les graphiques complexes et les longues descriptions de texte (lien interne d’InsideOPS ; en anglais seulement).

Organigrammes

Les images d’organigrammes ne sont pas accessibles, elles constituent un obstacle pour les personnes utilisant un lecteur d’écran. Elles sont également difficiles à lire pour les personnes ayant une basse vision ou utilisant un appareil mobile.

Au lieu d’utiliser une image, créez une simple liste sans numérotation avec la classe .org-chart et incluez des sous-listes emboîtées pour indiquer la hiérarchie de votre organisation. Encadrez chaque élément de la liste d’une balise <div></div> pour appliquer le style. Insérez un lien vers l’image d’origine en version imprimable.

Ci-après figure une version de l’organigramme du ministère du Chocolat. L’organigramme présente la structure hiérarchique suivante, le plus haut niveau correspondant au ministre du Chocolat.

Diagramme à barres

Construisez les diagrammes à barres ligne par ligne. Chaque barre peut avoir une largeur maximale de 100 %

Si vous voulez afficher les données suivantes :

• 2 000
• 3 500
• 560

Utilisez la valeur la plus importante (3 500) en tant que 100 % et calculez les autres valeurs à partir de cela. Vous pouvez utiliser une calculatrice de pourcentage en ligne (en anglais seulement). Pour modifier la taille de chaque barre, définissez la span class="amount w-##" en fonction du pourcentage approprié.

Les valeurs des lignes de votre diagramme à barres seront :

• w-57
• w-100
• w-16

Indiquez les valeurs correspondantes dans span class="number"

L’exemple suivant aligne la description à la droite du graphique.

Diagramme à barres empilées

L’ajout d’un autre span class="amount w-##" empile une autre barre au-dessus d’une barre.

L’exemple suivant est un diagramme à barres empilées avec les descriptions alignées à gauche.

Infographies

Une infographie associe des renseignements et des éléments graphiques pour présenter un contenu d’une façon visuellement intéressante. Les infographies associent du texte et des images, et parfois également des diagrammes ou des graphiques, souvent au sein d’un plus grand élément graphique.

Il faut prendre en compte la fonction d’une infographie afin de décider comment la présenter en ligne. Les infographies peuvent être utilisées aux fins de marketing en tant que contenu partageable, pouvant être publié sur les médias sociaux.

Si l’infographie est destinée à compléter le contenu Web, elle doit être créée en HTML et en CSS, garantissant l’accessibilité et la compatibilité sur les appareils mobiles. Ce type d’infographie est long à réaliser. Elles doivent donc être justifiées par une priorité gouvernementale ou marketing et approuvées par l’équipe des Services numériques du Bureau du Conseil des ministres pour être publiées sur ontario.ca.

À faire et à ne pas faire

À faire

• diffuser les contenus partageables par le biais des réseaux sociaux uniquement
• inclure un lien vers la version imprimable de l’infographie avec la mention « Télécharger une version imprimable de <titre du document> (PDF) » plutôt que l’intégrer à la page
• décrire les infographies imprimables à l’aide d’un texte de remplacement présentant les renseignements contenus dans l’infographie

À ne pas faire

• insérer des infographies trop volumineuses sur une page; elles ne sont pas accessibles, ni consultables sur les appareils mobiles

Coordonnées

À faire et à ne pas faire

À faire

• utiliser les icônes correspondantes uniquement sur les pages de renvoi et les placer avant les numéros de téléphone et de télécopieur, l’adresse de courriel, les comptes de médias sociaux et les adresses de site Web

À ne pas faire

• utiliser des icônes si le renseignement correspondant occupe plus d’une ligne avec l’icône
• inclure des liens vers des comptes de médias sociaux non-gouvernementaux

Numéros de téléphone et de télécopieur

Numéros de téléphone

Numéros de télécopieur

Numéros multiples

Icônes et étiquettes

Adresses de courriel

S’il existe une seule adresse de courriel devant être utilisée pour communiquer au sujet de l’ensemble d’une page, ne faites pas figurer l’adresse sur la page. Il est préférable d’utiliser le lien de contact dans le pied de page.

Adresses

Évitez les abréviations.

Mise en évidence du nom de l’organisme

Le niveau de titre doit être adapté en fonction du contexte.

Sites Web

Voir également la section concernant les liens.

Médias sociaux

À faire et à ne pas faire

À faire

• inclure des liens vers des comptes de médias sociaux actifs officiels du gouvernement (par exemple le compte d’un ministère, une campagne de marketing du gouvernement, etc.
• placer les liens vers les médias sociaux avant les autres coordonnées

À ne pas faire

• inclure des liens vers plusieurs comptes de médias sociaux du même type pour un service (par exemple, ne pas inclure des liens vers deux comptes Twitter/X différents)

Regrouper les coordonnées

Heures d’ouverture

Inclure tous les jours de la semaine. Vous pouvez regrouper les jours ayant les mêmes heures d’ouverture s’ils sont consécutifs.

Mise en évidence du contenu

Apartés et encadrés

À faire et à ne pas faire

À faire

• rester bref, en visant un maximum de 280 caractères
• réduire au minimum l’utilisation des encadrés et des apartés; éviter si possible d’en avoir plusieurs par page

À ne pas faire

• utiliser les apartés pour modifier la couleur de fond du texte; ils ont une valeur sémantique (en anglais seulement)
• utiliser les apartés pour mettre en évidence un contenu important (reportez-vous aux alertes de la page)
• mettre un paragraphe entier de contenu (plutôt qu’un court extrait) dans un encadré ou un aparté

Apartés

Un aparté doit inclure le contenu qui n’est pas directement lié au contenu présent sur la page. Le contenu d’un aparté pourrait être considéré comme distinct du reste du contenu de la page. Les apartés sont codés autrement que les encadrés afin de ne pas perturber le contenu pour les lecteurs d’écran.

Vous pouvez utiliser des apartés lorsque le contenu :

• peut être omis sans nuire au débit naturel du reste du contenu
• est stratégique ou destiné à des groupes d’intervenants particuliers

Utilisez blockquotes si le contenu est extrait d’une autre source et fait partie du contenu principal.

Ajuster le niveau de l’en-tête en fonction du contenu.

Encadrés

Un encadré est utilisé pour mettre l’accent sur un extrait important d’information du contenu d’une page. Le contenu d’un encadré doit être un élément de la page que vous souhaitez mettre en évidence, mais il ne s’agit pas d’une information cruciale.

Utilisez blockquotes pour le contenu cité ou les apartés pour le contenu qui est moins important que le contenu principal et qui n’a pas besoin d’être mis en évidence.

Vous pouvez utiliser un encadré :

• pour mettre en évidence du contenu interactif comme un formulaire, un champ de recherche ou un outil de calcul
• dans la barre latérale des liens connexes ou dans le corps de la page
• au sein d’infographies

Ajuster le niveau de l’en-tête en fonction du contenu.

Alertes de page

Les alertes de page contiennent des renseignements pouvant nécessiter une attention rapide et apparaissent généralement en haut d’une page pour attirer l’attention de l’utilisateur.

Utilisez des alertes de page pour :

• mettre en évidence un contenu qui avise les utilisateurs des interruptions de service et qui change
• attirer l’attention sur les avis de sécurité
• communiquer le résultat d’une action de l’utilisateur (par exemple, une erreur ou une confirmation)

À faire et à ne pas faire

À faire

• essayer de se limiter à une alerte par page
• rédiger des titres concis et des contenus totalisant un maximum de 280 caractères
• inclure des titres qui indiquent clairement l’objet de l’alerte (par exemple, « Avertissement »)
• ajuster le niveau de l’en-tête en fonction du contenu

À ne pas faire

• utiliser les alertes de page uniquement pour la mise en forme du contenu régulier (pour souligner ou mettre en évidence)
• inclure des alertes qui ne sont pas liées à l’objectif actuel de l’utilisateur
• blâmer l’utilisateur dans les messages d’erreur (n’employez pas « Vous avez saisi un code postal non valide », mais plutôt « Veuillez saisir uniquement des chiffres et des lettres »)

Étiquettes archivage

Les étiquettes d’archivage permettent de signaler des contenus en ligne obsolètes ou inexacts, mais qui doivent rester en ligne à des fins de recherche ou d’archivage. Les contenus archivés doivent comporter un lien vers la version actuelle d’un document, si elle existe.

Contenu obsolète

Contenu ayant été remplacé par un contenu plus récent et plus pertinent.

Contenu inexact

Contenu inexact qui peut induire le public en erreur s’il n’est pas signalé comme il convient.

Gouvernements précédents

Contenu émanant d’un gouvernement précédent et qui ne correspond pas aux positions, aux documents de politique ou aux communiqués de presse du gouvernement actuel. Il n’y a pas de lien associé dans ce cas.

Boutons liens

À faire et à ne pas faire

À faire

• s’assurer que le texte est clair, descriptif et orienté vers l’action (par exemple, « Demandez le RAFEO » ou « Téléchargez votre reçu »)
• rédiger en minuscules (les majuscules servent seulement de première lettre au premier mot)
• utiliser un maximum de 25 caractères, espaces compris

À ne pas faire

• changer la couleur des boutons
• souligner le texte des boutons primaires ou secondaires
• employer des boutons primaires et secondaires, à moins qu’ils soient absolument nécessaires

Vous pouvez employer des boutons pour aider l’utilisateur à effectuer une action importante comme télécharger un PDF ou autoriser un achat. Utilisez un appel à l’action précis plutôt qu’un appel générique. Par exemple : « Remplir notre sondage » au lieu de « Faire part de vos commentaires ».

Images, cartes et videos

Images

À faire et à ne pas faire

À faire

• utiliser des images pour illustrer des choses concrètes (par exemple des animaux, cartes d’identité, une vignettes d’immatriculation), et non des concepts abstraits (par exemple, lumière, holistique, synergie)
• utiliser la marque de l’identité visuelle de l’Ontario (logos et graphiques de campagne de marketing approuvés) et les marques ontariennes approuvées (par exemple, ServiceOntario)
• utiliser les images pour illustrer la hiérarchisation du contenu en utilisant des bannières hautes sur les pages d’entrée (pages d’accueil, page de renvoi pour une campagne de marketing), des bannières étroites sur les pages de renvoi principales sur un sujet et pas de bannière sur les pages sous-thématiques ou comportant un article
• optimiser les images pour le Web afin de réduire autant que possible la taille des fichiers tout en maintenant une qualité raisonnable (lisez « Compression de fichiers images » dans le système de conception)

À ne pas faire

• mettre du texte sur des images
• utiliser des images de texte sauf pour les logos pour lesquels la préservation de la police est essentielle, ou pour les cartes et les graphiques; les images de texte constituent des obstacles pour les utilisateurs d’appareils mobiles et pour les personnes ayant une basse vision
• utiliser des photographies pour créer une ambiance ou décorer une page
• développer une nouvelle marque pour un programme ou une page — utiliser plutôt l’identité visuelle de l’Ontario
• déformer ou modifier fortement les images associées à l’identité visuelle de l’Ontario
• utiliser des images qui n’ont aucun rapport avec le sujet de la page
• utiliser des images trop petites pour distinguer des détails importants, en particulier lorsqu’elles sont affichées sur des appareils mobiles

Accessibilité des textes et images de remplacement

Les images peuvent faciliter la compréhension du contenu pour les personnes atteintes de déficiences cognitives et de troubles d’apprentissage. Elles constituent également des repères visuels pour les personnes ayant une basse vision. Les images inaccessibles peuvent constituer un obstacle pour certaines personnes.

Prenez en compte les questions d’inclusion et de diversité lors du choix de photographies. Réfléchissez à ce que vos choix représentent en matière d’âge, de genre, de race, de culture, de religion, d’orientation sexuelle, de capacités, de structure familiale, de revenu et de lieu. En savoir plus sur l’utilisation des photographies dans le système de conception.

Les images doivent comporter un texte de remplacement qui décrit le contenu de l’image, à moins qu’elles ne remplissent une fonction purement décorative. Outre le texte de remplacement, vérifiez l’apparence de vos images pour les utilisateurs daltoniens et en noir et blanc.

Pour en savoir plus, consultez la section sur les graphiques complexes et les longues descriptions de texte (lien interne d’InsideOPS ; en anglais seulement).

Quand ajouter du texte de remplacement

Le texte de remplacement offre une option de remplacement aux images, photographies et autres contenus non textuels.

Si une image est décorative et ne fournit aucune information supplémentaire, l’attribut alt doit être vide. Une façon de déterminer si une image est décorative est de rédiger le texte de remplacement, puis de décider s’il ajoute une valeur supplémentaire pour l’utilisateur.

Exemples de texte de remplacement :

• texte de remplacement qui apporte une valeur ajoutée : « Le ministre de la Santé serre la main d’un participant à la conférence »
• texte de remplacement qui n’apporte pas de valeur ajoutée : « Carré bleu » (l’image est décorative)

Référez-vous au site Web de WebAIM (en anglais seulement) pour consulter d’autres exemples.

Rédaction de texte de remplacement

À faire

• décrire l’image avec précision
• écrire ce qui est nécessaire pour couvrir les informations et la signification que l’image fournit
• décrire la fonction, le contenu et le contexte de l’image
• inclure les détails qui sont importants pour le récit et le sujet de la page
• être bref et concis — une phrase courte suffit souvent, mais au besoin, employer deux phrases au maximum
• limiter le texte à 125 caractères étant donné que la limite de caractères pour le texte de remplacement de chaque navigateur est différente (cette limite tient aussi compte du fait que la traduction française est, en général, plus longue que le texte en anglais)
• ajouter une légende à votre image si vous ne pouvez pas bien la décrire au moyen du texte de remplacement uniquement

À ne pas faire

• répéter l’information dans le texte de remplacement si l’image est entourée de contenu offrant déjà la même information — c’est redondant et ajoute un « fouillis » d’informations pour les utilisateurs d’appareils fonctionnels
• utiliser des phrases comme « image de … » ou « graphique de … » — les utilisateurs sauront déjà qu’ils sont concentrés sur un élément d’image

Bannières

Utilisez une bannière pour ajouter de l’intérêt visuel à la page d’accueil de :

• votre ministère
• une campagne de marketing payante
• une initiative gouvernementale de premier plan

Les images doivent :

• être exactement 760×560px
• ne pas dépasser 1 Mo
• être en format PNG, JPG ou JPEG

À faire et à ne pas faire

À faire

• choisir une seule image (plutôt qu’un panneau de plusieurs images) qui représente un aspect, une idée ou une interprétation du sujet de la page
• utiliser une image percutante et ciblée
• veiller à ce que la zone comprenant le titre et le chapeau qui se superpose sur la bannière ne masque pas le sujet principal, comme les visages de personnes.
• indiquer la source des images de bannière si nécessaire en utilisant une balise <small> dans le résumé ou au bas de la page.

À ne pas faire

• ajouter des bordures autour des bannières; les bannières occupent toute la largeur de l’écran de l’utilisateur

Vignettes

Les vignettes sont placées à droite du titre et de l’en-tête des pages d’articles. Les vignettes doivent :

• être exactement 352px de largeur
• ne pas dépasser 50 Ko
• être en format PNG, JPG ou JPEG

Essayez de faire correspondre les vignettes à la hauteur de l’en-tête. Par exemple, sur un ordinateur de bureau, un en-tête de page de :

• 1 à 2 lignes, utilisez un rapport d’image 16:9 ou une image de 352×198px
• 3 à 5 lines, utilisez un rapport d’image 4:3 ou une image de 352×264px
• 6 lignes ou plus, utilisez un rapport d’image 1:1 ou une image de 352×352px

Incluez un espace libre à l’intérieur de l’image pour les mots-symboles et les logos officiels, sinon le logo s’étendra jusqu’au bord de l’image.

Corps de page

À faire et à ne pas faire

À faire

• utiliser le format JPEG pour les photographies
• utiliser le format PNG pour les images non-photographiques (icônes, dessins)
• intégrer des images qui s’ajustent à la largeur de la page
• utiliser plusieurs images destinées aux différentes tailles d’écran, si nécessaire

À ne pas faire

• intégrer des images d’une largeur supérieure à 900px telles que des plans; il est préférable d’insérer un lien vers l’image
• utiliser des images qui ne sont pas identifiables lorsqu’elles sont affichées sur de petits écrans

Cartes

Les cartes doivent être soumises à l’approbation de Cabinet Office Digital, même s’il s’agit d’images, car il faut prendre en compte certains critères spécifiques en matière d’accessibilité et pour les appareils mobiles. Nous pouvons recommander qu’une carte soit présentée dans ces formats :

• ArcGIS ou carte ArcGIS en ligne
• description textuelle et PDF accessible

Toutes les images de cartes doivent comporter un texte descriptif présentant clairement son contenu, notamment :

• les coordonnées ou les adresses correspondantes dans un tableau sous la carte
• une description de ce que montre la carte
• une description de toute limite importante

La taille de la carte intégrée dans la page ne peut pas être plus large que la zone du contenu de corps. Vous pouvez inclure un lien vers une version PDF de plus grande taille aux fins d’impression.

Accessibilité des cartes

Le texte descriptif doit être visible par tous les utilisateurs et doit se situer au-dessus ou en-dessous de la carte (ou être accessible par un lien situé au-dessus ou en-dessous de la carte).

L’accessibilité inclut le recours à de nombreuses technologies d’assistance par les personnes handicapées, notamment : lecteurs d’écran, agrandisseurs d’écran, augmentation du contraste du texte du navigateur, zoom, etc. La description textuelle des éléments graphiques peut être utile pour toute personne atteinte de déficience visuelle et/ou de daltonisme.

Le texte de remplacement n’est pas suffisant dans le cas d’une carte pour deux raisons :

1. Chaque navigateur comporte une limite spécifique du nombre de caractères que peut contenir le texte de remplacement. Nous recommandons un maximum de 125 caractères. Cette limite tient aussi compte du fait que la traduction française est, en général, plus longue que le texte en anglais. En général, un texte de 125 caractères n’est pas suffisant pour décrire une carte.
2. Le texte de remplacement n’est pas toujours utilisé par les personnes atteintes de déficience visuelle et de daltonisme.

Si vous incluez un lien vers une version agrandie de la carte, utilisez un PDF haute résolution comprenant des formes et du texte vectorisés et non une image haute résolution, car le PDF permet une meilleure qualité d’impression.

Vidéos

Les vidéos peuvent être utiles pour transmettre des instructions ou des renseignements aux utilisateurs, mais elles peuvent également constituer un obstacle pour certains utilisateurs si des dispositions ne sont pas prises pour garantir leur accessibilité.

À faire et à ne pas faire

À faire

• utiliser des vidéos uniquement si le recours à des images en mouvement facilite la compréhension du contenu
• sous-titrer les vidéos
• inclure une transcription et une description audio

Accessibilité

Sous-titres

Les vidéos comprenant une piste audio doivent être dotées de sous-titres synchronisés avec cette piste audio. Tout ce qui est dit dans la vidéo doit figurer dans les sous-titres. Ils doivent également contenir les noms, les sons et les descriptions.

Il existe deux types de sous-titres : visibles et codés. Les sous-titres visibles sont intégrés à la vidéo et ne peuvent pas être désactivés. Les sous-titres codés peuvent être activés ou désactivés.

Description audio

Une description audio décrit oralement ce qui se passe dans la vidéo afin que ce contenu soit accessible aux personnes ayant une basse vision. Il existe deux méthodes pour réaliser des descriptions audio :

1. un narrateur décrit tous les renseignements visuels
2. un ajout d’une piste audio distincte qui décrit les renseignements visuels

Vidéos verticales

• utilisez la classe flex-video--shorts pour les vidéos verticales ou de format 9:16.
• l’application d’une grille permet de déterminer la taille de la vidéo en fonction de la taille de l’écran

Langues

Utilisez l’attribut lang pour signaler les changements de langue sur une page. Cela inclut le texte en anglais sur les pages en français et inversement.

À faire et à ne pas faire

À faire

• déclarer la langue principale de chaque page
• utiliser les codes ISO 639-1 en minuscules pour l’attribut lang sauf s’il n’en existe pas (utiliser le codes ISO 639-2 à la place)
• utiliser lang="XX" dans un élément <span>, <div> ou <p> qui contient du texte dans une autre langue

Caractères français

Liens en anglais sur une page en français

S’il n’existe pas de version française de la page, accordez les attributs lang et hreflang étant donné que le texte du lien est également en anglais.

Espaces insécables

Un espace insécable (en HTML  ) empêche le texte de passer à une nouvelle ligne. Il est important d’utiliser des espaces insécables au lieu d’espaces ordinaires dans certains cas en français.

Guillemets

Il faut insérer des espaces insécables après le guillemet ouvrant et avant le guillemet fermant.

Deux points

Ils doivent être précédés d’un espace insécable.

Tirets

Lorsqu’un tiret (trait d’union, tiret en ou tiret em) est précédé d’un espace, celui-ci doit être insécable.

Chiffres, dates et heures

L’espace après tout chiffre (ou fraction) doit être insécable, sauf s’il s’agit d’une année.

Si un mois ou une saison et une année sont séparés uniquement par un espace, celui-ci doit être insécable.

La lettre « h » servant à séparer les heures et les minutes doit aussi être suivie d’un espace insécable.

Autres cas

En plus des cas ci-dessus, il peut arriver que des espaces insécables doivent être utilisées pour faciliter la lecture d’un texte. Lisez le texte en question et demandez-vous s’il serait étrange que la ligne du texte soit divisée à cet endroit.

Outil pour les espaces insécables

Entrez le texte en français ci-dessous et les espaces insécables seront ajoutées ou les espaces ordinaires seront convertis automatiquement selon le cas. Vous devriez vérifier le texte par la suite pour déterminer si ces espaces sont appropriés.

Ajouter des espaces insécables

Lien vers des versions multilingues d’un contenu

Utilisez le nom de la page ou du document dans la langue dans laquelle est rédigé le contenu correspondant, suivi par le nom de la langue en français entre parenthèses. Cela permet de rendre ce contenu accessible à deux types de public :

1. les personnes comprenant peu le français
2. les personnes francophones recherchant un contenu dans une autre langue pour d’autres personnes (par exemple, les enfants de parents âgés et les travailleurs de la santé)

Mise en page

Alignement et retour à la ligne

La classe .no-wrap évite qu’un texte soit scindé sur plusieurs lignes. La modification des modalités de retour à la ligne d’un texte peut avoir un impact significatif sur la mise en page sur les appareils mobiles. Veuillez consulter cette section pour en savoir plus sur l’utilisation du retour à la ligne dans un document en français.

À faire et à ne pas faire

À faire

• faire un usage modéré de .no-wrap, pour 5 mots ou 20 chiffres ou moins
• utiliser le texte centré et aligné à droite si nécessaire lors de la création d’infographies et de représentations visuelles

À ne pas faire

• utiliser la classe .no-wrap ou   pour les numéros de téléphone; il est préférable d’utiliser les balises de numéro de téléphone
• utiliser le texte centré et aligné à droite pour les paragraphes et les listes

Pour éviter qu’un texte soit scindé sur plusieurs lignes, utilisez la classe .no-wrap.

Vous pouvez également remplacer une espace par une espace insécable pour éviter le retour à la ligne à cet emplacement :

Marges et espacements

Reportez-vous à la description complète des classes de marge et d’espacement pour modifier l’espacement dans votre mise en page.

Veuillez noter que toutes les classes d’espacement ont été modifiées pour le thème ontario.ca. L’utilisation de l’espace de noms ontario- du Système de conception de l’Ontario a été supprimée de chaque nom de classe pour ontario.ca. Par exemple :

• ontario-margin-top-0-! a été modifié par margin-top-0-!
• ontario-padding-top-0-! a été modifié par padding-top-0-!

Grilles

Si vous utilisez des colonnes à tout emplacement sur une page ontario.ca, veillez à ce que tout le contenu du corps de la page soit disposé en colonnes; dans le cas contraire, le texte ne sera pas aligné. Le texte dans les colonnes sera en retrait du fait du remplissage. Utilisez une ligne composée de .small-12 .columns pour tout contenu ne faisant pas partie de la disposition en plusieurs colonnes.

En savoir plus au sujet des options de colonnes dans le système de conception.

Ordonnancement des sources

À l’aide de ces classes d’ordonnancement des sources, vous pouvez déplacer les colonnes entre nos points d’arrêt.

Grille de blocks

Les grilles de blocs sont un moyen rapide de créer des colonnes de taille égale. Ajoutez une classe au format .[size]-up-[n] pour modifier le nombre de colonnes dans la ligne. Par défaut, le nombre maximal de colonnes que vous pouvez utiliser avec une grille de blocs est de 8.

Smarties

L’élément de conception Smarties utilise la grille de blocs avec le HTML supplémentaire pour les légendes, les styles de police et les couleurs d’arrière-plan. Utilisez les Smarties pour afficher des chiffres et des statistiques, en saisissant les statistiques de haut niveau du contenu.

À faire et à ne pas faire

À faire

• limiter le nombre de Smarties qui peuvent être utilisés par page à un maximum de deux ensembles, avec trois Smarties par ensemble
• utiliser les balises abbr selon le besoin. Reportez-vous à la section sur les abréviations.

À ne pas faire

• avoir plus d’une ligne de contenu dans un Smarties; si une préposition est nécessaire, choisissez d’utiliser « + » pour représenter « plus de », « ~ » pour représenter « environ », etc.
• utiliser des icônes dans un Smarties
• remplacer la taille de police par défaut

Choix de couleurs

Voici les 6 choix de couleurs des Smarties :

1. red-bg
2. orange-bg
3. green-bg
4. blue-bg
5. purple-bg
6. magenta-bg

Le bleu est la couleur par défaut des Smarties.

Lignes horizontales

Utilisez une ligne horizontale (<hr aria-hidden="true">) pour séparer des parties distinctes de contenu.

Retrait

Texte juridique

Lois, règlements et titres d’autres documents tels que le Budget ou l’Énoncé économique de l’automne

Texte caviardé

Insérer un message dans un champ d’alerte en haut de la page ou au début de la section.

Liste juridique

Liens

Les liens dirigent les utilisateurs vers une autre page ou vers d’autres renseignements sur la même page. Ils sont toujours soulignés, sauf dans le cadre de la navigation et des listes de liens (en anglais seulement). Le guide de rédaction vous indique comment rédiger des liens descriptifs.

À faire et à ne pas faire

À faire

• rédiger le texte des liens de façon claire et concise
• décrire la cible du lien à l’aide d’une formulation unique
• utiliser des liens relatifs pour du contenu sur le même domaine
  • ServiceOntario <a href="/fr/page/serviceontario">
• utiliser des liens absolus pour du contenu sur d’autres domaines
  • Destination Ontario <a href="https://www.destinationontario.com/fr-ca">
• ajouter https:// au début des hyperliens absolus
  • au lieu de <a href="www.destinationontario.com/fr-ca">, utiliser plutôt <a href="https://www.destinationontario.com/fr-ca">

À ne pas faire

• utiliser les URLs en tant que texte des liens
  • Plutôt que « Pour obtenir de plus amples renseignements, consultez le site www.ontario.ca/rafeo », utilisez « Pour obtenir de plus amples renseignements, consultez le site sur le RAFEO » (et n’oubliez pas d’inclure une balise d’abréviation!)
• utiliser des formulations génériques comme « Cliquez ici » ou « Renseignements complémentaires ». Cela rend la page moins lisible pour les utilisateurs.

Accessibilité

Les utilisateurs doivent pouvoir :

• utiliser la touche de tabulation pour passer d’un lien à un autre
• suivre un lien en appuyant sur la touche « Entrée »

Signalez aux utilisateurs l’ouverture de nouvelles fenêtres en incluant une notification dans le texte du lien.

Liens vers une ancre

Pour créer un lien vers une autre section de la même page ou vers un endroit particulier d’une autre page, utilisez l’attribut id comme ancre.

À faire et à ne pas faire

À faire

• ajouter un id descriptif à l’élément le plus proche pour créer une nouvelle ancre
• utiliser un id existant, par exemple, le deuxième en-tête de niveau 2 d’une page sera toujours #section-1, car les titres de niveau 2 sont automatiquement attribués une fois publiés, à partir de #section-0

À ne pas faire

• utiliser des balises <a> vides pour les ancres telles que <a id="january" name="january"></a>
• ajouter un attribut id aux en-têtes de niveau 2; utiliser plutôt <span> ou un autre élément existant
• répéter les attributs id sur la même page, car chaque identifiant doit être unique

Liens vers un id et vers une ancre

Les valeurs des attributs id doivent :

• commencer par une lettre
• ne contenir que des lettres non accentuées, des chiffres, des traits d’union ou des caractères de soulignement

Adresse de courriel et numéros de téléphone

Consultez la section Coordonnées.

Ouverture de nouvelles fenêtres

De façon générale, n’utilisez pas target="_blank" pour ouvrir des liens dans une nouvelle fenêtre. Réservez cela à des pages comportant des formulaires dans lesquels les données de l’utilisateur seraient perdues en cas d’ouverture d’un lien dans la même fenêtre.

Autres langues

Consultez la section concernant les liens vers du contenu dans d’autres langues.

Lien vers du contenu dans un format autre que HTML

Liste de liens

Consultez les sections sur les listes de liens et les listes de liens affichées sur une seule ligne.

Liens mis en évidence et appels à l’action

Si un ou plusieurs liens doivent être mis en avant sur une page, vous pouvez leur donner l’apparence d’un bouton.

Liens rompus

Il est important de vérifier régulièrement tous les liens d’une page afin de s’assurer qu’ils fonctionnent toujours. Les liens rompus limitent l’accès à l’information et peuvent provoquer une perte de confiance de l’utilisateur dans notre contenu.

Contenu connexe

Lorsque vous incluez des liens vers du contenu connexe sur une page de renvoi sur toute la largeur, placez les liens à la suite de votre contenu dans le corps du texte, plutôt que dans la barre latérale de liens.

Listes

Les listes constituent une méthode efficace pour organiser des renseignements connexes. Les listes confèrent une structure à votre contenu, ce qui le rend plus accessible et plus facile à comprendre.

Listes non numérotées

Utilisez les listes non numérotées pour regrouper des éléments connexes ne nécessitant pas un ordre spécifique. Le guide de rédaction comporte des indications complémentaires concernant les listes à puces.

Liens

Listes emboîtées

Des <ul> supplémentaires ne peuvent être imbriquées que dans des <li>.

Masquer les puces

Notez que la liste sera affichée sans retrait.

Liste horizontale

Liste de liens horizontale

Listes numérotées

Utilisez les listes numérotées pour regrouper des éléments connexes qui doivent être présentés dans un ordre spécifique. Le guide de rédaction comporte des indications complémentaires concernant les listes numérotées.

Listes emboîtées

Liste alphabétique

Liste numérotée en chiffres romains

Liste interrompue

Liste comportant des parenthèses

Listes à colonnes multiples

Les longues listes comportant de courts éléments peuvent être présentées en colonnes. Utilisez la class columns-x-large pour obtenir de très larges colonnes, ou columns-large, columns-medium, columns-small et columns-x-small pour des colonnes plus étroites. Elles s’ajusteront automatiquement à la taille de l’écran.

Listes de définitions

Utilisez les listes de définitions pour associer des termes et leur signification ou une description.

Nombres

Écrivez les nombres supérieurs à neuf en chiffres plutôt qu’en lettres. Si le nombre se situe au début d’une phrase dans un paragraphe, écrivez-le en toutes lettres. Le guide de rédaction comporte des indications complémentaires concernant les nombres.

Nombres généraux

Employez une espace insécable (une virgule en anglais) pour les nombres à quatre chiffres ou plus, sauf pour les années, les adresses et les devises.

Utilisez « % » (symbole de pourcentage) pour indiquer les pourcentages. N’écrivez pas « pour cent » en toutes lettres, sauf s’il suit un nombre en toutes lettres au début d’une phrase.

Plages de nombres

Utilisez un tiret, et non le trait d’union-caractère moins sur votre clavier.

Nombres ordinaux

Utilisez l’exposant lorsque vous n’écrivez pas les nombres ordinaux en entier.

Chiffres romains

Ne utilisez pas de chiffres romains sauf s’ils sont requis légalement ou s’ils sont employés pour renvoyer à des parties d’autres pages Web ou documents. Employez des balises d’abréviation avec les chiffres romains. Reportez-vous aux sections concernant les abréviations et les listes numérotées en chiffres romains.

Fractions

Pour les fractions courantes comme ½, utilisez les caractères de fraction (en anglais seulement).

N’insérez pas d’espace avant et après la barre oblique de fractions.

N’ajoutez pas de « e » après les fractions écrites en chiffres

Ne utilisez pas de trait d’union pour les âges comportant des fractions.

Âges

Devises

Les sommes d’argent doivent comporter deux chiffres après la virgule (c.-à-d. cents) ou être arrondies au dollar le plus proche (ou millier, million ou milliard de dollars). Le guide de rédaction comporte des indications complémentaires concernant les devises.

Dates et heures

Le guide de rédaction comporte des indications complémentaires concernant les dates et les heure in the style guide.

Reportez-vous aux section concernant heures d’ouverture.

Citations et références

Citations

Il est possible de citer un texte prononcé par une personne ou provenant d’autres sources comme des pages Web et d’autres documents. N’utilisez pas de guillemets. Utilisez <q> pour les citations courtes au sein d’une phrase et <blockquote> pour les citations d’un paragraphe ou plus longues.

Éléments blockquote

L’élément blockquote est utilisé pour indiquer qu’un contenu est une citation tirée d’une source ou d’un orateur. Ceci inclut souvent un attribut cite correspondant à l’URL de la source de la citation ou au nom de l’orateur, afin de fournir un contexte.

Vous ne devez pas mettre des guillemets autour du texte de votre citation — les guillemets sont déjà compris dans le style de l’élément blockquote.

Guillemets

Utilisez des guillemets lorsque vous n’utilisez pas les éléments <q> ou <blockquote>, par exemple pour citer un mot. Utilisez les guillemets français. Les entités HTML sont « pour le guillemet ouvrant et » pour le guillemet fermant.

Notes de bas de page

Les notes de bas de page doivent être utilisées uniquement lorsqu’il y a une raison juridique pour que le site Web représente une publication imprimée avec des notes de bas de page. Si l’information est très importante, ajoutez-la dans le corps du texte à l’endroit qui convient, plutôt que de mettre une note de bas de page.

À faire

• inclure le <onesite-ref number="#">texte de la note de bas de page</onesite-ref> à l’endroit où vous voulez que l’appel de note de bas de page apparaisse
• utiliser des chiffres, des lettres ou des chiffres romains dans l’attribut
• sur une même page, pour réutiliser une note de bas de page, répétez le « numéro » en omettant le texte de la note de bas de page, par exemple <onesite-ref number="#"></onesite-ref>
• utiliser une numérotation continue pour les notes de bas de page tout au long des pages d’un livre, puisqu’elles peuvent être jointes lors de l’impression

À ne pas faire

• ajouter d’espace avant le mot-clé
• répéter le texte de la note de bas de page dans le corps de la page
• redémarrer la numérotation à chaque page du livre

Tableaux

Utilisez les tableaux pour présenter des données au sein d’une grille permettant de comparer facilement des valeurs.

À faire et à ne pas faire

À faire

• utiliser des tableaux pour présenter des renseignements sous cette forme et ainsi pouvoir comparer rapidement des données détaillées et des valeurs précises
• décrire le contenu du tableau à l’aide d’un titre placé au-dessus ou en utilisant une légende (se reporter à la section Légende ou résumé)
• présenter les dates au sein des tableaux selon le format ISO 8601 : AAAA-MM-JJ
• abréger les noms des mois (p. ex., Jan, Fév, Mar) dans les tableaux uniquement, si nécessaire pour gagner de la place
• utiliser la balise <th> pour les cellules d’en-tête et <td> pour les cellules de données (se reporter à la section Structure des tableaux)
• signaler par des balises les abréviations et les sigles ou acronymes utilisés dans des tableaux
• inclure les unités de mesure dans les en-têtes des colonnes ($, cm, kg, etc.)
• employer la casse de phrase pour les en-têtes de tableaux

À ne pas faire

• utiliser des tableaux pour la mise en page
• utiliser des tableaux qui ne comportent que quelques lignes ou quelques colonnes; il est préférable d’utiliser une liste dans ce cas
• laisser des cellules vierges dans l’en-tête d’un tableau
• laisser des cellules de données vierges; utiliser « s.o. » pour « sans objet » avec une balise <abbr> et l’attribut title="sans objet" ou « nul » ou « 0 »
• créer des tableaux complexes dans lesquels des cellules s’étendent sur plusieurs lignes ou plusieurs colonnes
• inclure des en-têtes au sein d’un tableau; il est préférable d’utiliser plusieurs tableaux
• répéter les unités de mesure dans les différentes cellules de données

Structure des tableaux

Tous les tableaux :

• commencent et se terminent par une balise <table>
• ont un en-tête <thead>, qui contient uniquement les renseignements concernant les cellules d’en-tête du tableau, et non les données. L’en-tête contient :
  • une ligne <tr></tr>
  • des cellules d’en-tête (texte en gras) <th></th>
• ont un corps <tbody>, qui contient les données au sein de :
  • lignes <tr></tr>

Accessibilité

À l’aide du balisage HTML adapté, les utilisateurs ayant une déficience visuelle peuvent parcourir et lire vos données cellule par cellule en utilisant leur clavier ainsi qu’une technologie d’assistance telle qu’un lecteur d’écran.

Décrivez les tableaux à l’aide d’un titre, d’une brève description avant ou après le tableau qui présente son contenu, ou encore d’une légende (<caption>).

N’utilisez pas de tableaux complexes nécessitant à la fois des attributs header et id à des fins d’accessibilité. Il est préférable d’utiliser plusieurs tableaux avec l’attribut scope pour garantir l’accessibilité de chaque tableau pour les lecteurs d’écran.

Utilisation de l’attribut scope

Pour les tableaux simples qui n’ont que l’en-tête de lignes ou l’en-tête de colonnes, utilisez les éléments <th> sans l’attribut scope.

Dans les autres cas, tous les éléments <th> doivent comporter l’attribut scope, qui permet aux lecteurs d’écran de détecter les en-têtes de colonnes et les en-têtes de lignes. L’attribut scope indique au navigateur et au lecteur d’écran que les cellules de colonnes avec l’attribut scope="col" sont des en-têtes de colonnes et que les cellules de lignes avec l’attribut scope="row" sont des en-têtes de lignes. Lorsqu’ils parcourent le tableau, les lecteurs d’écran lisent les cellules une par une et localisent les cellules d’en-tête correspondantes.

Légende ou résumé

Les légendes aident les lecteurs à comprendre le contexte d’un tableau. Les légendes peuvent être constituées du titre et/ou d’une description du tableau.

Les résumés aident les lecteurs à comprendre la structure et l’organisation du tableau. L’attribut summary est utilisé dans le cas de tableaux complexes afin de fournir des renseignements indiquant quel contenu se trouve dans quelle colonne ou ligne. Les tableaux d’une telle complexité doivent être évités et peu de lecteurs d’écran lisent l’attribut summary. Il est préférable de les diviser en plusieurs tableaux plus simples.

Exemples

Table avec une légende

Insérez la balise <caption> immédiatement après la balise <table>.

Tableau comportant des en-têtes de lignes et de colonnes

Tous les éléments <th> utilisent l’attribut scope. Les en-têtes de colonnes utilisent scope="col". Les en-têtes de lignes utilisent scope="row".

Tableau comportant des en-têtes de colonnes

Utilisez les éléments <th> sans l’attribut scope.

Tableau sans alternance des couleurs de fond

Par défaut, les lignes des tableaux comportent une alternance entre un fond blanc et un fond clair. Cela aide les utilisateurs à mieux distinguer les valeurs de chaque ligne. Si vous voulez désactiver cette option, associez la classe .no-stripes à l’élément <table>.

Nombres et lignes récapitulatives / de total

Si votre tableau comporte une ou plusieurs colonnes de nombres, utilisez la classe .numeric. Elle permet d’aligner les nombres, ce qui facilite leur comparaison.

Pensez à associer la classe .non-numeric à tous les éléments <td> dans les colonnes ne comportant pas de nombres (et <th> dans le <thead>) afin de supprimer la mise en forme en tant que nombre.

Lignes de sous-total et de total

Optimisez l’accessibilité des tableaux en créant plusieurs tableaux au lieu de combiner plusieurs sous-totaux et totaux dans un même tableau. Cela évite de recourir à des attributs header et id complexes et garantit que le tableau est accessible au plus grand nombre d’utilisateurs possible.

Plusieurs tableaux

Scindez les tableaux complexes en plusieurs tableaux simples.

Si plusieurs tableaux se trouvent sur une même page et comportent les mêmes en-têtes, ils doivent être de la même largeur. Utilisez la classe .full-width pour le tableau et la classe w-# pour les <th>, # étant un pourcentage de la largeur totale du tableau.

Tableaux larges

Utilisez .full-width pour que le tableau soit de la largeur de la page, si un tableau provoque l’apparition de barres de défilement horizontales sur les petits écrans.

Tableaux longs (tableaux de données)

Pour les tableaux comportant plus de 20 lignes, une fonction de tri et/ou de recherche peut être utile aux utilisateurs qui recherchent des renseignements spécifiques dans un tableau.

La Directive sur les données ouvertes de l’Ontario exige que toutes les données du gouvernement, y compris les données figurant dans des tableaux de données, soient publiées dans le Catalogue de données en tant que données ouvertes, sauf si elles font l’objet d’une exemption pour des motifs d’application de la loi, de protection des renseignements personnels, de sécurité, de confidentialité ou de secret commercial. Pour obtenir de plus amples renseignements, consultez le Guide sur les données ouvertes.

Consultez la section sur les tableaux interactifs d’ontario.ca pour en savoir plus (lien interne d’InsideOPS ; en anglais seulement).

Exemple

Typographie

Texte tout en majuscules

Un texte tout en majuscules est considéré comme l’équivalent écrit de s’adresser à l’utilisateur en « criant ».

À faire et à ne pas faire

À faire

• écrire le texte dans la casse qui convient ou en minuscules et utiliser la classe .uppercase pour l’afficher tout en majuscules

À ne pas faire

• utiliser du texte tout en majuscules sauf s’il fait partie du nom d’une marque ou d’un programme (comme Presto), s’il est requis légalement ou s’il s’agit d’une abréviation

Accessibilité

Un texte tout en majuscules affecte la lisibilité pour tous les utilisateurs. Certains logiciels de lecture d’écran lisent le texte tout en majuscules lettre par lettre.

Caractères gras et italiques

Le guide de rédaction vous indique comment mettre du texte en évidence.

Consultez également la section concernant : Lois, règlements et titres d’autres documents tels que le Budget ou l’Énoncé économique de l’automne

À faire et à ne pas faire

À faire

• utiliser <cite> pour les lois, les règlements, les médias tels que les livres ou les films, et les documents tels que le Budget ou l’Énoncé économique de l’automne
• utiliser <strong> pour mettre du texte en gras
• utiliser <i> pour le genre des organismes et les noms scientifiques des espèces
• faites-en un usage modéré : mettre tout en gras revient à ne rien mettre en gras
• mettre en évidence un paragraphe ou une section dans son ensemble à l’aide d’un encadré plutôt que de balises <strong>
• mettre en évidence plusieurs mots ou expressions que vous décrivez à l’aide d’une liste de définitions

À ne pas faire

• utiliser <i> sauf pour le genre des organismes et les noms scientifiques des espèces
• utiliser <em> ou <u>
• utiliser <b> pour mettre en gras
• utiliser <strong> pour les titres; il est préférable d’utiliser les éléments de titre
• utiliser les caractères italiques ou mettre tout en majuscules lorsque le texte est en gras

Accessibilité

<b> est une balise de style. Elle met le texte en gras uniquement visuellement. Les lecteurs d’écran ne l’analysent pas, ce qui rend la mise en évidence inaccessible.

<strong> est une balise sémantique. Elle met le texte en gras visuellement et signale au logiciel d’accessibilité que le texte est mis en évidence; il s’agit donc de l’option garantissant l’accessibilité.

Évitez d’utiliser les caractères italiques car ils sont difficiles à lire pour les personnes présentant une déficience visuelle ou cognitive. Si vous avez besoin de mettre du texte en évidence, utilisez la balise <strong>

Noms scientifiques

Pour le genre des organismes et les noms scientifiques des espèces.

Taille de police

À faire et à ne pas faire

À faire

• changer la taille de police si nécessaire lors de la création d’infographies et de représentations visuelles

À ne pas faire

• changer la taille de police au sein de paragraphes ou de listes
• utiliser ces styles pour des titres, se reporter à la section titres

Titres

Les titres permettent de diviser le contenu en sous-parties, en créant des sections et des sous-sections. Ils vous aident à organiser les sections et les sous-sections. Le guide de rédaction vous indique comment rédiger un titre.

À faire et à ne pas faire

À faire

• employer les titres h2 à h6 (dans l’ordre) pour structurer davantage votre page
  • par exemple, un h3 sous un h2, un h4 sous un h3, et ainsi de suite
• redimensionner les titres du contenu disposé en colonnes sur les pages de renvoi en ajoutant class="h4"

À ne pas faire

• utiliser des éléments h1 dans le corps du texte, cet élément étant réservé au titre de la page
• omettre un niveau de titre
  • par exemple, ne pas placer un h3 sous un h1 sans avoir de h2 entre les deux
• redimensionner les titres dans le corps du contenu

Paragraphes et sauts de ligne

Le guide de rédaction vous indique comment rédiger des paragraphes et des phrases.

Exposant et indice

Utilisés pour certaines formules chimiques. Consultez également les sections Nombres ordinaux et Unités concernant l’utilisation des exposants.