Guide sur l'Accessibilité dans Edge Animate
Profitez des fonctionnalités d'Edge Animate pour implémenter des règles d'accessibilité, améliorant ainsi l'expérience utilisateur.
Présentation
Découverte de Edge Animate
Importer les éléments graphiques
Utiliser la typographie
Placer et aligner les objets
Gérer une interface fluide (responsive design)
Structurer un projet dans le scénario
Exporter le projet
Les filtres
Les rotations
L’échelle, fixe et en pourcentage
Les masques
Les torsions d’objets
Les accélérations
Les dimensions extensibles de la scène avec fond transparent
Les trajectoires
Le lip sync (mouvement de bouche synchronisé)
Le spritesheet (animation sous forme de pellicule)
Placer un contenu alternatif pour anciens navigateurs
Introduction à l’interactivité
Cibler un objet sur la scène
Importer un style CSS
Appeler un URL
Afficher/Masquer les objets
Gérer les variables et les textes dynamiques
Piloter le scénario au clic et à l’aide de conditions
Piloter le scénario à l’aide de commandes de clavier
Gérer l’affichage selon l’orientation des écrans mobiles
Animer un effet parallaxe à l’aide du pointeur en mouvement
Animer un effet parallaxe à l’aide du scroll (défilement de l’ascenseur)
Insérer une vidéo
Réaliser un chapitrage vidéo
Synchroniser les images d’une vidéo sur un effet parallaxe
Intégrer de l’audio
Personnaliser le curseur de la souris
Insérer un iFrame
Personnaliser le chargeur (preloader)
Introduction aux classes HTML5 de GreenSock (2D et 3D)
Introduction aux librairies JQuery Edge Commons
Conclusion
Introduction
Mise en forme
Animation
Interactivité
Annexe
Détails de la leçon
Description de la leçon
Cette leçon vous guide à travers les différentes options d'accessibilité disponibles dans Edge Animate. Elle commence par expliquer comment ajouter des titres descriptifs aux éléments graphiques et typographiques via l'onglet accessibilité de la fenêtre propriété. Ensuite, l'importance de l'index de tabulation est discutée, soutenant l'accès au contenu par clavier. Pour le texte, il est fortement recommandé d'intégrer des balises sémantiques comme <H1>, <H2>, <p>, entre autres, pour structurer le contenu de manière logique.
De plus, lors de la publication pour le web, il est crucial de choisir l'option d'export HTML statique afin de garantir que le texte soit bien présent dans le corps de la page HTML. Cela joue un rôle clé dans l'amélioration de l'accessibilité et le référencement de votre contenu. En suivant ces étapes, vous vous assurez que votre contenu est non seulement plus accessible, mais aussi mieux référencé.
Objectifs de cette leçon
Les objectifs de cette vidéo sont de montrer comment :
- Ajouter des titres descriptifs pour les éléments graphiques et typographiques
- Utiliser l'index de tabulation pour la navigation au clavier
- Mettre en place des balises sémantiques pour structurer le texte
- Publier en HTML statique pour améliorer l'accessibilité
Prérequis pour cette leçon
Pour tirer le meilleur parti de cette leçon, une connaissance de base en HTML et en animation avec Edge Animate est souhaitable.
Métiers concernés
Les connaissances acquises dans cette vidéo sont particulièrement utiles pour les métiers de développeur web, concepteur UX/UI, et spécialistes en accessibilité numérique.
Alternatives et ressources
Vous pouvez également utiliser d'autres éditeurs HTML/CSS qui offrent des fonctionnalités d'accessibilité similaires, comme Adobe Dreamweaver ou des solutions open source telles que Brackets.
Questions & Réponses