CSS Accessibilité et Style
Style d'Accessibilité CSS
Un site web doit être conçu pour garantir une bonne accessibilité à tous les utilisateurs, y compris ceux ayant des handicaps.
Le style d'accessibilité CSS consiste à utiliser de bonnes techniques de style pour améliorer la clarté visuelle, la navigation et l'expérience utilisateur globale.
Techniques de Style d'Accessibilité CSS
Voici quelques conseils et techniques pour améliorer l'accessibilité de votre site web :
1. Fournir un Bon Contraste de Couleur
Utilisez toujours un bon contraste de couleur entre le texte et l'arrière-plan pour garantir la lisibilité. Cela est particulièrement important pour les utilisateurs ayant des déficiences visuelles ou des daltonismes.
Bon Contraste de Couleur
body {
background-color: #ffffff;
color: #000000;
} Mauvais Contraste de Couleur
body {
background-color: #eeeeee;
color: #cccccc;
} 2. Fournir une Bonne Police, Taille de Police et Hauteur de Ligne
Assurez-vous toujours d'utiliser une police facilement lisible. De plus, choisissez une taille de police et une hauteur de ligne appropriées. Utilisez des unités relatives (comme rem ) pour font-size , afin de permettre à l'utilisateur de redimensionner la taille du texte dans les paramètres du navigateur.
Bon Exemple de Police
body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
} Mauvais Exemple de Police
body {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-variant: small-caps;
line-height: 90%;
} 3. Avoir des Indicateurs de Focus Visibles
Utilisez toujours la pseudo-classe :focus pour garantir que les éléments interactifs (comme les liens, les boutons et les champs de saisie) présentent un style de focus visuel clair.
L'utilisation de :focus permettra aux utilisateurs de clavier et aux lecteurs d'écran de comprendre quel élément est actuellement actif.
Exemple
a:focus, button:focus, input:focus {
outline: 2px solid orange;
} 4. Éviter de Cacher le Focus
Ne retirez jamais les contours de focus par défaut sans les remplacer par un autre style de focus visible.
Mauvais Exemple
button:focus {
outline: none;
} Bon Exemple
button:focus {
outline: 2px solid orange;
} 5. Utiliser CSS + HTML Sémantique
Utilisez CSS pour le style visuel et structurez le contenu avec des éléments HTML sémantiques (au lieu d'éléments non sémantiques, comme <div> pour tout).
Exemple
nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
} 6. Respecter les Préférences des Utilisateurs
La fonctionnalité CSS prefers-reduced-motion @media vous permet de vérifier si un utilisateur a demandé à réduire le mouvement, comme les animations ou les transitions.
Certains utilisateurs sont sensibles au mouvement et préfèrent les sites web avec moins d'animations. Vous pouvez utiliser cette requête média pour désactiver ou atténuer les animations et transitions pour les utilisateurs qui ont activé ce paramètre sur leur ordinateur :
Exemple
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
} Vous en apprendrez plus sur les requêtes média dans un chapitre ultérieur.
Résumé
- Fournir un contraste de couleur élevé
- Fournir des polices facilement lisibles
- Garder les contours de focus visibles
- Utiliser des éléments HTML sémantiques
- Respecter les préférences des utilisateurs