レスポンシブ デザインは、優れたマルチデバイス エクスペリエンスを提供するのにおすすめですが、アクセシビリティにもメリットがあります。
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 px です。タップ ターゲットに関するガイダンスをご覧ください。