縦向きか横向きに画面の向きが固定されたページ

あるカフェの事前注文ページに、飲み物と食べ物が価格と「追加」ボタン付きで並んでいます。縦に持てば使えます。スマートフォンを横にすると、メニューが消えます。代わりに白い画面の中央に「スマートフォンを縦向きにしてご利用ください。」とだけ表示され、向きを戻すまで、ページのほかの部分は読むことも押すこともできません。

逆向きの固定もよくあります。座席表、ゲーム、スライドショーのように横長の画面向けに作られたページが、縦向きではCSSのtransformで自分を横倒しにします。文字は画面の上から下へ流れ、スマートフォンを横にしないと読めません。

達成基準1.3.4「表示の向き」はレベルAAで、WCAG 2.1で追加されました。コンテンツは、その向きが必須である場合を除き、表示と操作を縦向きか横向きの一方に制限してはなりません。W3Cは、ここで挙げた二つの形をどちらも不適合の例にしています。端末の向きを変えるよう求めるメッセージを表示するF100と、向きを固定するF97です。transformでページを回すことも、F97に含まれます。

この基準が対象とするのはページで、利用者自身の設定ではありません。スマートフォンの画面回転をロックしている人は自分で向きを選んでおり、固定のないページはその向きに従います。必須の例外の範囲は狭く、Understandingの文書が挙げるのは、横長の小切手を撮影する銀行のページと、縦向きでは鍵盤が小さくなりすぎるピアノです。「この向きのほうがきれい」は必須ではなく、片方の向きでしか描かれていないデザインも必須ではありません。

画面の大きさによる変化も対象外です。縦向きで1列、横向きで2列になるページは、何も制限していないため問題ありません。どちらの表示にも同じ内容と操作要素があります。

この固定は、max-height: 500pxのような高さの条件と組み合わされ、スマートフォンでだけ働くことがよくあります。マウントに固定された端末があるのはまさにそこで、デスクトップやノートパソコンでは、チームの誰も目にすることがありません。

10グループ中3グループに影響

• 全盲 （影響なし）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 届く範囲・力 （影響あり）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 届く範囲・力が限られる スマートフォンを持てない人や回せない人は、車いす、ベッド、机のマウントに一つの向きで固定して使います。逆の向きでしか使えないページは利用できず、回すよう求められても対応できません。
• 手の操作が限られる スイッチやヘッドポインターを使う人は、端末を目の前に固定し、周りの人に一度設定してもらっていることが多く、向きを変えるには誰かを待つ必要があります。
• 視覚が限られる 弱視の人は、文字を大きく、一行を長くするためにスマートフォンを横にすることが多く、横向きではページが消えてしまいます。

スキャナーはページを一つのウィンドウの大きさで一度読み込むだけなので、出会う向きは一つで、ページはその向きでは動きます。axeの向きのルールはtransformで回されたページを探しますが、実験的なルールで通常の実行には含まれず、メッセージの裏に隠された内容は探しません。EaseWebの診断は、各ページをスマートフォンの大きさで両方の向きに表示し、一方の向きで隠されたり覆われたりする内容を報告します。コーディングアシスタントに「縦向き専用にして」と頼むと、まさに不適合となるメディアクエリーを書き、1.3.4の修正を頼むと、メッセージの言い回しだけを和らげてページは隠したままにすることがあります。