TP2 – Mettre en forme le texte avec la bonne sémantique

Contexte

Vous intégrez un article dans votre CMS. Le texte vous est fourni dans un fichier Word avec une mise en page visuelle (gras, texte en gros, retours à la ligne) mais sans structure sémantique. Il faut l’intégrer correctement pour qu’un lecteur d’écran puisse naviguer dans la page et que la hiérarchie soit lisible par tous.

Objectif

Intégrer un texte dans un éditeur web en utilisant les bons niveaux de titres, les listes et le balisage de citation, sans se fier à l’apparence visuelle.

Ce qu’on évalue

  • La hiérarchie des titres est respectée (H1 > H2 > H3, pas de saut de niveau)
  • Les listes à puces ou numérotées sont utilisées là où le texte l’impose
  • La citation est balisée comme telle (balise blockquote ou équivalent dans le CMS)
  • L’alignement du texte est justifié à gauche (pas de texte justifié des deux côtés)
  • Aucune mise en forme n’est réalisée uniquement avec du gras ou de la taille de police à la place d’un titre

Matériel fourni

Consignes

  • Ouvrez le fichier Word et lisez le texte sans chercher à le copier-coller directement.
  • Identifiez : les titres et sous-titres, les énumérations, la ou les citations, les paragraphes de corps de texte.
  • Dans votre CMS (ou l’éditeur mis à disposition), intégrez le texte en appliquant les styles sémantiques appropriés.
  • Vérifiez que vous n’avez utilisé ni couleur, ni taille de police, ni gras seul pour simuler un titre.
  • Activez si possible la vue « code source » de votre éditeur et vérifiez que les balises HTML correspondent bien à ce que vous attendez (<h2>, <ul>, <blockquote>…).

Pour aller plus loin

Naviguez dans votre page uniquement avec la touche Tab et les touches de navigation du lecteur d’écran NVDA ou VoiceOver (Pour mac). La structure est-elle compréhensible à l’oreille ?


Corrigé