Vous êtes dans la zone de contenu principal de la page

Design, ordre de focus 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, notamment pour la navigation au clavier.

L'idée est de respecter le critère d'accessibilité WCAG 2.4.3 Focus Order, sans manipuler l'ordre via une feuille de styles avec les risques que cela comporte (lire l'article Les grilles CSS et l'accessibilité sur MDN).

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.

Démonstration

Les 4 blocs suivants se déplacent selon le viewport (tester en affichant la console et la vue adaptative).

Par défaut, l'ordre initial est celui correspondant à la vue mobile puisque les robots Goggle ont basculé l'indexation en mobile first. Plus d'information sur Google Search Central .

En utilisant le clavier pour naviguer (touche touche de tablulation clavier ), l'ordre d'affichage respecte l'ordre de tabulation.

La partie code HTML

Appel de fonction

Et enfin la fonction…

Utilisation des sources
Les sources de « Design, ordre de focus 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
2021-04-13