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 <aurelien.l...@gmail.com> 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 <alex.bern...@braillenet.org > <mailto:alex.bern...@braillenet.org>> 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 > > liste_gta@list.accessiweb.org <mailto:liste_gta@list.accessiweb.org> > > http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org > > <http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org> > > > _______________________________________________ > liste_gta mailing list > liste_gta@list.accessiweb.org <mailto:liste_gta@list.accessiweb.org> > http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org > <http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org> > > _______________________________________________ > liste_gta mailing list > liste_gta@list.accessiweb.org > http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
_______________________________________________ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
