Design, flux et accessibilité

Objectif

Afficher un bloc (image, texte, etc…) à différents endroits au sein d'une page selon le viewport sans dupliquer n fois le contenu et conserver le flux « logique » de navigation.

Démo

Bloc image responsive en promenade dans la page
Ce bloc est constitué d'une image et de paragraphes, liste, …
Il arrive souvent que la conception graphique (ou DA) ne prenne pas en compte le flux « logique » du code et déplace des blocs au sein d'une page web, selon que l'on soit sur un terminal mobile, tablette ou desktop.

Les principaux inconvénients sont :
  • duplication de code pour afficher/masquer un ou des blocs selon le viewport
  • duplication d'identifiants (souvent) sur une même page
  • perte de la navigation « logique » au clavier (problème d'accessibilité)
  • impact sur le référencement naturel (ou SEO)
  • il doit y en avoir d'autres…

Pour forcer le trait, le choix a été fait d'intercaler graphiquement l'image de ce bloc à divers endroits et d'associer une balise picture et différentes sources chargées différemment selon les viewports.
Pour appliquer : réduire et agrandir la fenêtre de votre navigateur. L'image principale va se promener un peut partout dans la page. Attention, ça va bouger…
Mise en oeuvre sur une page « photo » également ici.

La partie code

Le bloc à déplacer dans le flux sans jamais le dupliquer.

Appel de fonction

Balisage des blocs qui reçoivent le contenu « déplacé » dans le flux. La gestion visible/invisible est gérée par une classique feuille de styles (flex ou autre).
Les blocs porteurs doivent avoir un attribut égal (par défaut data-responsive). De cette manière, il est possible de gérer plusieurs contenus au sein de la même page.
Au moins 1 de ces éléments doit contenir le markup à déplacer.

Et enfin la fonction…
Utilisation des sources
Les sources de « Design, flux et accessibilité » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec
Droits réservés 2006-2021 Kortic - Anthony Ladeuil Dépôt ISSN 2610-1297
2021-01-22