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

ロービジョンのユーザーの中には、画面表示を拡大して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で確認)文字サイズ変更機能を用いた後に標準的な表示に戻す場合には、この値を指定します。

関連ガイドライン