LEARN BY EXAMPLE

1.3.4 表示の向き レベル AA

縦向きでも横向きでも使えるようにする。

概要

コンテンツの表示と操作を、縦向きか横向きの一方だけに制限しません。ただし、特定の向きが必要不可欠な場合は例外です。

同じ案内を縦向きと横向きで開く

端末を横向きで固定している人も、日時を読んで詳細を開きたい。

利用者が困る例 縦向きでしか使えない

横向きでは案内を読めず、操作もできない。
縦向きでは講座の日時と詳細ボタンが表示されます。横向きでは回転を求める案内だけになり、端末を回せない人は先へ進めません。

改善した例 どちらの向きでも使える

縦向き

写真教室

11月20日 10:00
会場:第2教室

詳細を確認

横向き

写真教室

11月20日 10:00
会場:第2教室

詳細を確認

横向きのまま案内を読み、詳細へ進める。
端末を回せなくても、日時と会場を確認し、詳細を開けます。

図:同じ写真教室の案内を比較した静止図。「改善した例」では両方の向きで同じ情報と詳細を開く機能を利用できる状態を示しています。図のボタンは操作できません。端末の回転や自動表示切替を再現するものではありません。

達成できないと起こる問題の例

車椅子に端末を横向きで固定している人が、写真教室の案内を開きます。ページには「縦向きにしてください」とだけ表示され、講座の日時や「詳細を確認」ボタンは使えません。

この人は端末を自分で回せないため、案内を読んで次の画面へ進めません。端末を回すように求める文章があっても、その向きでコンテンツを利用できない問題は残ります。

達成するための改善例

同じ写真教室の案内を、縦向きと横向きのどちらでも表示し、操作できるようにします。横向きで端末を固定している人も、日時や会場を読み、「詳細を確認」ボタンを使えます。

画面の向きに合わせて配置を変えることはできます。この例では講座名・日時・会場と、詳細を開く機能をどちらの向きでも利用できます。

確認のポイント

  • 縦向きと横向きの両方で、ページを読んで操作できますか。
  • 一方の向きで、端末を回すように求める案内だけが表示されていませんか。
  • ページやアプリ側の向きの固定を、利用者が解除する手段はありますか。
  • 向きを制限する場合、特定の向きが必要不可欠で、適合するほかの方法では情報や機能を提供できないことを確認しましたか。

条件と補足

必要不可欠な場合の例外

向きの制限を取り除くと情報や機能が根本的に変わり、適合するほかの方法でも提供できない場合は例外です。「横長のほうが見栄えがよい」といった理由だけで、この例外にはなりません。

公式資料では必要不可欠になり得る例として、小切手の撮影、ピアノのアプリ、プロジェクターやテレビ向けのスライド、VR(仮想現実)のコンテンツを挙げています。例えば、ピアノの鍵盤の間隔を保って使うために横向きが必要な場合です。これらの種類なら常に例外になると決めず、そのコンテンツの情報や機能で判断します。

利用者自身が向きを固定する設定

利用者が端末の設定で画面の回転を止めることと、制作者が一方の向きに制限することは別です。利用者が選んだ向きのまま使えるようにします。

公式の達成方法G214にはコンテンツ側で向きを固定する場合に、利用者がコンテンツの向きを変更できる操作部品を用意する方法があります。切替ボタンをすべてのページに付けることが必須という意味ではありません。同資料ではコンテンツ側で制限せず、利用者が端末の回転ロックを使えるようにする方法が通常は望ましいとしています。

画面幅への対応との違い

この基準は表示の向きの制限を扱います。画面の大きさによる内容や機能の変更は、この基準の対象とは分けて確認します。例えば、狭い画面で横にはみ出さずに読めるかは、1.4.10「リフロー」なども確認します。

この改善例は写真教室の案内を両方の向きで利用できることについての例です。ページやサイト全体のWCAG適合を示すものではありません。

参照資料

テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。

出典の最終確認: 2026-11-08。写真教室の案内はこの教材のために作った架空の例です。