この記事でわかること

  • 画面の向きについて定めた、WCAGの達成基準1.3.4の内容
  • 向きを固定してよい例外と、失敗になる作り
  • 縦でも横でも内容を出したまま、並べ方だけを変える書き方
  • 横向きで内容を隠す作りと、ブラウザで比べた結果

スマホで見たときにレイアウトが崩れるからと、横向きにしたら「縦向きでご覧ください」とだけ出るページを作っていませんか。車いすに端末を固定していて、向きを変えられない人もいます。この記事では、どちらの向きでも内容を見て操作できるようにする方法を、WCAGの達成基準1.3.4を軸に整理します。

根拠は、W3Cが公開している達成基準1.3.4の解説(Understanding)と、失敗例F97・F100です。2026年10月31日に原文を読みました。比べたページは、この記事のために作った見本です。ツールやスクールを選んで勧めることはしません。

先に結論: 向きで内容を隠さず、並べ方だけを変える

縦向きでも横向きでも、すべての内容を出したままにします。 向きに合わせて変えてよいのは、列の数や余白などの並べ方です。向きが欠かせないごく一部の内容だけが例外です。

作り 基準との関係
縦は1列、横は2列に並べ直す 満たす
横向きで内容を隠し、案内だけを出す 失敗(F100)
どちらかの向きに表示を固定する 失敗(F97)
ピアノのアプリを横向きに限る 例外になりうる

画面の向きに関わる基準(1.3.4)

WCAG 2.2の達成基準1.3.4(レベルAA)は、表示の向きが欠かせない場合を除いて、内容の見え方や操作を、縦向きや横向きのような1つの向きに限らないことを求めています。

解説では、この基準のねらいを、利用者が選んだ向きで内容が表示されるようにすることだとしています。電動車いすの腕の部分のように、端末を決まった向きに取り付けて使う人がいるためです。見えにくさのある人が、横向きにして文字を大きくして読む使い方も挙げられています。

なお、画面の大きさによる内容や機能の変化は、この基準の対象ではないとされています。

向きを固定してよい例外と、失敗になる作り

基準の注記では、向きが欠かせない例として、小切手、ピアノのアプリ、プロジェクターやテレビ向けのスライド、仮想現実の内容を挙げています。銀行のアプリで小切手を撮る場面は、横長の紙を写すため、横向きが欠かせない例とされています。

失敗例F97は、内容の表示を縦か横の1つの向きに固定することを失敗としています。F100は、望まない向きを見つけたときに、内容の向きを変える代わりに、端末を回すよう案内を出すだけの作りを失敗としています。F100では、向きを見つけて対応すること自体は問題ではないとも書かれています。

書き方の例: 向きに合わせて列の数を変える

次のHTMLは、4つのカードを、縦向きでは1列、横向きでは2列に並べる例です。向きでは並べ方だけを変え、どのカードも隠しません。

<style>
  .cards {
    grid-template-columns: 1fr;
    display: grid;
    gap: 1rem;
  }
  /* 横向きでは2列に並べ直す。内容は隠さない */
  @media (orientation: landscape) {
    .cards {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>
<main class="cards">
  <section><h2>受付の流れ</h2></section>
  <section><h2>料金の目安</h2></section>
  <section><h2>よくある質問</h2></section>
  <section><h2>お問い合わせ</h2></section>
</main>

CSSのorientationの判定について、F100では、高さが幅と同じか大きいときは縦向き、それ以外は横向きになると説明しています。

手順: 自分のサイトの向きの扱いを見直す

  1. 向きで分けているCSSを探す: orientationを使ったメディアクエリを書き出します
  2. 隠していないかを見る: その中で、display:noneなどで内容を消していないかを確かめます
  3. 案内だけを出していないかを見る: 「縦にしてください」のような表示に切り替えていないかを確かめます
  4. 例外かどうかを分ける: その向きが内容に欠かせないかを、基準の例と比べて決めます
  5. 両方の向きで開く: スマホやタブレットを縦と横にして、同じ内容が見られて操作できるかを確かめます

試した結果

比べたのは、上のHTMLと、同じカードを横向きのときだけ隠して「縦向きでご覧ください」と出す版の2つです。どちらも作業PCの中だけで動くWebサーバーから出し、画面を出さないChromeで開きました。画面の大きさは、縦長(390×844)・横長(844×390)・正方形(500×500)の3通りです。

  • 本文の例では、縦長でカードが4枚とも1列に並び、横長では4枚とも2列に並びました
  • 隠す版では、縦長ではカードが4枚とも見えましたが、横長では見えるカードが0枚になり、案内の文だけが出ました
  • 正方形の画面では、orientationの判定が縦向き(portrait)になりました

使ったのはMacの作業PCのGoogle Chrome 156で、画面は出していません。実機のスマホやタブレットを回して確かめてはいません。

自分で直すか、相談するかの判断

目安は、「向きを変えたときに消えているものが、並べ方の都合だけで隠されているか」です。列の数や余白で収まるなら、隠す指定を外して並べ直すだけで直せます。

ゲームや図面のように、その向きでないと成り立たないと考えて固定している場合は、本当に欠かせないかを、作った人や発注した人と相談して決めます。固定を外すと崩れる部分が多いときは、CSSの組み直しになります。Webデザインを学べる講座で、レスポンシブの組み方を見てもらう方法もあります。

つまずきやすいところ

まとめ

  • 縦向きでも横向きでも、すべての内容を出したままにします
  • 向きで変えてよいのは、列の数や余白などの並べ方です
  • 横向きで内容を隠して案内だけを出す作りは、失敗例F100に当たります
  • 小切手やピアノのアプリのように、向きが欠かせない内容だけが例外です