2019年12月14日TwitterFacebookGoogle+LinkedInPocket小さい文字を読むことが困難な人(弱視の視覚障害者や高齢者)のためにWebページが用意することは、こういった利用者が文字のサイズを変更することを妨げないようにすることです。現在はブラウザやデバイス(スマフォやタブレット)の機能で画面や文字を簡単に拡大縮小できます、ひと昔前のように、サイト側で文字のサイズが変更できるボタンを用意する必要はありません。要はデザインや機能を重視して、ユーザーが自身で画面を拡大縮小しようとすることを妨げるプログラムを組まないことです。この記事ではユーザーが行う文字の拡大縮小や画面のズームを邪魔しないために気をつけることについて解説しています。AA)ロービジョンのユーザーは、コンテンツ内の小さなテキストを読むことが困難である。そのため、テキストは画像拡大ソフトなどの支援技術を使用せずに、200%までサイズ変更できるようにする必要がある。サイズ変更時に、コンテンツまたは機能を損なわず適切に表示されてなければならない。テキストのサイズが200%を越えると、テキストとコンテンツが重なるなど、かえって読みづらいレイアウトになってしまうことがある。そのため、それ以上の拡大が必要なユーザーは、拡大鏡などの支援技術を用いる方がより良い閲覧体験につながることが多い。画像文字については、テキストと同じように拡大縮小できないため、可能な限りテキストにすることを推奨する。すべてのウェブページを対象にページサイズやフォントサイズを設定するユーザーがコンテンツを拡大縮小できるようにする古いブラウザでは、CSSで、pxやcmなどで文字サイズを指定すると、ブラウザの機能で文字の拡大縮小ができないことがあるため、パーセント、emなどの相対的な文字サイズ指定が推奨されていますまた文字を拡大した際に、文字が別の要素(画像や表)に隠れてしまって読めなくなる、といったことがないように気をつけます。文字が大きくなることを考慮したレイアウト作りが必要です(作成しながら拡大して確認するよう習慣付けましょう)。*取り組むこと(推奨)デザイン確認時、デザイナー・エンジニアがテキストを200%拡大時の挙動を確認するコードレビュー時、フォントサイズが相対指定になっていることを確認する実装後、テキストサイズを拡大してコンテンツが適切に表示されているか確認する*CSSやスクリプトの設定が必要な場合もありますでは、具体的に注意する点について紹介します。「user-scalable=no」を設定しない「user-scalable=no」は、スマフォなどのモバイル用に利用するブラウザで拡大・縮小を禁止する設定です。倍率が固定されるので、ピンチインやピンチアウトの操作をしても画面が拡大縮小しないしません。なんのためにそんな制御をするかですが、Webの作り手がデザインを綺麗に見せたり、拡大縮小による不具合を防ぐ為に、このコードを記述することがほとんどです。「user-scalable=no」を使わない。ことが望ましいですフォントサイズを相対指定するフォントサイズを「px」で指定せず、「em」または「rem」などで相対的なサイズに指定します。古いブラウザでは「px」で固定されると拡大縮小ができなくなる可能性があります。フォントサイズは絶対値「px」で指定せず、相対値の「em」や[rem]で指定します*最新バージョンのブラウザでは「px」指定でも問題ない場合が多いです*「em」は親要素のfont-sizeを基準に大きさを計算する*「rem」は文書のルート要素(html要素)のfont-sizeを基準にするパソコンやスマフォの拡大縮小機能パソコンやスマフォには、ブラウザの機能やOSのアクセシビリティ機能を利用すると文字や画面の拡大縮小が簡単にできます。テキスト、画像、動画のサイズを変更する(拡大、縮小)パソコンでは、ウェブページ単位で、またはすべてのウェブページを対象に、テキスト、画像、動画のサイズを変更できます。モバイル端末のフォントサイズを変更するには、端末の設定アプリで表示オプションを変更します。現在のページを拡大、縮小するページ上のすべての要素を拡大、縮小するには、ズーム機能を使います。