Project

General

Profile

Anomalie #4652

[RGAA/HTM5] summary est déprécié en HTML5 (pour les tableaux)

Added by RealET 🔸 3 months ago. Updated 3 months ago.

Status:
Fermé
Priority:
Bas
Assignee:
-
Target version:
Start date:
02/09/2021
Due date:
% Done:

0%

Resolution:
fixed
Navigateur:

Description

Bonjour,

SPIP gère caption et summary pour les tableaux, ce qui était très bien pour l'accessibilité... en HTML4.
Mais summary est déprécié en HTML5 : https://developer.mozilla.org/fr/docs/Web/HTML/Element/table#attr-summary

Et point de vue RGAA, si la page est HTML5 et qu'il y a l'attribut summary sur un tableau, c'est un motif d'invalidation du critère d'accessibilité concerné.

Je n'ai pas trouvé de design pattern officiel pour la présentation d'un tableau avec son titre (caption) et une description (ancien summary, utile entre autres pour les aveugles).
J'ai fait des essais pour en proposer un : https://codepen.io/jpyrat/pen/LYZwWYR?editors=1100 (j'ai posé la question sur la liste RGAA, mais pas encore eu de réponse).

Donc, peut-être que dans un premier temps, on pourrait se contenter de ne pas générer le html summary si HTML5 activé ?

0001-Validit-HTML5-pour-le-summary-d-un-tableau.patch View (1.43 KB) RealET 🔸, 02/18/2021 05:53 PM

History

#1 Updated by cedric - 3 months ago

Non on va pas "supprimer du contenu", ça me semble aberrant.
Le markup <caption>Mon caption<details>Mon summary</details></caption> semble un fallback acceptable, mais dans le doute on peut aussi ne toucher à rien.

On est pas obligé d'utiliser le raccourci typo summary si on en veut pas hein...

#2 Updated by RealET 🔸 3 months ago

On n'est pas obligé, certes, mais en principe, on l'était du temps de HTML4. Et en passant un site en HTML5, on peut se retrouver avec des tableaux SPIP remplis avec le caption et le summary (surtout si on utilise les enluminures typo qui ont un éditeur de tableaux avec ce champ).

Voici le lien vers la doc officielle du WAI : https://www.w3.org/WAI/tutorials/tables/caption-summary/

Et le code le plus simple qu'ils proposent :

<caption>Availability of holiday accommodation <br />
  <span>Column one has the location and size of accommodation, other columns show the type and number of properties available</span>
</caption>

Le summary étant mis dans un <br /><span> le summary </span>

#3 Updated by RealET 🔸 3 months ago

Et voici le patch (version avec details ; si c'était un span, je suggère de lui mettre la classe summary)

#4 Updated by b b 3 months ago

surtout si on utilise les enluminures typo qui ont un éditeur de tableaux avec ce champ

Tout est dit... pas de rapport avec le core non ?

#5 Updated by RastaPopoulos ♥ 3 months ago

euh comment ça pas de rapport avec le core ? tout est bien expliqué plus haut pourtant : si si c'est bien le core qui propose ça, et les sites dans la nature l'utilisent, et donc une fois passé en HTML5, ces sites vont pas revoir leur N quantité d'articles qui ont des tableaux pour retirer le summary : c'est bien à SPIP de générer un truc à jour avec les recommandations du moment non ? Le plugin enluminure c'est juste qu'il ajoute une interface et donc les gens remplissent mieux les infos d'accessibilité, vu que de base SPIP n'a rien pour ça et personne ou presque ne se souvient de tête des subtilités (c'est un des gros points noirs des syntaxes légères : pour les trucs simples, gras, titres, on s'en souvient, mais dès qu'il s'agit de trucs plus complexes…)

#6 Updated by cedric - 3 months ago

  • Status changed from Nouveau to En cours

ah mais attends, je viens de réaliser que summary était un attribut de la table, pas une balise.
D'abord ton patch est pas bon car si il y a pas de caption on perd le summary.

Mais du coup il me semble que la meilleure approche c'est d'utiliser un span avec la class .summary et .offscreen et un id + un aria-describedby sur la balise table. Du coup on retrouve un rendu et un comportement équivalent à ce qu'on avait jusque là.

#7 Updated by cedric - 3 months ago

#8 Updated by RealET 🔸 3 months ago

Bonjour Cédric,

C'est super !
Il faudrait juste un <br /> avant le <span> et ce sera parfait.

Un grand merci à toi.

#9 Updated by cedric - 3 months ago

  • Status changed from En cours to Fermé
  • Resolution set to fixed

Also available in: Atom PDF