Clarifier la structure de titres de la page de démarche (en mode connecté)

[lucaa]

Suite à une discussion sur le design sur figma, on se retrouve à réfléchir à la structure des titres de la page de démarche, en mode connecté (mais il faut voir aussi la compatibilité avec le mode invité).

La situation courante et la suivante:

• mode connecté - le nom de la démarche est h1 dans tous les cas, et ensuite, par onglet:
  • onglet "Informations": aucun titre autre que le titre h1 de la page, le nom de la démarche
  • onglet "code du bouton": les 2 textes "bouton bleu" et "bouton blanc" sont des titres de niveau 2
  • onglet "liste des avis": le nom de la section "exporter les avis" est un titre de niveau 2
  • onglet "synthèse": structure plus complexe, qui se retrouve dans l'affichage de la page de la démarche pour le mode non-connecté (cet onglet est le seul affiché pour les utilisateurs non-connectés): "historique des avis" et "détails des avis" sont des titres de niveau2 et tous les titres sous ces 2 sections sont des titres de niveau 3:
• mode non-connecté
  • le seul onglet visible est celui de la synthèse des avis, les titres sont ceux de cet onglet, décrits ci-dessous.

Dans les nouveaux designs sur figma, quelques textes ont été stylisé comme des titres ou ont changé de niveau:

• sur l'onglet "code du bouton", les 2 titres sont des h4 https://www.figma.com/file/kG2znZqEzySDPUxiWbrEme/JDMA?node-id=523%3A49247 ;
• sur l'onglet "Informations", les étiquettes de chaque méta-donnée de la démarche sont des h6 https://www.figma.com/file/kG2znZqEzySDPUxiWbrEme/JDMA?node-id=328%3A46750 ;

Suite aux discussions, les questions suivantes se posent:

• faut-il avoir des titres h2 au niveau des onglets de la page, pour marquer les différentes sections?
• décider sur la nécessité des titres au niveau des noms des méta-données individuelles dans l'onglet Informations
• re-valider toute la structure des titres pour s'assurer qu'elle est sémantique et conforme aux critères RGAA

[lucaa]

faut-il avoir des titres h2 au niveau des onglets de la page, pour marquer les différentes sections?

vu avec @ugodtn : Non, si les onglet sont accessibles - nouveau ticket créé dans #1149

décider sur la nécessité des titres au niveau des noms des méta-données individuelles dans l'onglet Informations

non, on n'a pas besoin de headings ici, l'objectif de la maquette était juste d'utiliser le style visuel du h6.

Par contre, il faudrait ajouter des titres au niveau des sections de l'accordéon (h2).

re-valider toute la structure des titres pour s'assurer qu'elle est sémantique et conforme aux critères RGAA

rien à changer par rapport à aujourd'hui (sauf remarques ci-dessus), les niveaux des titres conviennent.

[clemdee]

@lucaa du coup on est d'accord que le seul travail restant à faire dans cette tâche est d'appliquer le style de titres pour certains éléments ?

Par contre, il faudrait ajouter des titres au niveau des sections de l'accordéon (h2).

Je n'ai pas très bien compris, le but est de remplacer le titre des accordeons par des titres h2, de donner le style h2 au titre des accordeons, ou bien de rajouter un titre à l'intérieur du contenu des accordeons ? Je ne trouve aucun h2 au niveau des accordéons en regardant les maquettes

[lucaa]

@ClemDee il reste 2 choses:

• la mise en place des styles pour les méta-données de la page de la démarche qui ressemble à des titres (h6)
• la mise en place du markup de h2 au niveau des sections de l'accordeon
  • l'objectif ici est d'avoir du markup h2 au niveau des noms des sections de l'accordéon mais sans que ça soit affiché comme un accordéon (ce qui explique pourquoi tu ne pourras pas les voir sur les maquettes). D'après @ugodtn, l'accordéon DSFR fonctionne correctement avec des h pour les titres des sections, le visuel n'est pas impacté. Il faudrait voir si on peut avoir pareil pour l'accordeon bootstrap re-style qu'on utilise, sinon il faudra ajouter les règles nécessaires.

[lucaa]

Lors de l'implémentation des styles h6 des étiquettes des méta-données j'ai décidé d'inclure les styles de la page de la démarche pour le formulaire d'ajout de nouvelle démarche aussi, pour avoir une vue homogène des éléments similaires.

Par contre, selon les maquettes de figma, il semble que cet affichage parfaitement homogène n'est pas vraiment l'intention, il faudrait clarifier le besoin exacte dans un ticket séparé...

[lucaa]

Fait: styles h6 et tittres de niveau 2 pour les titres des éléments de l'accordéon.