L’inclusivité au-delà des modèles – Smashing Magazine


A propos de l’auteur

Carie Fisher est une développeur et formatrice d’accessibilité numérique passionnée par le code frontal inclusif et la promotion de la diversité dans les technologies.
Plus à propos
Carie

Nous avons la chance de pouvoir choisir parmi des modèles robustes lors de l’optimisation de l’accessibilité dans les SVG – mais la plupart des gens s’arrêtent là, se concentrant sur la conformité au code et non sur les utilisateurs réels et leurs besoins. Si la véritable inclusion dépasse les modèles – quels autres facteurs devrions-nous prendre en compte lors de la conception et du développement de SVG accessibles?

Les graphiques vectoriels évolutifs (SVG) sont devenus Norme ouverte W3C en 1999 – à l’époque où la nouvelle technologie était le téléphone Blackberry, Napster a d’abord envahi les dortoirs des collèges et le bug Y2K a suscité la peur en nous tous. Avancez rapidement dans notre monde numérique moderne et vous remarquerez que bien que les autres tendances technologiques se soient affaiblies, les SVG sont toujours là et prospères. Cela est en partie dû au fait que les SVG ont une faible empreinte pour une fidélité visuelle aussi élevée, dans un monde où la bande passante et les performances comptent plus que jamais – en particulier sur les appareils mobiles et les situations / emplacements où les données sont à un prix élevé. 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’antan.

Si nous nous concentrons sur l’aspect accessibilité des SVG, nous avons également parcouru un long chemin. Aujourd’hui, nous avons de nombreux modèles et techniques robustes pour nous aider à optimiser l’inclusivité. Cela est vrai peu importe si vous êtes création d’icônes, images simples, ou plus images complexes. Bien que le modèle spécifique que vous décidez d’utiliser puisse varier en fonction de votre situation particulière et de votre cible Niveau de conformité WCAG – la réalité est que la plupart des gens s’arrêtent là, se concentrant sur la conformité au code et non sur les utilisateurs finaux réels et leurs besoins. Si la véritable inclusion dépasse les modèles – quels autres facteurs devrions-nous prendre en compte lors de la conception et du développement de SVG accessibles?

Styliser et animer des SVG avec CSS

Pourquoi est-il si important d’optimiser vos SVG? Aussi, pourquoi même faire l’effort de les rendre accessibles? Sara Soueidan explique pourquoi et aussi comment styliser et animer avec CSS. Lire l’article →

Couleur et contraste SVG

Le principal objectif des SVG accessibles est la conformité des lecteurs d’écran – ce qui n’est qu’une partie du problème et une partie de la solution. À l’échelle mondiale, les personnes malvoyantes et daltoniennes sont plus nombreuses que les personnes aveugles 14: 1. Nous parlons d’un total stupéfiant de 546 millions (246 millions utilisateurs malvoyants plus 300 millions utilisateurs daltoniens) vs. 39 millions les utilisateurs légalement aveugles. De nombreuses personnes malvoyantes et daltoniennes ne dépendent pas des lecteurs d’écran, mais peuvent plutôt utiliser des outils tels que redimensionnement du navigateur, feuilles de style personnalisées, ou logiciel d’agrandissement pour les aider à voir ce qui est à l’écran. Pour ces 546 millions de personnes, la sortie du lecteur d’écran n’est probablement pas aussi importante pour eux que de s’assurer que la couleur et le contraste sont suffisamment grands pour qu’ils puissent voir le SVG à l’écran – mais comment procéder pour vérifier cela?

Outils et vérifications

La toute première étape à suivre lors de la conception de votre palette de couleurs SVG consiste à Consignes de rapport de contraste des couleurs WCAG. Alors que les SVG et autres icônes étaient exemptés des exigences de rapport de contraste de couleur il n’y a pas si longtemps (lors du ciblage de la conformité WCAG AA), la récente mise à jour de la Directives WCAG 2.1 ont fait en sorte que tout essentiel les images non textuelles doivent respecter un rapport de contraste d’au moins 3: 1 par rapport aux couleurs adjacentes. Par essentiel, cela signifie que si votre SVG devait disparaître, cela changerait-il fondamentalement les informations ou la fonctionnalité du contenu? Si vous pouvez répondre «non», vous êtes probablement exempté de cette directive. Si vous pouvez répondre «oui» ou «peut-être», vous devez vous assurer que vos rapports de contraste de couleur SVG sont vérifiés.

Icône de maison utilisée en démo avec contour clair vs contour sombre
Icône de maison utilisée dans la démo avec un contour clair vs un contour sombre – qui est plus accessible? (Grand aperçu)

Un exemple d’image non textuelle essentielle est une icône SVG utilisée comme bouton ou lien CTA – comme nous le voyons dans ce bouton d’accueil. Dans ce SVG, nous voyons un dessin au trait d’une maison sans texte visuel. Lorsque nous examinons le code, nous voyons le texte «Home» dans un intervalle avec une classe appelée «sr-only» (lecteur d’écran uniquement). Cette classe, avec le CSS connexe, cache le texte de portée aux utilisateurs voyants, mais pas aux utilisateurs AT (ce n’est qu’un exemple d’une image / d’un motif graphique accessible).

C’est une bonne première étape, mais le choix du motif SVG correct est une pièce du puzzle – une autre pièce est le contraste de couleur entre l’icône et son arrière-plan. Pour en revenir à l’exemple, à première vue, il semble que les deux SVG pourraient être accessibles. Pourtant, lorsque vous utilisez un outil de contraste des couleurs et testez l’icône de la maison sur son arrière-plan, nous constatons que le premier SVG ne respecte pas un rapport de contraste des couleurs de 2: 1 entre les traits (#8f8f8f) et l’arrière-plan (#cccccc), tandis que le deuxième SVG passe avec un rapport de contraste de couleur de 3: 1 entre les traits (#717171) et l’arrière-plan (#cccccc). En utilisant le même motif accessible, mais en faisant un pas supplémentaire et en changeant la couleur du trait en quelque chose d’un peu plus sombre, nous avons rendu notre SVG plus inclusif pour un plus large éventail de capacités.

Pour vérifier les taux de contraste des couleurs accessibles, de nombreux outils sont disponibles. Pour une vérification rapide du contraste des couleurs, vous pouvez utiliser le Vérificateur de contraste dans Chrome DevTools. Pour vérifier le contraste des couleurs sur les motifs non codés, consultez le Analyseur de contraste de couleur outil. Et pour un examen de la palette de couleurs, Palette de couleurs A11y est un excellent moyen de vous aider à voir quelles combinaisons de couleurs sont les plus accessibles. Bien sûr, assurez-vous d’essayer quelques-uns des outils et choisissez celui qui fonctionne le mieux pour vous et votre équipe – le meilleur outil est celui que vous utilisez réellement.

Mode clair / foncé

Au-delà de la vérification des rapports de contraste des couleurs, vous devriez également considérer la requête multimédia de plus en plus populaire et prise en charge appelée @prefers-color-scheme qui permet à un utilisateur de choisir une version thématique claire ou foncée du site Web ou de l’application qu’il visite. Alors que cette requête média ne fait pas remplacer la vérification des rapports de contraste des couleurs, cela peut donner à vos utilisateurs plus de choix en ce qui concerne l’expérience globale de votre site Web ou de votre application.

Permettre à vos utilisateurs de choisir leur expérience est toujours mieux que de supposer que vous savez ce qu’ils veulent.

Comme pour les autres requêtes multimédias, pour voir les changements de thème clair / foncé, le développeur du site Web ou de l’application doit ajouter du code supplémentaire ciblant la requête. Pour revenir à l’exemple d’icône de maison précédent, vous pouvez voir dans le code suivant que les couleurs de trait, de remplissage et d’arrière-plan du SVG sont contrôlées par le CSS. Étant donné que ces éléments de style sont contrôlés en externe et non codés en dur dans le balisage SVG, nous pouvons ajouter quelques lignes supplémentaires de CSS pour faire fonctionner le SVG dans un thème sombre.

Mode léger / par défaut:
Icône de maison utilisée en démo avec un fond clair
Icône de maison utilisée en démo avec un fond clair (Grand aperçu)
body {
  background: #cccccc;
}

.nav-home1 {
  stroke: #8f8f8f;
}

.nav-home2 {
  stroke: #717171;
}

#home-svg1,
#home-svg2 {
  fill: #64b700;
}

#home-door-svg1,
#home-door-svg2 {
  fill: #b426ff;
}
Mode sombre:
Icône de maison utilisée en démo avec un fond sombre
Icône de maison utilisée en démo avec un fond sombre (Grand aperçu)
@media (prefers-color-scheme: dark) {
  
  body {
    background: #333333;
  }

  .nav-home1 {
    stroke: #606060;
  }

  .nav-home2 {
    stroke: #7C7C7C;
  }
}

Voir le stylo Mode clair / foncé avec SVG par Carie Fisher.

Voir le stylo Mode clair / foncé avec SVG par Carie Fisher.

Comme le montre cet exemple, la configuration de vos conceptions pour utiliser CSS pour contrôler les éléments de style signifie que la création d’une version à thème sombre de votre SVG peut être relativement simple. Inversement, si vous avez des styles codés en dur dans le balisage SVG, vous devrez peut-être repenser votre SVG d’une manière qui permet à CSS d’avoir plus de contrôle sur la conception. Ou vous voudrez peut-être envisager de créer une toute nouvelle version sombre de votre SVG et d’échanger la version claire lorsque les préférences de thème changent. N’oubliez pas que si vous prévoyez d’afficher / masquer différentes images en fonction du mode utilisateur, vous devez également masquer le SVG invisible aux utilisateurs AT!

Remarque: dans cet exemple particulier, le thème par défaut était déjà clair, il était donc logique d’en faire également l’expérience par défaut et de créer un thème sombre pour une autre expérience. Sinon, si nous avions commencé avec un thème sombre, nous aurions pu faire l’inverse en faisant du thème sombre l’expérience par défaut et en utilisant @media (prefers-color-scheme: light) pour créer un thème lumineux.

Dans l’exemple suivant, nous examinons un SVG plus complexe avec des versions en mode clair et sombre via le @prefers-color-scheme requête média. Notre ami Karma Chameleon (sous forme SVG) a à la fois un thème sombre et un thème clair / par défaut. En modifiant vos paramètres de préférence clair / foncé (Mac OS + Win OS paramètres du mode sombre) et la navigation vers un navigateur qui prend en charge @prefers-color-scheme requête multimédia, vous pouvez voir le changement d’environnement. En mode lumière / par défaut, Karma Chameleon est assis sur une branche dans une forêt verte entourée d’un papillon rouge flottant. En mode sombre, elle est assise sur une branche dans l’espace avec une fusée bleue passant devant. Dans les deux environnements, ses couleurs changent automatiquement et ses yeux se déplacent.

Voir le stylo [Light/Dark mode + reduced motion with SVGs (Karma Chameleon)](https://codepen.io/smashingmag/pen/rNVJyoj) par Carie Fisher.

Voir le stylo Mode clair / sombre + mouvement réduit avec SVG (Karma Chameleon) par Carie Fisher.
En mode lumière / par défaut, Karma Chameleon est assis sur une branche dans une forêt verte entourée d'un papillon rouge flottant. Dans les deux environnements, ses couleurs changent automatiquement et ses yeux se déplacent.
Caméléon Karma en mode lumière. (Grand aperçu)
En mode sombre, elle est assise sur une branche dans l'espace avec une fusée bleue passant devant. Dans les deux environnements, ses couleurs changent automatiquement et ses yeux se déplacent.
Caméléon Karma en mode sombre. (Grand aperçu)

Accessibilité des couleurs et des contrastes

Bien que les exemples ci-dessus soient des façons amusantes de montrer ce que vous pouvez faire avec la couleur et le contraste et @ prefers-color-scheme requête médiatique, il existe de très bonnes raisons réelles d’envisager d’ajouter un thème sombre, notamment:

  • Les thèmes sombres sont utiles aux personnes photophobieou sensibilité à la lumière. Les personnes atteintes de photophobie peuvent déclencher des maux de tête et des migraines lorsqu’elles consultent un site Web ou une application trop lumineuse.
  • Certaines personnes trouvent le texte sur un site Web ou une application plus facile à lire en mode sombre tandis que d’autres pourraient trouver les thèmes plus légers sont plus faciles à lire – cela revient essentiellement à donner à votre utilisateur choix et leur permettant de définir leur préférence.
  • Contrairement à certaines autres requêtes multimédias basées sur la couleur ou le contraste, comme @inverted-colors (actuellement seulement pris en charge par Safari) et @forced-colors (développé par les ingénieurs Edge / IE avec la prise en charge de Chromium à venir), la prise en charge du navigateur est assez universelle pour @prefers-color-scheme – donc cette requête média est utile dès la sortie de la boîte et devrait rester pendant un certain temps. De plus, avec les récents changements MS Edge utilisant du chrome sous le capot, il y a encore plus de support pour cette requête média à l’avenir (R.I.P. -ms-high-contrast-mode).
Graphique montrant les navigateurs qui utilisent la règle CSS at: @media: préfère la fonctionnalité multimédia de schéma de couleurs - IE et Opera mobile étant les seuls principaux navigateurs non pris en charge à l'heure actuelle.
Graphique montrant quels navigateurs utilisent la règle CSS at: @media: prefers-color-scheme fonction multimédia. (Grand aperçu)

Animation SVG

En conjonction avec la couleur et le contraste, la façon dont votre SVG se déplace à l’écran est un autre aspect à considérer lors de la conception et du développement en tenant compte de l’inclusivité. le Directives de mouvement des WCAG sont clairs: les informations de déplacement, de clignotement ou de défilement non essentielles qui démarrent automatiquement, durent plus de cinq secondes et font partie d’autres éléments de la page doivent permettre à l’utilisateur de les mettre en pause, de les arrêter ou de les masquer. Mais pourquoi avons-nous besoin de cette règle?

Pour certains utilisateurs, le déplacement, le clignotement ou le défilement de contenu peut être très distrayant. Gens avec TDAH et d’autres troubles du déficit de l’attention peuvent être tellement distraits par vos SVG animés qu’ils oublient pourquoi ils sont même allés sur votre site Web / application en premier lieu. Alors que pour d’autres personnes, le mouvement peut déclencher des réactions physiques. Par exemple, les personnes problèmes vestibulaires peut devenir nauséeux et étourdi lors de la visualisation du mouvement. Alors que d’autres peuvent être déclenché pour avoir une saisie lorsque vous visualisez du contenu qui clignote ou est lumineux – une situation que vous voulez évidemment éviter.

Bien que nous aimions tous être «ravis» des fonctionnalités intéressantes des sites Web et des applications – nous devons trouver un équilibre entre être créatif et distraire (ou nuire) à nos utilisateurs lors de leur interaction avec le contenu en mouvement.

Arrêt manuel / automatique

Étant donné que les animations SVG, comme tout autre contenu en mouvement, ne doivent pas être lues automatiquement pendant plus de cinq secondes, vous devez créer un moyen pour les utilisateurs de suspendre ou d’arrêter l’animation. Pour ce faire, vous pouvez créer un bouton à bascule JS pour lire / suspendre l’animation.

Si votre SVG est volumineux ou est la principale caractéristique de votre site Web (par exemple, des animations qui apparaissent et sortent lorsque vous faites défiler une page), un bouton pause / lecture en haut de l’écran peut être une option réaliste pour contrôler toute l’expérience de la page. Si vos SVG sont plus petits ou liés à une entrée utilisateur (par exemple, une animation se produit lorsqu’un utilisateur soumet un formulaire), un bouton pause / lecture peut ne pas être réaliste pour chaque image individuelle, donc une option alternative est de coder l’animation pour qu’elle s’arrête à cinq secondes par rapport à la lecture sur une boucle infinie.

Mouvement réduit

En plus d’utiliser une option pause / lecture ou de créer une boucle d’animation finie, vous pouvez également envisager d’ajouter @prefers-reduced-motion requête média pour aborder l’animation dans vos SVG. Semblable à l’exemple du thème clair / sombre, le @prefers-reduced-motion la requête multimédia vérifie les paramètres de l’utilisateur pour les restrictions de mouvement, puis implémente une expérience visuelle en fonction de ses préférences. Dans le cas de @prefers-reduced-motion, un utilisateur peut choisir de minimiser la quantité d’animation ou de mouvement qu’il voit.

Dans l’exemple suivant, le SVG animé «écrit» un mot pendant le chargement de la page – c’est son animation par défaut. Dans la version à mouvement réduit, le SVG est stationnaire et le mot se charge sans l’animation. En fonction de la complexité de votre animation SVG et de l’apparence de l’expérience de mouvement réduit, la quantité de code supplémentaire impliquée peut varier.

Voir le stylo [Reduced motion with SVGs](https://codepen.io/smashingmag/pen/dyodvqm) par Carie Fisher.

Voir le stylo Mouvement réduit avec les SVG par Carie Fisher.
Mouvement par défaut:
Film illustrant le texte en cours d'écriture via un code non conforme aux meilleures pratiques WCAG en matière de mouvement
La version d’animation par défaut du script de texte (Grand aperçu)
.svg-color {
  stroke: #ff4b00;
}

#a11y-svg {
  stroke-linecap: round;
  padding: 0.25rem;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
  overflow: visible;
  font-size: 100px;
  height: 0;
  margin: 10rem 0 5rem;
  position: relative;
}

#a11y-svg-design {
  cursor: pointer;
  stroke-width: 2px;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1000;
    fill: transparent;
  }

  to {
    stroke-dashoffset: 0;
    fill: #ff4b00;
  }
}
Mouvement réduit:
Capture d'écran du mot accessibilité en orange sans mouvement.
La version à mouvement réduit du script de texte. (Grand aperçu)
@media (prefers-reduced-motion: reduce) {
  #a11y-svg {
    animation: none;
    fill: #ff4b00;
  }
}

Gardez à l’esprit, ayant @prefers-reduced-motion le code en place est une étape pour rendre vos SVG plus accessibles, mais vous devez également façon le mouvement est réduit. Par exemple, supposons que vous créiez une version ralentie de votre animation SVG en utilisant @prefers-reduced-motion. Cependant, la version plus lente est sur une boucle infinie, donc l’animation dure plus de cinq secondes, ce qui viole une partie des règles WCAG sur le mouvement. Si vous créez à la place une version à mouvement réduit de votre SVG animé s’arrête l’animation à cinq secondes, puis il passerait cette partie de la règle. Ce changement de code subtil équivaut à deux expériences utilisateur complètement différentes.

Dans l’exemple suivant, Karma Chameleon est de retour avec un @prefers-reduced-motion requête média et code associé. En modifiant vos paramètres de mouvement (Paramètres Mac, Win, Android et iOS) et en utilisant un navigateur qui prend en charge @prefers-reduced-motion requête multimédia, vous pouvez voir le changement d’animation. En mode lumière avec mouvement réduit, Karma Chameleon dans une forêt avec un papillon rouge stationnaire. En mode sombre avec un mouvement réduit, elle est dans l’espace avec une fusée bleue stationnaire en arrière-plan. Dans les deux environnements, ses couleurs et ses yeux sont également fixes, car l’animation SVG originale est complètement supprimée.

Voir le stylo [Light/Dark mode + reduced motion with SVGs (Karma Chameleon)](https://codepen.io/smashingmag/pen/rNVJyoj) par Carie Fisher.

Voir le stylo Mode clair / sombre + mouvement réduit avec SVG (Karma Chameleon) par Carie Fisher.
En mode lumière + mouvement réduit, Karma Chameleon est dans une forêt avec un papillon rouge stationnaire. Dans les deux environnements, ses couleurs et ses yeux sont également fixes, car l'animation SVG originale est complètement supprimée.
Caméléon Karma en mode lumière + pas de mouvement. (Grand aperçu)
En mode sombre + mouvement réduit, Karma Chameleon est dans l'espace avec une fusée bleue stationnaire en arrière-plan. Dans les deux environnements, ses couleurs et ses yeux sont également immobiles, car l'animation SVG originale est complètement supprimée
Caméléon Karma en mode sombre + pas de mouvement. (Grand aperçu)

Accessibilité de l’animation

Du point de vue de l’accessibilité, il existe de bonnes raisons d’envisager de limiter le mouvement sur votre écran ou de proposer des animations alternatives dans vos SVG, notamment:

  • Moins est plus! Garder vos animations SVG simples pour les personnes souffrant de troubles cognitifs et de l’attention peut vous aider avec votre expérience utilisateur globale. Cela est particulièrement vrai pour les SVG essentiels au contenu ou aux fonctionnalités de votre site Web ou de votre application – tels que la navigation, les boutons, les liens ou toute animation déclenchée par la saisie de l’utilisateur.
  • Ne rendez pas les gens malades! Certaines personnes souffrant de troubles épileptiques, vestibulaires et de la vision peuvent déclencher une réaction physique par le mouvement dans vos SVG, veuillez donc être responsable de vos conceptions et de votre code. Remarque: vous devez revérifier tous les SVG animés qui pourraient être problématiques dans la zone clignotante / clignotante, en utilisant le Outil d’analyse de l’épilepsie photosensible (PEAT) pour vous assurer de ne pas déclencher de crises avec votre contenu.
  • La plupart des principaux navigateurs prennent désormais en charge @prefers-reduced-motion media query à la fois sur les ordinateurs de bureau et les appareils mobiles – ce qui signifie que plus de personnes peuvent limiter leur exposition aux mouvements indésirables sur leurs écrans. Contrairement à la requête média @prefers-color-scheme qui a beaucoup de concurrents, il n’y a actuellement aucune autre requête de média de réduction de mouvement disponible.
Graphique montrant quels navigateurs utilisent la règle CSS: @media: préfère la fonctionnalité multimédia à mouvement réduit - IE et Opera mobile étant les seuls principaux navigateurs non compatibles à l'heure actuelle; globalement accepté 82,47%
Graphique montrant quels navigateurs utilisent la règle CSS at: @media: prefers-reduced-motion fonction multimédia (Grand aperçu)

Emballer

La couleur, le contraste et l’animation sont au cœur de chaque SVG. Des études indiquent que ces éléments visuels ont une signification intrinsèque, contribuent à la reconnaissance de la marque et sont liés à la valeur perçue d’une entreprise – faisant des SVG un très vaste domaine où les concepteurs et les développeurs peuvent avoir un impact direct et immédiat sur nos utilisateurs.

Mais il est également important que nous ne pensions pas seulement à l’accessibilité SVG comme quelque chose pour aider «d’autres personnes» – car qui ne s’est pas trouvé dans une situation où il doit lutter contre les reflets sur l’écran d’un appareil? Ou vous avez une migraine et les SVG continuent de flotter sur et hors de l’écran, ce qui vous rend malade au lieu d’être «ravi». Ou peut-être que vous visitez un site Web dans un environnement peu éclairé et que le texte est difficile à lire en raison du jeu de couleurs gris sur gris?

Grâce à l’utilisation d’outils d’accessibilité, aux directives WCAG, et à l’ajout et au soutien continus de nouvelles requêtes multimédias CSS pour permettre plus de choix, nous pouvons avoir un impact sur toutes les personnes de manière plus responsable et inclusive.

Car la véritable inclusion numérique, c’est comprendre que chacun de nous peut bénéficier de conceptions et de codes plus accessibles.

Smashing Editorial
(dm, yk, il)



Close Menu