Accessibilité (a) Règles - 4

Couleur et contraste

• Le texte de taille normale, y compris les images de texte, doit avoir un rapport de contraste des couleurs de 4,5:1.

• Le texte de grande taille (18 pts / 24 px ou 14 pts / 18,5 px en gras) et les icônes essentielles doivent avoir un rapport de contraste des couleurs de 3:1.

• Pour connaître le rapport de contraste des couleurs, utilisez le sélecteur de couleurs DevTools de Google Chrome.

• Incluez un identifiant supplémentaire, tel qu'un motif, un texte ou une icône, à côté de la couleur dans les graphiques, les diagrammes et les tableaux pour améliorer la compréhension du contenu pour tous les utilisateurs.

• Créez un thème sombre avec @prefers-color-scheme.

• Créez un thème à contraste élevé @prefers-contrast.

Animation et mouvement

Contenu clignotant et mobile

• Ne contient rien qui clignote plus de trois fois par seconde.

• Clignote en dessous du seuil général de flash et de flash rouge.

Mettre en pause, arrêter ou masquer un mouvement

• Ajoutez un mécanisme de pause, d'arrêt ou de masquage dans la page pour permettre aux utilisateurs de désactiver l'animation de mouvement potentiellement problématique.

• Peut le faire au niveau de l'écran ou au niveau de l'élément.

Utiliser des requêtes multimédias

• À l'aide de @prefers-reduced-motion media query, vérifie les paramètres du système d'exploitation de l'utilisateur liés au site d'animation et de conception qui respecte ces préférences.

Typographie

• Le moyen le plus rapide de créer un design accessible est de choisir une police de caractères commune (telle que Arial, Times New Roman, Calibri, Verdana et bien d'autres).

• Évitez les polices ornées ou manuscrites, ainsi que celles avec une seule casse de caractère disponible (par exemple, uniquement des caractères majuscules).

• Lorsque vous recherchez la police de caractères, portez une attention particulière aux éléments suivants :

  • Utilisez des polices courantes autant que possible.
  • Évitez d'utiliser des polices élaborées ou manuscrites et celles avec une seule casse de caractère.
  • Choisissez une police aux caractéristiques uniques, en accordant une attention particulière au I majuscule, au l minuscule et au 1.
  • Examinez certaines combinaisons de lettres pour vous assurer qu'elles ne sont pas une image miroir exacte les unes des autres.
  • Vérifiez le crénage, en particulier entre la paire de lettres r et n.

Taille de la police et style typographique

• Les tailles de police de base doivent être définies avec une valeur relative (%, rem ou em) pour permettre le redimensionnement.

• Limitez le nombre de variantes de caractères telles que la couleur, le gras, TOUTES LES MAJUSCULES et l'italique pour augmenter la lisibilité. Utilisez plutôt des méthodes pour souligner les mots dans votre copie, telles que des astérisques, des tirets ou la mise en évidence d'un mot individuel.

• Utilisez du balisage au lieu du texte sur les images autant que possible. Les lecteurs d'écran ne peuvent pas lire le texte intégré sur les images (sans ajout de code supplémentaire), et le texte intégré peut également devenir pixellisé lorsqu'il est agrandi par des utilisateurs malvoyants.

Structure et mise en page

• Les éléments critiques doivent être distincts les uns des autres et les éléments similaires doivent être regroupés.

Espacement

• Les blocs de texte doivent rester étroits pour améliorer la lisibilité et aider les lecteurs handicapés à suivre le contenu plus facilement.

Alignement du contenu

• Évitez les textes justifiés, car un espacement irrégulier nuit à la lisibilité, en particulier pour les personnes handicapées. Cela peut également fausser l'espacement des mots, rendant les limites des mots difficiles à identifier.

• Espacement et outils tels que Good Line-Height et Golden Ratio Calculator pour aider à rendre la copie plus accessible.

Meilleures pratiques en matière de structure et de mise en page

• Utilisez des éléments tels que des titres, des sous-titres, des listes, des chiffres, des blocs de citations et d'autres regroupements visuels pour diviser la page en sections.

• Utilisez des paragraphes, des phrases et un espacement des mots clairement définis.

• Créez des colonnes de copie d'une largeur inférieure à 80 caractères (40 caractères pour les logogrammes).

• Évitez l'alignement justifié des paragraphes, qui crée des « rivières d'espace » dans la copie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!