Hello Olivier, De notre côté nous préconisons ta 2ème solution (Positionner les méta après le heading dans le code, et les repositionner au-dessus en CSS). ça permet de répondre aux besoins de tous (accessibilité et esthétique) nous ne rencontrons pas vraiment de problèmes d'implémentation.
Bonne journée. Frédéric. Le 23 novembre 2017 à 16:06, Olivier Nourry <[email protected]> a écrit : > Bonjour, > > Je rencontre souvent ce genre de structures sur des sites de contenus: > > [une date] > [une ou plusieurs catégories] > [un titre d’article] > [le contenu de l’article] > > répété plusieurs fois dans la page. Ce qui donne: > > [date 1] > [catégories 1] > [titre d’article 1] > [le contenu de l’article 1] > > [date 2] > [catégories 2] > [titre d’article 2] > [le contenu de l’article 2] > > etc. > Bien sûr, les [Titre n] sont des éléments H2, ou H3, etc. > > Le problème avec cette structure, c’est de signifier que « Titre 1 » est > le titre associé aux méta-données « date 1 » et « catégories 1 », et non de > « date 2 » et « catégories 2 » qui viennent juste après. > Je me bats toujours avec cette situation, en incitant à remettre les méta > sous le titre, visuellement, ce qui facilitera la structuration, mais > j’obtiens rarement gain de cause. > J’ai cherché sur différents sites de référence, espérant trouver une > intégration intelligente de cette contrainte, mais ils positionnent tous > les méta *après *les titres. > Les 2 solutions que je propose généralement: > > - soit intégrer la méta dans le heading (mais ça n’est réellement > faisable que si on n’a juste qu’une date par exemple) > - soit positionner les méta après le heading dans le code, et les > repositionner au-dessus en CSS. Sauf que c’est pas toujours évident à > réaliser, notamment pour garder ça propre à tous les niveaux de zoom et > pour toutes les largeurs de fenêtres > > > J’ai déjà vu également des implémentations où le bloc « méta + titre + > corps d’article » est labellisé (via aria-labelledby) par le titre à > l’intérieur. Mais ça ne me paraît pas efficace pour résoudre le problème. > > D’autres propositions? > > > _______________________________________________ > liste_gta mailing list > [email protected] > http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org > >
_______________________________________________ liste_gta mailing list [email protected] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
