L'inclusivité audelà des modèles

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 créez des icônes des images simples ou plus des 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 du niveau de conformité ciblé 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?

Couleur et contraste SVG

L'objectif principal 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) contre 39 millions d'utilisateurs légalement aveugles. De nombreuses personnes malvoyantes et daltoniennes ne comptent pas sur les lecteurs d'écran, mais peuvent utiliser à la place des outils tels que redimensionnement du navigateur feuilles de style personnalisées ou logiciel d'agrandissement pour aider les 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 que vous devez prendre lors de la conception de votre palette de couleurs SVG est de revoir les directives de rapport de contraste des couleurs WCAG . Alors que les SVG et autres icônes n'étaient pas soumis aux 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 des directives WCAG 2.1 a rendu 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 bien cochés.

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) .

Ceci 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 le trait ( # 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 le trait ( # 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 éventail de capacités plus large.

Pour vérifier les rapports de contraste de couleur accessibles, il existe de nombreux outils disponibles pour utilisation. 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 conceptions non codées, consultez l'outil Analyseur de contraste des couleurs . Et pour une révision de la palette de couleurs, La 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 de choisir 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 taux de contraste des couleurs , vous devez également prendre en compte 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ème clair ou foncé du site Web ou de l'application qu'il visite. Bien que cette requête multimédia ne remplace pas la vérification des rapports de contraste des couleurs, elle 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 / sombre, 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 de l'extérieur 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 clair / par défaut:

 body {
  fond: #cccccc;
}

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

.nav-home2 {
  accident vasculaire cérébral: # 717171;
}

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

# home-door-svg1,
# home-door-svg2 {
  remplissage: # b426ff;
}

Mode sombre:

 @media (prefers-color- schéma: sombre) {
  
  corps {
    fond: # 333333;
  }

  .nav-home1 {
    accident vasculaire cérébral: # 606060;
  }

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

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 le contraire en faisant du thème sombre l'expérience par défaut et en utilisant @media (prefers-color-palette: light) pour créer un thème clair.

Dans l'exemple suivant, nous examinons un SVG plus complexe avec les versions en mode clair et sombre via la requête de média @ prefers-color-scheme . 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 en naviguant vers un navigateur qui prend en charge @ prefers-color-scheme media requête, 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 bougent.

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 le @ prefers-color-schéma requête médiatique, il existe de très bonnes raisons réelles d'envisager l'ajout d'un thème sombre, notamment:

• Les thèmes sombres sont utiles aux personnes atteintes de photophobie ou de 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 peuvent trouver les thèmes plus clairs sont plus faciles à lire – cela revient essentiellement à donner à votre utilisateur un choix et à lui permettre de définir ses préférences.
• Contrairement à d'autres requêtes de médias basées sur la couleur ou le contraste comme [19659047] @ couleurs inversées (actuellement uniquement pris en charge par Safari ) et @ couleurs forcées (développé par les ingénieurs Edge / IE avec la prise en charge de Chromium bientôt), le support du navigateur est assez universel pour @ prefers-color-scheme – donc cette requête média est utile dès le départ et devrait rester pendant un certain temps. De plus, avec les récents changements apportés à MS Edge utilisant du chrome sous le capot, il y a encore plus de support pour cette requête multimédia à l'avenir (RIP -ms-high-contrast-mode ). [19659055] Graphique montrant quels navigateurs utilisent la règle CSS @: @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 en ce moment. « />

  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é. Les directives de mouvement WCAG sont claires: 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 faire une pause, de s'arrêter ou cache le. 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. Les personnes atteintes du TDAH et d'autres troubles du déficit de l'attention peuvent être tellement distraites par vos SVG animés qu'elles oublient pourquoi elles sont même allées 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 ayant des problèmes vestibulaires peuvent devenir nauséeuses et étourdies lors de la visualisation du mouvement. Alors que d'autres peuvent être déclenchés pour avoir une crise lors de la visualisation de 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 du site Web et de l'application – 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

  Puisque les animations SVG, comme tout autre contenu en mouvement, ne doivent pas être lues automatiquement pour plus de cinq secondes, vous devez créer un moyen pour les utilisateurs de suspendre ou d'arrêter l'animation. Une façon de le faire est de créer un bouton à bascule JS pour lire / mettre en pause 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-reduction-motion requête média pour aborder l'animation dans vos SVG. Semblable à l'exemple du thème clair / sombre, la requête multimédia @ prefers-red-motion 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 @ préfère le mouvement réduit 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 comme la page se charge – 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. Selon la complexité de votre animation SVG et l'apparence de l'expérience de mouvement réduit, la quantité de code supplémentaire impliquée peut varier.

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

  Mouvement par défaut:

  

   .svg-color {
    accident vasculaire cérébral: # ff4b00;
  }
  
  # a11y-svg {
    linoléum: rond;
    rembourrage: 0,25rem;
    trait-dasharray: 1000;
    stroke-dashoffset: 0;
    -webkit-animation: tiret 5s linéaire vers l'avant;
    animation: tiret 5s linéaire vers l'avant;
    débordement: visible;
    taille de police: 100px;
    hauteur: 0;
    marge: 10rem 0 5rem;
    position: relative;
  }
  
  # a11y-svg-design {
    curseur: pointeur;
    largeur de trait: 2px;
  }
  
  @ -webkit-keyframes dash {
    de {
      course-tableau de bord: 1000;
      remplissage: transparent;
    }
  
    à {
      stroke-dashoffset: 0;
      remplissage: # ff4b00;
    }
  } 

  Mouvement réduit:

  

   @media (préfère le mouvement réduit: réduire) {
    # a11y-svg {
      animation: aucune;
      remplissage: # ff4b00;
    }
  } 

  Gardez à l'esprit que le fait d'avoir @ prefers-red-motion-motion en place est une étape pour rendre vos SVG plus accessibles, mais vous devez également considérer la manière la motion est réduite. Par exemple, supposons que vous créiez une version ralentie de votre animation SVG en utilisant @ prefers-reduction-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é qui arrête l'animation au bout de cinq secondes, alors 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 une requête multimédia @ prefers-reduction-motion et un 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-red-motion-motion 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) de Carie Fisher .

  

  

  Accessibilité des animations

  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 des utilisateurs.
  • Ne rendez pas les gens malades! Certaines personnes atteintes 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 l'outil gratuit d'analyse photosensible de l'épilepsie (PEAT) pour vous assurer de ne pas déclencher de crises avec votre contenu.
  • La plupart des principaux navigateurs prennent désormais en charge @ préfère la requête multimédia à mouvement réduit à la fois sur les ordinateurs de bureau et les appareils mobiles – ce qui signifie que davantage de personnes peuvent limiter leur exposition aux mouvements indésirables sur leurs écrans. Contrairement à la requête multimédia @ prefers-color-scheme qui a beaucoup de concurrents, il n'y a actuellement aucune autre requête multimédia de réduction de mouvement disponible.

  

  Wrapping Up [19659002] La couleur, le contraste et l'animation sont au cœur de chaque SVG. Des études rapportent 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 grand domaine où les concepteurs et les développeurs peuvent avoir un impact direct et immédiat sur nos utilisateurs.

  Mais cela est également important que nous ne pensions pas seulement à l'accessibilité SVG comme quelque chose pour aider «d'autres personnes» – parce que 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, vous rendant 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?

  Avec l'utilisation d'outils d'accessibilité, les directives WCAG et l'ajout et le support continus de les nouvelles requêtes des médias CSS pour permettre plus de choix, nous pouvons avoir un impact sur toutes les personnes de manière plus responsable et inclusive.

  Pour une véritable inclusion numérique, il faut comprendre que chacun de nous peut bénéficier de conceptions et de codes plus accessibles.

  (dm, yk, il)