web-dev-qa-db-ja.com

アクセシビリティのために相対的なフォントサイズのみを使用することをお勧めしますか?

過去に、アクセシビリティのWebページでは相対的なサイズのフォントのみを使用することをお勧めします。これはまだ事実ですか?たとえば、IE7の Bootsrap を使用すると、body{ font-size: 14px; }が使用され、テキストサイズの変更は何も行われません。これは、機能的なニーズを持つユーザーがページを使用する方法ですか、それともユーザーが Ctrl++ / Ctrl+MouseWheelUp テキストだけでなくウェブページのサイズを実際に増加させる方法。オンラインでいくつかの検索を行った後、最新の決定的な情報を見つけることができません。

この問題 はBootstrap問題トラッカーで発生しましたが、 Mark Otto は考えます それは問題ではありません 、 「最近、ブラウザはページ全体を拡大するので、タイプの拡大縮小などの問題ではありません。」

IE7 Text Size Switching

2
kzh

最善の策は、pxの代わりにem、%またはremを使用することです。このサイトは、どちらをどこで使用するかについての良い説明を提供します:

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

1
psiclone

優れたアクセシビリティが必要な場合は、IE6とIE7を検討する必要があります。 BootstrapはIE6およびIE7でのサポートが制限されています-Chrome、Firefox、およびSafariはこの問題に遭遇しません。 Twitter Bootstrapはフレームワークであり、すべてがすぐに使用できるわけではなく、JavaScriptでやりたいことを簡単に適用できることに注意することが重要です。

ブートストラップとModernizr

Modernizrを使用すると、cssクラスを使用してie6とie7の個別のルールを簡単に統合できます。

デフォルトのフォントサイズ:body .ie7 {font-size:100%;}またはbody .ie7 {font-size:large;}

さらに、画面で+/-をクリックすることで、JavaScriptを使用して常にフォントサイズを切り替えることができます。 デモはここで表示できます そして、次のようなものを使用します。

  • 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;}

個人的に私は modernizr ルートに行き、CSSをIE6およびIE7で動作させる

1
Simon Hayter