Éditeur Studio : Réorganiser des éléments par ordre du DOM
Temps de lecture : 4 min
Vous pouvez réorganiser et réorganiser les éléments d'un site de l'Éditeur Studio grâce à son ordre du DOM. Cela peut améliorer l’accessibilité du site, car cela permet aux visiteurs utilisant des technologies d’assistance (telles que les lecteurs d’écran, etc.) de naviguer dans le contenu du site dans son ordre d’affichage.
Dans cet article, découvrez :
Bon à savoir :
L'organisation des éléments par ordre du DOM est particulièrement importante lorsque vous utilisez des outils de mise en page complexes sur un site, tels que les piles et les flexboxes.
L'importance de l'ordre du DOM
Certains visiteurs du site peuvent utiliser des technologies d'assistance pour naviguer sur les sites, tels que les lecteurs d'écran et/ou la touche Tab. L'ordre du DOM du site détermine l'ordre de « lecture » de ces technologies.
Un ordre logique du DOM est donc important, car il garantit que tous les visiteurs peuvent naviguer sur le contenu du site. Par exemple, le menu du site doit venir en premier, suivi du reste des éléments de l'en-tête, puis du titre de la page, puis du contenu de la page, etc.
Vous souhaitez vérifier l'ordre du DOM d'un site ?
Vous pouvez tester l'ordre automatique du DOM d'un site en utilisant la touche Tab de votre clavier ou un lecteur d'écran sur la version en ligne du site.
Réorganiser automatiquement l'ordre du DOM
Vous pouvez réorganiser automatiquement l'ordre DOM des éléments dans une section, une flexbox ou une pile, ou sur une page entière. L'ordre est optimisé pour correspondre à l'ordre visuel des éléments (de gauche à droite et de haut en bas).
Suggestion :
La réorganisation de l'ordre du DOM d'une page garantit qu'elle est optimisée et peut améliorer les problèmes de mise en page.
D'une page :
- Cliquez sur Pages
à gauche de l'éditeur. - Sélectionnez la page concernée.
- Cliquez sur l'icône Plus d'actions
. - Cliquez sur Réorganiser l'ordre du DOM.
D'éléments :
- Cliquez sur Calques
à gauche de l'éditeur. - Sélectionnez la section, la flexbox ou la pile correspondante.
- Cliquez sur l'icône Plus d'actions .
- Cliquez sur Réorganiser l'ordre du DOM.
Modifier manuellement l'ordre du DOM
L'ordre du DOM du site doit être optimisé. Cependant, si vous avez remarqué un problème dans l'ordre du DOM d'un site sur lequel vous travaillez, vous pouvez le modifier manuellement pour qu'il corresponde à l'ordre visuel des éléments (de gauche à droite et de haut en bas).
Pour modifier l'ordre du DOM manuellement :
- Cliquez sur Calques à gauche de l'éditeur.
- Choisissez ce que vous souhaitez organiser :
- Éléments à l'intérieur d'une section :
- Sélectionnez une section pour l'ouvrir.
- Faites glisser et déposez les éléments dans la position correcte.
- Sections :
- Survolez la section supérieure et cliquez sur l'icône Plus d'actions .
- Cliquez sur Organiser.
- Cliquez sur Mettre au premier plan.
- Répétez les étapes i à iii avec toutes les autres sections, en allant de haut en bas dans le panneau.
- Survolez la section supérieure et cliquez sur l'icône Plus d'actions
- Éléments à l'intérieur d'une section :
Cela vous a-t-il aidé ?
|