Google は、最高のマルチデバイス エクスペリエンスを提供するためにレスポンシブ デザインを採用することは良いアイデアですが、レスポンシブ デザインはユーザー補助の面でも優れています。
Udacity のようなサイトについて考えてみましょう。
小さな文字が読みにくいロービジョン ユーザーは、ページを最大で 400% まで拡大することがあります。サイトはレスポンシブに設計されているため、UI は「小さいビューポート」（実際には大きなページ用）に合わせて再配置されます。これは、画面拡大が必要なパソコン ユーザーや、モバイルのスクリーン リーダー ユーザーに最適です。これは双方にメリットがあります。同じページを 400% に拡大した画像を次に示します。
実際、レスポンシブにデザインするだけで、WebAIM チェックリストの 1.4.4 ルールを満たすことができます。このルールでは、「テキストサイズが 2 倍になったときに、ページを読みやすく、機能するべき」と規定されています。
このガイドでは、レスポンシブ デザインのすべてについて説明しませんが、ここではレスポンシブ エクスペリエンスを改善し、ユーザーがコンテンツにアクセスしやすくするための重要なポイントをいくつか紹介します。
ビューポート メタタグを使用する
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width を設定すると、画面の幅（デバイス非依存ピクセル）と一致します。initial-scale=1 を設定すると、CSS ピクセルとデバイス非依存ピクセルの間に 1:1 の関係が確立されます。これにより、コンテンツが画面サイズに合うようにブラウザに指示されるため、ユーザーには細かなテキストが大量に表示されることはありません。
詳しくは、コンテンツのサイズをビューポートに合わせるをご覧ください。
ユーザーにズームを許可する
maximum-scale=1 または user-scaleable=no を設定すると、ビューポート メタタグを使用してズームを防止できます。このような操作は行わず、必要に応じてユーザーが拡大できるようにします。
柔軟性のある設計
特定の画面サイズをターゲットにするのではなく、フレキシブル グリッドを使用して、コンテンツの指示に応じてレイアウトを変更します。上記の Udacity の例で見たように、このアプローチにより、画面の縮小によるスペースの縮小とズームレベルの拡大のどちらによるスペースの縮小にもデザインが対応できます。
これらの手法について詳しくは、レスポンシブ ウェブ デザインの基本をご覧ください。
テキストに相対単位を使用する
フレキシブル グリッドを最大限に活用するには、テキストサイズなどにピクセル値ではなく em や rem などの相対単位を使用します。一部のブラウザでは、ユーザー設定でテキストのサイズ変更のみがサポートされています。テキストにピクセル値を使用している場合、この設定はコピーには影響しません。ただし、全体を通して相対単位を使用していた場合、サイトコピーはユーザーの設定を反映するように更新されます。
これにより、ユーザーが拡大縮小したときにサイト全体がリフローできるようになり、サイトの使用にふさわしい読書エクスペリエンスが実現します。
ソースの注文からビジュアル ビューが切断されないようにする
訪問者がキーボードでタブを使用すると、HTML ドキュメントのコンテンツの順序に従います。Flexbox や Grid などの最新のレイアウト メソッドを使用すると、ビジュアル レンダリングとソースの順序が一致しなくなることがあります。このため、ユーザーがキーボードを使用してページを移動する際に、混乱を招く可能性があります。
各ブレークポイントでコンテンツをタブで移動してデザインをテストしてください。ページの流れは問題ないでしょうか？
詳しくは、ソースとビジュアル ディスプレイの接続解除をご覧ください。
空間的な手がかりに注意する
マイクロコピーを記述する際は、ページ上の要素の位置を示す言葉を使用しないでください。たとえば、モバイル版でナビゲーションが画面上部に表示されている場合、「左側」のナビゲーションという表現は意味がありません。
タップ ターゲットがタッチスクリーン デバイスで十分な大きさになっていることを確認する
タッチスクリーン デバイスでは、タップ ターゲットを十分な大きさにして、他のリンクをクリックしなくても簡単に有効化できるようにします。タップ可能な要素に適したサイズは 48 ピクセルです。詳しくは、タップ ターゲットのガイダンスをご覧ください。