Du coup l'ajout dans une liste ne réglerait-il pas le problème ?
-- Steven Mouret Le 24 novembre 2017 à 11:25, Aurélien LEVY <[email protected]> a écrit : > en theorie oui dans la pratique à ma connaissance cela ne fonctionne pas > dans les lecteurs d'écran > > ------------------------------ > *De: *"Steven Mouret" <[email protected]> > *À: *"liste gta" <[email protected]> > *Envoyé: *Vendredi 24 Novembre 2017 11:10:55 > *Objet: *Re: [Liste GTA]titres d'articles et méta-données associées - des > suggestions? > > 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 > > _______________________________________________ > 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
