拡大表示時のアクセシビリティー

ロービジョンのユーザーの中には、画面表示を拡大してPCやスマートフォンを操作している人がいます。拡大表示時にも、レイアウトが崩れるなどして情報を得にくくなったり、操作をしにくくなったりといったことがないようにする必要があります。

Webブラウザーの拡大表示

Webブラウザーで表示を拡大する方法としては、ブラウザーのズーム機能を使う方法と、文字サイズを変更する方法があります。

当ガイドラインでは、いずれの方法を使った場合も、200パーセントに拡大した際問題が発生しないようにすることを求めています。この条件を満たすためには、少なくともズーム機能で200パーセントの拡大表示を問題なく行える必要があります。

一方文字サイズ変更機能による拡大表示については、200パーセントの拡大設定をしたときに表示が適切に拡大されることが望ましいのは言うまでもないことですが、実際に表示が拡大されるかどうかにかかわらず、コンテンツの理解や利用を阻害するようなレイアウト崩れが発生しないことが最低限求められています。こうすることで、定常的に文字サイズ変更機能を利用しているユーザーの利用を困難にしないことにつながります。

ズーム機能を用いている場合、拡大表示をしても問題が発生することはあまりありません。一方文字サイズ変更機能を用いて拡大する場合、文字サイズの指定にpxなどの絶対値指定とemやremなどの相対値指定が混在している場合などに問題が発生します。

さらに、ガイドラインでは400パーセントに拡大したときに、縦スクロールと横スクロールが共に必要になるようなコンテンツにならないように、適切にリフローすることを求めています。このガイドラインの対応するWCAG 2.1の達成基準（SC 1.4.10）では、縦スクロールのコンテンツ（横書きのコンテンツ）では幅320 CSS px相当の表示にした際に横スクロールが、横スクロールのコンテンツ（縦書きのコンテンツ）では高さ256 CSS px相当の表示にした場合に縦スクロールが、それぞれ発生しないようにリフローすることを求めています。これは、1280x1024のサイズの画面において400パーセントのズーム表示をした場合に、縦横両方のスクロールが必要という状況にならないようにすることを意図しています。

なお、1280x1024のサイズの画面上での表示を確認するためには、ブラウザーのウィンドウをこのサイズにした上で拡大表示をしてみると良いでしょう。以下の手順で、簡単にウィンドウ・サイズを1280x1024に変更することができます。

  1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

    コードを表示
    javascript:window.open(location.href,'a11ytest_1280x1024','width=1280,height=1024')
    ウィンドウ・サイズを1280x1024にするブックマークレット

  2. チェック対象のページを表示した状態で、このブックマークレットを実行。

参考：ズーム機能と文字サイズ変更機能

ズーム機能は、ウィンドウ全体を拡大・縮小する機能で、最近のブラウザーでは標準的な機能です。Google Chromeの場合、Chromeメニューにある「テキストを拡大する」、「テキストを縮小する」を実行することで利用できます。また、これらの機能はそれぞれCTRL + +、CTRL + -を押下することでも実行できます。

一方文字サイズ変更機能は、テキストのサイズのみを変更する機能です。Google Chromeの場合、設定画面の「デザイン」のセクションにある「フォントをカスタマイズ」をクリックして表示される画面で設定します。この画面は、アドレスバーにchrome://settings/fontsと入力することでも表示できます。

なお、Google Chromeにおけるこの設定のデフォルト値は16です。（バージョン85.0.4183.102で確認）文字サイズ変更機能を用いた後に標準的な表示に戻す場合には、この値を指定します。

モバイル・アプリケーションにおける拡大表示

拡大表示が必要なユーザーがスマートフォン上で動作するアプリケーションを使用する場合は、OSが提供する拡大表示の機能をを活用することが多いと考えられます。以下、拡大表示のための設定手順を示します。

iOSの場合

以下の手順で、最大の拡大表示にすることができます。iOSのDynamic Type機能に対応しているアプリケーションの場合、適切に拡大表示されます。

  1. 「設定」アプリ、アクセシビリティ ‣ 画面表示とテキストサイズ ‣ さらに大きな文字の順にタップ

  2. 「さらに大きな文字」を有効にする

  3. 画面下部のスライダーで最大のサイズを指定

Androidの場合

注：以下の記述はPixel 6上のAndroid 12における操作手順です。端末の機種やAndroidのバージョンによって異なっている場合があります。

以下の操作で、文字の表示サイズを最大にすることができます。

  1. 「設定」アプリ、ユーザー補助 ‣ テキストと表示 ‣ フォントサイズの順にタップ

  2. 画面下部で「最大」を選択

また、以下の操作で文字以外の部分も含めて最大サイズの表示にすることができます。

  1. 「設定」アプリ、ユーザー補助 ‣ テキストと表示 ‣ 表示サイズの順にタップ

  2. 画面下部で「最大」を選択

なお、この2つの設定を組み合わせて使用することも可能です。

関連ガイドライン項目