Éléments typographiques

---

Description du chapeau

Un chapeau est un texte d’introduction constitué d’un seul paragraphe. Sauf exception, il est situé immédiatement après le titre de niveau 1. L’utilisation du chapeau est facultative. Au besoin, il peut contenir un lien hypertexte, du gras et de l’italique.

---

---

Exemples de chapeaux dans les pages du site Web

• Chapeau situé directement sous le titre
• Chapeau séparé du titre par un autre élément (exception réservée seulement à certains gabarits de pages)

---

Accessibilité du chapeau

Le chapeau doit être contenu dans des balises <p>, le texte en gras dans des balises <strong> et le texte en italique dans des balises <em>.

---

Description du texte de paragraphe

Le texte de paragraphe est le style de base pour tout le contenu textuel courant du site Web.

---

Ceci est un exemple de paragraphe. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu ceci est un lien hypertexte duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mises forme

Texte en gras

Texte en italique

Texte avec un exposant^sup ou avec un indice_sub.

Abréviation ou acronyme (exemple : CHU), qui, au survol, affiche une infobulle détaillant la signification de cette abréviation ou de cet acronyme.

Texte avec un terme ou une expression (exemple : conjoints) qui possède une définition. Au clic, une fenêtre modale affiche la définition.

---

Accessibilité du paragraphe

Chaque paragraphe doit être contenu dans des balises <p>, le texte en gras dans des balises <strong> et le texte en italique dans des balises <em>.

L’exposant ou l’indice doivent aussi être codés avec les bonnes balises. Exposant : <sup>, indice : <sub>.

Abréviations et acronymes

Pour les abréviations et les acronymes, il est recommandé d’écrire au long la description suivi de l’abréviation ou de l’acronyme entre parenthèses à la première occurrence dans la page. L’abréviation ou l’acronyme peut être directement mise dans la page pour les autres occurrences de la page, par exemple : centre hospitalier universitaire (CHU).

Si ce n’est pas possible, mettre l’abréviation ou l’acronyme dans des balises <abbr> possédant un attribut title contenant la description longue. Prendre note que peu de technologies d’assistance perçoivent les balises <abbr>.

S’il y a beaucoup d’abréviations ou d’acronymes dans une page, il est aussi possible de référer à un glossaire en début de page.

Texte hors écran

Le texte hors écran est un texte invisible pour les utilisateurs voyants, mais perceptible pour les utilisateurs de technologies d’assistance. Il permet d’ajouter des spécifications à un libellé existant, de donner des instructions et de mettre un texte de remplacement sur une image informative ajoutée en CSS.

La classe CSS doit comporter ces propriétés pour que cela fonctionne :

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: no-wrap;
  border: 0;
 } 

Actuellement, la classe CSS qui contient les propriétés CSS pour le texte hors écran est sr-only.