Dimensionnement de police accessible, expliqué

Les directives d'accessibilité du contenu Web (WCAG) n'imposent pas une taille de police minimale pour le contenu Web. Cependant, assurer la lisibilité est crucial. Cet article explore les meilleures pratiques pour le dimensionnement des polices accessibles, en se concentrant sur les exigences WCAG et en tirant parti par défaut du navigateur.

Lisibilité: contraste et variété de caractère

WCAG priorise le contraste sur une taille fixe. Le texte doit répondre à un rapport de contraste minimum de 4,5: 1 (3: 1 pour le grand texte). Des outils comme le vérificateur de contraste de Webaim peuvent vous aider. La complexité de divers alphabets (environ 300 dans le monde) signifie qu'une seule taille minimale n'est pas universellement applicable. WCAG définit le «grand texte» basé sur des tailles minimales minimales spécifiques à la langue, mesurées en points (pas des pixels). Pour le texte romain, 18 points (qui pourraient équiper à 24 pix selon la densité de l'écran) est considéré comme "grand".

Essentiellement, WCAG spécifie le contraste , pas une taille de police précise.

Heureusement, les styles par défaut du navigateur sont intrinsèquement accessibles. Tirons-nous.

Proportions, pas de tailles fixes

Les styles par défaut du navigateur (styles de styles d'agent utilisateur) précèdent les styles d'auteur et les styles utilisateur. De nombreux utilisateurs ajustent leurs tailles de police de navigateur par défaut. Nous manquons également de contrôle complet sur la famille de la police en raison de facteurs tels que la traduction, les défaillances de chargement des polices ou les polices sélectionnées par l'utilisateur (comme OpenDyslexic).

Par conséquent, concentrez-vous sur les proportions , et non les tailles absolues. Utilisez les unités relatives CSS (WCAG recommande des unités em ) pour garantir les échelles de contenu de manière appropriée à l'environnement de l'utilisateur. Pensez à utiliser de manière cohérente des unités rem et em (sauf pour les bordures, où les pixels sont souvent préférables).

Évitez de régler une taille de police de base

Généralement, évitez de régler font-size sur la :root , , ou<code> Éléments. Laissez la taille accessible par défaut du navigateur servir de référence. Le projet de travail WCAG 2.2 suggère que la taille de police par défaut utilisée par les principaux navigateurs pour le texte non spécifié fournit une base de référence raisonnable.

Des exceptions existent. Des polices complexes, minces ou courtes de hauteur X peuvent nécessiter une taille de police de base légèrement plus grande pour obtenir un contraste suffisant. N'oubliez pas: le contraste, pas la taille, est la métrique WCAG clé. Les polices inhabituelles peuvent nécessiter des tailles plus grandes pour maintenir la lisibilité, en particulier à des niveaux de contraste plus faibles. Les utilisateurs peuvent toujours ajuster la taille de la police de base à leur préférence.

Maintenir des proportions: définir les ajustements de taille relative (par exemple, .small , .large ) en fonction de la valeur par défaut du navigateur.

 :racine {
  / * Ne définissez pas de taille de police ici * /
}
.petit {
  taille de police: .8rem;
}
.grand {
  taille de police: 2rem;
}

Rubriques

Maintenez l'ordre de tirage (H1, H2, H3, etc.) pour l'accessibilité du lecteur d'écran. La réinitialisation des tailles de police de cap vers 1rem peut découpler le style visuel à partir de la signification sémantique.

Travailler avec des pixels

Pour traduire les conceptions à base de pixels en unités relatives:

Méthode 1: la règle de 62,5%

Réglage font-size: 62.5%; Sur :root rend 1Rem égal à 10px, simplifiant la conversion de pixel-à-REM.

Méthode 2: Utilisation calc()

Utilisez calc() pour calculer dynamiquement les valeurs REM en fonction de la valeur du navigateur 16Px supposée.

Méthode 3: Fonction Pixel-to-REM

Utilisez des fonctions de préprocesseur (mélanges SASS, POLOSIONS STYLED-COMPONNANTS) ou même créez une fonction CSS personnalisée pour la conversion de pixel-à-REM.

Conclusion

Prioriser le dimensionnement proportionnel à l'aide des unités rem , tirer parti des défauts de navigateur et éviter les hypothèses sur les paramètres de l'utilisateur. Cette approche garantit l'accessibilité entre divers navigateurs, appareils et préférences des utilisateurs. Merci à Franco Correa pour son aide.

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!