Carie Fisher
Les graphiques vectoriels évolutifs (SVG) sont devenus une norme ouverte W3C en 1999 — à l'époque où la technologie à la mode était le téléphone Blackberry, Napster envahissait pour la première fois les dortoirs universitaires, et le bug de l'an 2000 suscitait la peur chez nous tous. Avançons jusqu'à notre monde numérique moderne et vous remarquerez que, tandis que les autres tendances technologiques ont diminué, les SVG sont toujours présents et prospèrent. Cela est en partie dû au fait que les SVG ont une empreinte légère pour une telle fidélité visuelle, dans un monde où la bande passante et la performance comptent plus que jamais — surtout sur les appareils mobiles et dans des situations/emplacements où les données sont précieuses. Mais aussi parce que les SVG sont si flexibles avec leurs styles intégrés, leur interactivité et leurs options d'animation. Ce que nous pouvons faire avec les SVG aujourd'hui va bien au-delà des formes de base d'autrefois.
Si nous nous concentrons sur l'aspect accessibilité des SVG, nous avons également fait beaucoup de progrès. Aujourd'hui, nous disposons de nombreux modèles et techniques robustes pour nous aider à optimiser l'inclusivité. Cela est vrai que vous créiez des icônes, des images simples ou des images plus complexes. Bien que le modèle spécifique que vous décidiez d'utiliser puisse varier en fonction de votre situation particulière et du niveau de conformité WCAG ciblé — la réalité est que la plupart des gens s'arrêtent là, se concentrant sur la conformité du code et non sur les utilisateurs finaux et leurs besoins. Si la véritable inclusivité va au-delà des motifs — quels autres facteurs devrions-nous considérer lors de la conception et du développement de SVG accessibles ?
Rejoignez-moi pour en savoir plus sur :
Couleur SVG + Contraste
Directives/outils de ratio de contraste de couleur WCAG
Simulateurs/filtres de daltonisme
Media query : @prefers-color-scheme - qu'est-ce que c'est et comment l'utiliser ?
Animation SVG
Directives de mouvement WCAG pour les animations
Options de pause/arrêt/cacher l'animation
Media query : @prefers-reduced-motion - qu'est-ce que c'est et comment l'utiliser ?