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

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

Webブラウザーの拡大表示

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

ガイドラインでは、200パーセントに拡大しても問題が発生しないようにすることを[MUST]の条件としています。この条件を満たすためには、少なくともズーム機能で200パーセントの拡大表示を問題なく行える必要があります。一方文字サイズ変更機能による拡大表示については、200パーセントの拡大設定をしてもレイアウト崩れなどが発生しないことだけが[MUST]の条件で、実際に適切に拡大できることは[SHOULD]の条件です。

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

さらに、[SHOULD]では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. 画面下部のスライダーで最大のサイズを指定

関連ガイドライン