Webアクセシビリティ：ユーザー（利用者）がコンテンツ（Webページ）を拡大縮小できるようにする
小さい文字を読むことが困難な人（弱視の視覚障害者や高齢者）のためにWebページが用意することは、こういった利用者が文字のサイズを変更することを妨げないようにすることです。
現在はブラウザやデバイス（スマフォやタブレット）の機能で画面や文字を簡単に拡大縮小できます、ひと昔前のように、サイト側で文字のサイズが変更できるボタンを用意する必要はありません。要はデザインや機能を重視して、ユーザーが自身で画面を拡大縮小しようとすることを妨げるプログラムを組まないことです。
この記事ではユーザーが行う文字の拡大縮小や画面のズームを邪魔しないために気をつけることについて解説しています。
7.文字サイズや画面表示を変更できるようにする(アクセシビリティを確保するための基本項目)
1.4.4 テキストサイズを拡大縮小できる（レベル 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のアクセシビリティ機能を利用すると文字や画面の拡大縮小が簡単にできます。
テキスト、画像、動画のサイズを変更する（拡大、縮小）
パソコンでは、ウェブページ単位で、またはすべてのウェブページを対象に、テキスト、画像、動画のサイズを変更できます。
モバイル端末のフォントサイズを変更するには、端末の設定アプリで表示オプションを変更します。
現在のページを拡大、縮小する
ページ上のすべての要素を拡大、縮小するには、ズーム機能を使います。
- パソコンで Chrome を開きます。
- 右上のその他アイコン
をクリックします。
- [ズーム] の横の数字を調整します。
- すべての要素を拡大する: 拡大
をクリックします。
- すべての要素を縮小する: 縮小
をクリックします。
- 全画面表示モードを使用する: 全画面表示
をクリックします。
キーボード ショートカットを使って、拡大、縮小する
- すべての要素を拡大する:
- Windows、Linux の場合: Ctrl キーを押しながら + キーを押します。
- Mac の場合: ⌘ キーを押しながら + キーを押します。
- Chrome OS の場合: Ctrl キーを押しながら + キーを押します。
- すべての要素を縮小する:
- Windows、Linux の場合: Ctrl キーを押しながら – キーを押します。
- Macの場合: ⌘ キーを押しながら – キーを押します。
- Chrome OS の場合: Ctrl キーを押しながら – キーを押します。
- 全画面表示モードを使用する:
- Windows、Linux の場合: F11 キーを押します。
- Mac の場合: ⌘+ctrl+f キーを押します。
- Chrome OS の場合: キーボード上部の全画面表示キー
（F4 キー）を押します。
すべてのウェブページを対象にページサイズやフォントサイズを設定する
テキスト、画像、動画など、閲覧するウェブページのすべての要素のサイズを変更することができます。または、フォントサイズのみを変更することもできます。
注: ウェブサイトによっては、ブラウザでテキストサイズのみを変更できないように設定していることがあります。そうしたサイトの場合、Chrome でフォントサイズを変更することはできません。
- パソコンで Chrome を開きます。
- 右上のその他アイコン
[設定] をクリックします。
- [デザイン] で設定を変更します。
- すべての要素のサイズを変更する: [ページのズーム] のプルダウン矢印
をクリックし、拡大縮小率を選択します。
- フォントサイズを変更する: [フォントサイズ] のプルダウン矢印
最後にもう一度、Web（サイト）でのアクセシビリティとはなんなのか？
一般的な認識は「視覚障害者向けの音声読み上げソフトに対応したサイト作成」といったイメージが強いかと思いますが、どちらかと言うとバリアフリーやユニバーサルデザインと同じような考
え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できること」を指します。
もっと具体的に言うと
・小さい字が見えにくい
・薄い（コントラストの低い）字は見えにくい
・ボタンや、導線のわかりづらいページは操作ができない
・マウスの操作は慣れていない
といったごく普通のシニアの方が感じる不自由があっても、
見てわかりやすい＆操作がしやすいページを用意することです。
＊このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。この機会に取り組みませんか！
↓↓↓↓↓↓↓
情報のバリアフリー化のための記事一覧
りんごからのお知らせ
こんにちは、Ringoです。岡山県真庭市というところで非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。
このブログでは、老後の「ゆとり」を生む資金作りのノウハウを配信しています。
今だけ無料で『資金づくりの種類や手法をわかりやすくまとめたレポート』をお渡し、無料で受け取りたい！ということであれば、今すぐ「りんごのメルマガ」にご登録ください。
登録後、特典の受け取り方法をご案内するメールをお送りいたします。
＊特典を受け取った後にメルマガを解除いただいても構いません。
＊解除に対しての手数料もかかりません。
ただ、メールを読み続けていただくと、シニアライフに嬉しい「お小遣い」を獲得できるノウハウを紹介。無理なくコツコツと老後の資金を増やしていくためのお得な情報をお届けします。
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。
お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓
＊クリックだけで登録はされません、表示された案内ページ内の申込フォームからご登録ください。
よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です（^^）
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは
お問合せ
↓↓↓↓↓↓↓↓
＊お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。