Les pratiques CSS qui peuvent nuire à l'accessibilité

CSS est devenu un langage tout-puissant. Ce qui a commencé comme un moyen d'ajouter un style de base au texte et à d'autres éléments de conception est maintenant capable de bien plus.

Nous pouvons l'utiliser pour créer pratiquement n'importe quelle mise en page imaginable. Les effets spéciaux et l'interactivité qui nécessitaient auparavant JavaScript ou des plug-ins de navigateur sont désormais pris en charge de manière native. Le langage est passé d'un outil de base à l'une des technologies fondamentales derrière chaque site Web.

Mais comme tout outil puissant, CSS peut également avoir des effets secondaires imprévus. L'accessibilité est l'un des principaux sujets de préoccupation. Certaines implémentations peuvent en effet faire plus de mal que de bien.

Dans cet esprit, examinons quelques pratiques CSS qui peuvent nuire à l'accessibilité. Ils incluent des fonctionnalités communes qui nécessitent une attention particulière avant de commencer à écrire du code. Commençons!

Affichage de texte important à l'aide de la propriété content

La propriété de content CSS offre un moyen astucieux d'ajouter des améliorations visuelles à un élément. Par exemple, vous pouvez l'utiliser en combinaison avec un pseudo-élément pour ajouter une icône avant un passage de texte ou un élément de liste. Il peut également afficher des images ou des chaînes de texte.

Mais ce dernier peut être particulièrement gênant. Le texte ajouté via la propriété content n'est pas inclus dans le modèle d'objet de document (DOM). Cela signifie que les technologies d'assistance telles que les lecteurs d'écran peuvent ne pas le reconnaître.

C'est très bien pour les objets purement décoratifs. Cependant, cela pourrait entraîner des problèmes d'accessibilité si le texte fournit un contexte vital à une page. Les utilisateurs peuvent manquer des informations importantes.

Par conséquent, il est préférable d'éviter d'utiliser la propriété content pour afficher du texte. Sauf si vous êtes sûr que cela n'interférera pas avec la capacité d'un utilisateur à comprendre la page.

Création de séquences animées clignotantes intenses

L'animation est un domaine où le CSS a connu une évolution majeure. Les effets qui étaient autrefois le territoire de bibliothèques tierces peuvent désormais être fabriqués avec une relative facilité. Et comme ils sont pris en charge de manière native, ils peuvent tirer parti de fonctionnalités telles que l'accélération matérielle pour améliorer les performances.

Les transitions et les transformations de base peuvent faire des merveilles pour créer une ambiance et attirer l'attention d'un utilisateur. Et il est également possible de créer des effets incroyablement réalistes à l'aide de JavaScript.

Mais certains styles d'animation peuvent avoir des effets négatifs. Pour certains utilisateurs, trop de mouvement peut être désorientant – ou bien pire. Des effets clignotants ou stroboscopiques intenses peuvent entraîner des convulsions. Cela est possible sur le Web, tout comme dans les films, les programmes télévisés et les jeux vidéo.

Les WCAG 2.0 offrent des conseils fondés sur la recherche pour créer des animations qui ne déclencheront pas de crises ou d'autres effets indésirables. Par exemple, il est recommandé qu'une présentation soit réglée pour ne pas clignoter plus de trois fois par seconde, tout en gardant une petite taille et en évitant la couleur rouge.

Heureusement, cela ne limite pas notre capacité à impressionner les utilisateurs avec le mouvement. Il existe encore de nombreuses possibilités d'améliorer notre travail. Mais les types d'animation utilisés et leurs impacts potentiels doivent être scrutés.

Non intuitif :hover ou :focus États sur les éléments interactifs

CSS est apte à styliser les éléments interactifs. Considérez ce qui est possible avec des éléments de tous les jours tels que des liens hypertexte et des champs de formulaire. Ils peuvent être personnalisés au point d'être méconnaissables par rapport à leur apparence par défaut.

C'est bien beau. Mais il est également important de réfléchir à ce qui se passe lorsqu'un utilisateur interagit avec un élément. Imaginez que vous cliquez sur un bouton qui n'offre aucun repère visuel pour confirmer ce qui s'est passé. Ou en utilisant un clavier pour parcourir un menu qui ne met pas en surbrillance le lien actuel.

Elles peuvent être simples, mais ces micro-interactions aident à fournir aux utilisateurs un contexte. Confirmer un clic sur un bouton ou comprendre sur quel élément de menu votre curseur est concentré ne sont que deux exemples. Et chacun apporte un sentiment de confiance lorsqu'un visiteur navigue sur un site Web.

Le style initial d'un élément interactif n'est que la moitié de la bataille. Proposer des styles intuitifs pour les pseudo-classes :hover et :focus complète l'expérience utilisateur.

Il convient de noter que ces styles doivent être facilement perceptibles. En pratique, cela signifie utiliser plus que la simple couleur comme indicateur. L'ajout d'animations, de contours ou d'icônes peut aider à garantir que personne n'est laissé de côté.

Prendre les bases de la conception accessible pour acquis

Nous y avons tous été. L'échéance d'un projet approche à grands pas et vous devez faire avancer les choses. Dans la course au lancement, certains éléments liés à l'accessibilité pourraient passer entre les mailles du filet.

Très souvent, ce sont les bases de la conception accessible qui sont laissées de côté. Ces pratiques CSS que les concepteurs pourraient tenir pour acquises et assumer sont déjà conformes aux normes.

Les principaux exemples incluent des principes fondamentaux tels qu'une typographie lisible et des rapports de contraste de couleur acceptables. Sans considérer et tester ces éléments, un site Web pourrait ne pas être aussi accessible que vous le pensez.

C'est pourquoi il vaut la peine de prendre un peu plus de temps pour examiner les aspects plus larges des styles de votre site. Même si un article passe l'inspection «globale oculaire», faites un effort supplémentaire pour effectuer un audit. Vous pourriez être surpris du nombre d'opportunités d'améliorations subtiles que vous trouverez.

Il s'agit d'utiliser CSS de manière responsable

Parce que CSS est si puissant, il est facile d'être tenté par les possibilités qu'il a à offrir. Pourquoi se contenter d'une animation basique quand on peut créer quelque chose de cinématographique ? Et comment ne pas aimer la commodité de l'utiliser pour générer du contenu ?

Tout se résume à l'empathie et à la responsabilité. Comme tout outil, CSS est capable de grandes choses. Mais ce n'est pas parce que nous pouvons implémenter une fonctionnalité spécifique qu'elle est adaptée à l'accessibilité. Nous vivons dans un monde où des personnes de tous horizons consommeront ce que nous construisons. Et c'est notre travail de veiller à ce qu'ils puissent le faire sans obstacles.

Le bon côté des choses est qu'éviter les pratiques ci-dessus est à la portée de tous. Pour l'essentiel, il s'agit de réfléchir à l'impact potentiel de ce que nous faisons. À partir de là, les tests nous fournissent les données dont nous avons besoin pour affiner davantage les choses.

CSS est là pour faciliter l'accessibilité. Tout est dans la façon dont nous choisissons de l'utiliser.