Bonjour, La solution d'Alex me paraît le plus adapté, pourquoi faire compliqué. Le contexte (article) permet de lier les éléments entre eux.
Le 24 nov. 2017 10:05 AM, "Olivier Nourry" <[email protected]> a écrit : > Bonjour, > > Merci Frédéric, Alex et Aurélien pour vos suggestions. > > > Bonne journée, > Olivier Nourry > > > Le 24 nov. 2017 à 09:52, Aurelien Levy <[email protected]> a écrit : > > 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 > > > > _______________________________________________ > 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
