Tableau accessible

Schéma d’un tableau accessible
Faire un tableau accessible avec reMARKable
Insérer un tableau accessible
Tableau de mise en forme : à éviter
Comment Orca lit un tableau

Un tableau de données contient des informations organisées en deux dimensions (colonnes et lignes).

• Si le tableau possède un titre, celui-ci sera aussi restitué par les technologies d’assistance.
• Un tableau de données doit être équipé d’en-têtes de colonne et/ou d’en-têtes de ligne.

Les tableaux de données ont un fort impact sur la navigation des personnes aveugles ou très malvoyantes qui utilisent des lecteurs d’écran et des loupes vocalisées. Voyons donc comment faire.

Des explications sur les tableaux, avec des exemples de code

Un tableau "reMARKable"

Fare un tableau accessible, c’est pas évident, on se perd entre les th, tr, td et autres row. Heureusement il y a un moyen ultra-simple de faire un tableau basique. Il suffit d’utiliser le :logiciel reMARKable qu’on peut télécharger sur Github.

Remarkable est un éditeur de markdown exceptionnel pour les utilisateurs de Linux mais aussi de Windows, qui apprécient la simplicité. Et il est accessible via lecteur d’écran.

Vous souhaitez faire un tableau ?

• Lancez le logiciel "reMARKable"
• Faites : CTRL + MAJ + T ce qui ouvre une fenêtre. Le focus se trouve sur une première zone de saisie où on tape le nombre de lignes - la zone suivante permet d’indiquer le nombre de colonnes. Le denier bouton permet de valider.

  

• Sur l’écran, on voit alors une série de barres verticales sur plusieurs lignes.

  

  • sur la première ligne, on met les titres des colonnes,
  • sur la deuxième ligne : rien,
  • sur les autres lignes on complète le tableau.

Le logiciel réalise tout seul le codage nécessaire. En faisant : File/Export HTML (styled) on peut créer le fichier tableau.html. Et si on ouvre le fichier tableau.html avec un éditeur de texte, on peut récupérer ce code.

Le schéma d’un tableau de données

Pour un rédacteur "ordinaire", une secrétaire dans une mairie par exemple, le code html est incompréhensible. Essayons de le présenter clairement.

Dans le schéma suivant, remarquer le style et le tableau lui-même.
Dans le tableau, remarquer : le titre du tableau, le titre des colonnes, et les lignes du tableau.

Consulter le schéma d’un tableau de données, nouvelle fenêtre Vous pouvez copier-coller ce code pour votre utilisation.

Faire un tableau accessible

1. recopier tout le code figurant dans le schéma ci-dessus.
2. ouvrir un éditeur de texte, par exemple Mousepad
3. copier le code,
4. ajuster le titre du tableau, le titre des colonnes, et le contenu des lignes.
5. quand ceci est fait, enregistrer le document sous le nom : tableau.txt - et sous le nom : tableau.html.
6. en ouvrant tableau.html avec Firefox, vous pouvez vérifier que votre tableau est correct.

Insérer un tableau accessible

Vous avez fait un beau document, par exemple sur le règlement de la cantine, et vous voulez insérer le tarif de la cantine.

1. préparez votre tableau tarif.txt comme ci-dessus,
2. préparez votre document et, là où vous voulez insérer le tableau, écrivez :

   tarif.txt

3. enregistrez votre document sous le nom : réglement-cantine.html,
4. revenez sur règlement-cantine.html et ouvrez ce document avec un éditeur de texte,
5. à la place de tarif.txt, mettez le code que vous avez fabriqué ci-dessus dans tarif.txt.
6. ré-enregistrez le tout sous le nom : réglement-cantine.html,
7. vérifiez que tout va bien !

Tableau de mise en forme : à éviter

il est recommandé de ne pas faire de tableau pour la mise en page. Mais si vous voulez en faire, suivez bien les consignes.

Utiliser un tableau de mise en forme pour intégrer du contenu HTML peut ne pas poser de problème pour l’accessibilité, si l’on pense bien à utiliser la propriété ARIA role="presentation".

Les personnes aveugles et très malvoyantes qui utilisent un lecteur d’écran parcourent le contenu du tableau de manière séquentielle. Elles ont donc besoin que l’information ne repose pas sur la position visuelle des éléments, mais qu’elle suive un ordre logique dans le code source.

Il faut donc prêter attention à l’ordre de lecture des tableaux par les lecteurs d’écran, qui correspond à l’ordre du code source. On parle alors de « contenu linéarisé ». Supprimer toutes les balises et attributs relatifs aux tableaux de données : balises caption, th, thead, propriétés ARIA role="rowheader", role="columnheader" et attributs scope, headers etc. Voir des explications sur ces tableaux de mise en forme

Laurent Papillon explique très bien les choses, article sur Linkedin.. Il écrit :

Si vous devez absolument utiliser un tableau pour la mise en page, gardez-le aussi simple que possible.

Consulter le schéma d’un tableau de mise en forme, nouvelle fenêtre

L’attribut ’role="presentation"’ indique explicitement aux technologies d’assistance que ce tableau est purement décoratif et qu’il ne faut pas en interpréter la sémantique.
On n’utilise que les balises table, tr, td.

Mais la meilleure pratique reste : pas de tableaux pour la mise en page.

Pourquoi cette règle est fondamentale ?

• Clarté : Évite que les lecteurs d’écran n’annoncent une structure de données complexe là où il n’y en a pas.
• Robustesse : Assure que votre mise en page ne sera pas mal interprétée par les outils d’assistance.
• Bonnes pratiques : Sépare clairement la structure (HTML) de la présentation (CSS).