Hello, solution imparfaite à base de titre masqué à utiliser en dernier recours : <div role="heading" aria-level="2" class="sr-only">[titre d’article 1]</div> <p>[date 1]</p> <p>[catégories 1]</p> <h2 aria-hidden="true" role="presentation">[titre d’article 1]</h2>
Aurélien Le 23 novembre 2017 à 16:35, Alex Bernier <[email protected]> a écrit : > 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 >
_______________________________________________ liste_gta mailing list [email protected] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
