Accessibilité Web: style efficace pour l'accessibilité

Comment le style et les couleurs peuvent-ils améliorer l'accessibilité? Voyons comment s'adapter aux utilisateurs malvoyants et examinons l'accessibilité des médias.

La couleur et le style sont également aussi importants que l'écriture de code accessible. Étant donné que les handicaps varient, il en va de même pour les méthodes de résolution du problème en créant des plates-formes qui s'adaptent à tous les utilisateurs.

Autant rendre une plate-forme accessible se résume à du HTML sémantique, les plates-formes modernes ne reposent pas uniquement sur le HTML. Le style gère l'apparence et la convivialité de la plate-forme, ce qui signifie qu'il affecte la façon dont notre produit final est perçu par l'utilisateur. Nous devons nous assurer que l'interface utilisateur est flexible et que nous pouvons l'adapter à différentes tailles d'écran.

TL; DR

Dans Partie 1 de cette série d'articles nous avons examiné les concepts de focus, focus management, utilisation d'ARIA pour apporter de la sémantique à certains éléments et aussi sa capacité à aider à restructurer le DOM d'accessibilité pour les technologies d'assistance. Vous voudrez peut-être jeter un coup d'œil ici .

Dans cet article, partie 2, nous examinerons l'importance d'avoir le bon ensemble de styles pour votre conception Web et l'utilisation de jeux de couleurs accessibles pour améliorer l'accessibilité. Nous couvrirons quelques concepts entourant l'accessibilité des médias, en examinant comment accueillir les utilisateurs qui ont une déficience visuelle.

Mise au point du style avec des pseudo-classes

Pour qu'un utilisateur puisse savoir quel élément est actuellement mis au point, par défaut les navigateurs utilisent ce qu'on appelle la bague de mise au point. Il s'agit, par défaut, d'un anneau bleu autour des éléments qui sont dans l'arborescence d'accessibilité et suivent un ordre de tabulation.

Maintenant, comme d'autres styles par défaut, nous pourrions parfois souhaiter modifier l'apparence de la mise en page et ne pas pouvoir continuer avec le style par défaut. C'est là que les pseudo éléments CSS entrent en jeu: : hover : focus : before .

The : focus Classe

La classe de focus ne correspond que lorsque l'élément est en focus, et nous pouvons ajouter un contour à l'élément en focus. Cependant, en raison de la manière dont différents navigateurs interprètent la propriété contour il est plus conseillé d'utiliser un : hover . L'implémentation d'une couleur d'arrière-plan et d'une décoration de texte serait un moyen de créer un focus personnalisé ou en utilisant la propriété box-shadow pour rendre le focus plus notable. Nous pouvons les voir dans les blocs de code ci-dessous:

 bouton : hover  {
   backgroud :   # 8373 ; 
   color :   ] #fff ; 
   texte-décoration :  soulignement ;  
} 

 bouton : focus  {
   contour  :   0 ; 
   box-shodow :   0   0   5  px  4  px  rgba  (  255  255  124  0.5 ) ; 
} 

Note: aperçu: 0; n'est pas conseillé, car ce n'est pas une pratique courante.

Conception adaptative pour l'accessibilité

Dans les temps modernes, la création de plates-formes pouvant être visualisées par plusieurs utilisateurs sur plusieurs appareils est devenue très essentielle dans toutes les parties de développement. En fait, cela n'a aucun sens de créer une plate-forme pour une seule plate-forme spécifique. La question est maintenant de savoir comment le responsive design entre en jeu pour rendre les plates-formes accessibles.

Ratio taille du texte / écran

Parfois, certains utilisateurs peuvent avoir des difficultés à lire les petits caractères et voudront agrandir la page pour pouvoir lire le texte. Lorsque cela se produit, ce serait formidable pour l'utilisateur de pouvoir le faire sans perdre tout le reste du contenu de la page et en gardant tous les éléments importants en vue.

Voici quelques moyens d'y parvenir:

• Utilisez une balise meta view-port —Cela donne à la page des instructions sur la façon de contrôler les dimensions dans sa mise à l'échelle.

La balise ci-dessus indique au navigateur d'ajuster le contenu à l'écran afin que l'utilisateur dispose d'un une meilleure vue en fonction de l'appareil qu'ils utilisent.

• Utiliser des valeurs relatives pour le texte – Le maintien de la bonne unité pour le texte peut grandement contribuer à la planification du zoom par les utilisateurs. Par exemple, en utilisant % lors de l'expression d'une unité relative à un bloc, em pour représenter la taille de la police par rapport à la taille de la police du parent, rem pour représenter la taille de la police par rapport à la taille de la police de la racine. Cela rendrait les éléments fluides et redimensionnables.

• Utilisez une cible tactile plus grande autour des icônes —Cela laisse un peu d'espace entre l'icône et l'environnement (48 dp est recommandé). Un peu de remplissage peut être ajouté autour de l'icône pour aider à atteindre cet objectif.

L'accessibilité des médias traite principalement de l'aspect visuel de l'accessibilité en ce qui concerne l'utilisation des couleurs et aussi, comme son nom l'indique, s'assure que les couleurs de votre application peuvent s'adapter à un grand nombre de handicaps des utilisateurs, soit en utilisant des motifs pour mettre en évidence diverses différences de couleur, soit en créant des fonctionnalités qui permettraient à ces utilisateurs de manipuler votre plate-forme en fonction de ceux qui ont une déficience visuelle.

Plus simplement, l'accessibilité des médias fait référence à la façon dont un utilisateur voit , comprend et utilise votre plate-forme.

Remarque: Plus de 60% de la population mondiale a une certaine déficience visuelle.

Éléments d'accessibilité des médias

• Utilisation des couleurs —Cela concerne la manière dont les couleurs sont combinées pour obtenir une expérience visuelle plus confortable.

• Combinaison de texte et d'arrière-plan – La mise en œuvre d'un mélange approprié de texte et de contraste d'arrière-plan peut aider l'utilisateur à lire ce que tente de communiquer.

Types de déficiences visuelles et comment les gérer

• Photo-phobie / sensibilité à la lumière —C'est un type de handicap visuel qui est principalement associé aux couleurs vives ou à la lumière. Les utilisateurs avec cette sensibilité ont du mal à interagir avec des plates-formes trop lumineuses. Ces utilisateurs préféreraient avoir une alternative, et c'est là qu'intervient le mode sombre. De nombreuses applications ont adopté cette solution, comme Twitter, Facebook et Apple avec la sortie d'iOS 13.

• Sensibilité au contraste – La lisibilité est également très importante dans la planification du contenu visuel sur une page Web. Habituellement, les utilisateurs se heurtent au problème de la sensibilité au contraste lorsqu'ils lisent du texte sur des images qui n'ont pas le contraste nécessaire entre le texte et l'arrière-plan pour le rendre lisible.

• Deutéranopie (daltonisme rouge-vert) – Ce cas de la déficience visuelle vient généralement des personnes qui ont du mal à faire la distinction entre les rouges et les verts. Cela devient un problème, par exemple dans le secteur du commerce électronique, où un utilisateur peut acheter la mauvaise couleur ou la mauvaise tenue en raison du manque de capacité à distinguer certaines couleurs (également un problème pour d'autres handicaps visuels basés sur la couleur). Cela peut être résolu en utilisant des balises pour les images en survol pour afficher la couleur de la chemise lorsque la souris est dessus ou en utilisant des motifs lorsque des objets normaux sont impliqués.

Pointeurs d'accessibilité remarquables

J'ai pris la liberté de compiler quelques bonnes pratiques CSS:

• N'utilisez pas uniquement des icônes. Les icônes signifient différentes choses selon les cultures. Ajoutez un texte descriptif dans vos menus, etc.

• Utilisez des animations pour attirer l'attention sur des choses importantes spécifiques. N'oubliez pas que si tout est important, rien n'est important. Fournissez un moyen de les désactiver, car certains utilisateurs tels que ceux atteints de TDAH pourraient préférer votre site avec des animations réduites. De plus, les utilisateurs épileptiques peuvent être déclenchés par des animations flashy.

• Une option consiste à utiliser des outils tels que prefers-reduction-motion CSS, une requête multimédia CSS qui modifie l'affichage de l'animation en fonction des préférences de niveau du système d'exploitation. Nous pourrions également ajouter des commandes de lecture pour donner à l'utilisateur plus de contrôle sur les interfaces. L'avertissement de contenu est également important.

• Ne transmettez pas les informations uniquement en couleur.

• Utilisez des boutons rayés en mode d'accessibilité daltonien. Cela permet à l'utilisateur de remarquer le bouton quelle que soit la couleur (c'est un moyen d'être en sécurité lorsque vos couleurs peuvent ne pas être visibles pour les utilisateurs daltoniens).

Conclusion

Il y a beaucoup à considérer quand traitant de l'accessibilité pour le Web. Étant donné que les utilisateurs varient, nous, en tant que développeurs, devons également accueillir ces utilisateurs en nous assurant de faire tout ce qui est en notre pouvoir pour créer une expérience Web impressionnante pour eux.

La mise en œuvre de certaines des solutions intéressantes que nous avons partagées dans ce billet de blog pourrait être la première étape pour créer un site Web génial pour tous. Dans la prochaine partie de cette série, nous nous concentrerons sur l'audit des plates-formes pour vérifier l'accessibilité.