Une structure de code comme celle-ci devrait marcher :
<article>
<header>
<p>[date 1]</p>
<p>[catégories 1]</p>
<h2>[titre d’article 1]</h2>
</header>
<p>[le contenu de l’article 1]</p>
</article>
<article> est un élément sectionnant, donc si le lecteur d'écran fait son job,
pas d'ambiguïté entre le contenu de deux "<article>" différents...
Alex
On Thu, Nov 23, 2017 at 04:06:03PM +0100, Olivier Nourry wrote:
> 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
