TP5 – Intégrer un tableau accessible

Contexte

Vous devez publier une page contenant un planning de formation sur votre site ou intranet. Ce planning, présenté sous forme de tableau avec des cellules fusionnées, semble lisible visuellement mais devient difficile, voire impossible à comprendre pour un utilisateur de lecteur d’écran.
L’enjeu est d’analyser ce tableau, d’identifier ses problèmes d’accessibilité, puis de le restructurer dans votre CMS de façon claire et accessible pour tous.

Objectif

Critiquer un tableau complexe comportant des cellules fusionnées, puis le recréer dans le CMS sous une forme simple, correctement structurée et exploitable par un lecteur d’écran.

Ce qu’on évalue

  • Le tableau est créé via l’outil tableau du CMS,
  • Les cellules d’en-tête sont déclarées comme telles dans les options du CMS
  • Un titre est associé au tableau pour en indiquer le sujet
  • Le tableau ne contient pas de cellules fusionnées inutiles qui complexifient la lecture

Matériel fourni

Agenda du séminaire

Consignes

Partie 1 – Critiquer le tableau

Observez le tableau fourni et identifiez les problèmes d’accessibilité liés à sa structure.

Partie 2 – Présenter une version accessible dans le CMS

À partir de votre analyse, recréez ce tableau dans le CMS de façon accessible. Vous veillerez à respecter les bonnes pratiques d’accessibilité.

Pour aller plus loin

Activez la vue « code source » de votre éditeur et observez le HTML généré :

  • Repérez les balises <th> utilisées pour les en-têtes et <td> pour les données
  • Vérifiez la présence de l’attribut scope (scope="col" pour les colonnes, scope="row" pour les lignes)
  • Comparez le HTML obtenu avec ce qu’aurait généré le tableau fusionné d’origine

Si certaines bonnes pratiques ne sont pas respectées automatiquement par le CMS, identifiez-les comme des limites de l’outil à remonter à votre équipe technique.


Corrigé – Intégrer un tableau accessible