web-dev-qa-db-fra.com

Est-il toujours recommandé d'utiliser uniquement la taille de police relative pour l'accessibilité?

J'ai lu par le passé qu'il est recommandé d'utiliser uniquement des polices de taille relative dans les pages Web d'accessibilité. Est-ce toujours le cas? En utilisant Bootsrap à partir de IE7, par exemple, qui utilise body{ font-size: 14px; }, la modification de la taille du texte ne fait rien. Est-ce ainsi qu'un utilisateur ayant des besoins fonctionnels utiliserait la page ou utiliserait-il le Ctrl++ / Ctrl+MouseWheelUp méthode qui augmente réellement la taille de la page Web, pas seulement le texte. Après quelques recherches en ligne, je ne trouve aucune information à jour définitive.

Ce problème a été soulevé dans le traqueur de problème Bootstrap, cependant, mais Mark Otto pense ce n'est pas un problème , indiquant "les navigateurs redimensionnent des pages entières ces jours-ci, donc ce n'est pas un problème avec la mise à l'échelle des types ou quoi que ce soit."

IE7 Text Size Switching

fontsaccessibility
2
kzh

Votre meilleur pari est d'utiliser em,% ou rem, au lieu de px. Ce site donne une bonne explication sur lequel et où vous utiliseriez l’une sur l’autre:

https://medium.com/@madhum86/css-font-sizing-pixels-vs-em-vs-rem-vs-percent-vs-viewport-units-b1485716afe7

1
psiclone

Si vous voulez une bonne accessibilité, vous devriez considérer IE6 et IE7. Bootstrap a un support limité dans IE6 et IE7 - Chrome, Firefox et Safari ne rencontrent pas ce problème. Il est important de noter que Twitter Bootstrap _ est un cadre et que tout n'est pas fait pour vous, il peut être facilement adapté pour faire ce que vous voulez, aussi, avec JavaScript.

Bootstrap et Modernizr

Avec Modernizr, vous pouvez facilement intégrer des règles distinctes pour ie6 et ie7 en utilisant la classe css:

Taille de police par défaut: body .ie7 {font-size:100%;} ou body .ie7 {font-size:large;}

De plus, vous pouvez toujours utiliser JavaScript pour changer de taille de police en cliquant sur +/- à l'écran: la démo peut être visionnée ici et utiliserait quelque chose comme ceci:

  • xsmall.css> body {font-size:x-small;}
  • small.css> body {font-size:small;}
  • large.css> body {font-size:large;}
  • xlarge.css> body {font-size:x-large;}
  • xxlarge.css> body {font-size:xx-large;}

Personnellement, je choisirais la route modernizr et je travaillerais avec CSS avec IE6 et IE7

1
Simon Hayter