css-orientation-lock

CSSでページの表示の向きを1つに固定してはいけません

automaticWCAG 1.3.4 (AA)確度：high重大度：seriousperceivable

@media (orientation: portrait|landscape)のルールがページにtransform: rotate(...)を設定していないことを確認します。これは端末の向きを無効にする既知の手法です。また、ページの主要なコンテンツを隠すそのようなルールについて確認を求めます。

適用範囲：アクセス可能な（同一文書内の、クロスオリジンでない）すべてのスタイルシート。インラインの<style>ブロックと、document.styleSheetsに読み込み済みの同一オリジンの<link>スタイルシート、文書が採用したスタイルシート、および開いている各シャドウルートのスタイルシート（そのルールはそのルートの要素に対して照合します）が該当します。

期待される結果：@media (orientation: portrait)や@media (orientation: landscape)のブロックで、約90度（180で割った余り、つまり約90度または約270度）のtransform/-webkit-transform/rotateによる回転を設定しているものはありません。これはデバイスの実際の向きに関係なく、見た目上1つの向きを強制するよく知られた手法です。WCAG 1.3.4は、その向きが必須でない限り、コンテンツの表示を単一の表示の向きに制限しないことを求めており、この手法はそれに反します。そのような回転は、そのセレクターに一致する可視の要素について判定します（ACT b33eff）。可視性は回転そのものを除いて判定します。そのうちの1つがページのコンテンツ（定義は後述の隠されたコンテンツと同じ）を含む場合は不合格となり、それ以外の要素がそのように回転している場合は確認を求めます（cantTell）。一方の向きでは横にあり、もう一方の向きでは下にあるパネルを指す矢印は、何も固定しません。可視の要素を1つも回転させないルール、または疑似要素だけを回転させるルールには、判定する対象がありません。2つ目の形についても確認を求めます（cantTell）。display: noneやvisibility: hiddenでページのコンテンツを隠す向きのメディアブロックで、WCAG F100のよくある形です（一方の向きでコンテンツが「rotate your device」のようなメッセージに置き換わる）。隠された要素がページのコンテンツとみなされるのは、htmlかbody、mainランドマーク、その祖先、またはmainランドマークがないページではbodyのテキストの半分以上を含む要素である場合です。ページに<main>もrole="main"もない場合は、ElementInternalsによってmainロールを与えられたカスタム要素（this.attachInternals().role）をmainランドマークとします。その向きが必須かどうか、ページが使える状態のままかどうかは、人が判断します。

検出結果が報告する内容：

mediaText（回転または非表示のコンテンツ）：ルールを含むメディアクエリです（例：(orientation: portrait)）。ページのコンテンツを含まない要素の回転は、その要素に対して報告されます（ORIENTATION_MEDIA_ROTATES_ELEMENT）。
selectorText（回転または非表示のコンテンツ）：回転させる、または隠すスタイルルールのセレクターです。読み取れなかった場合は空です。
unreadableSheetCount（STYLESHEETS_NOT_READABLE）：読み取れなかったスタイルシートの数です。通常は別オリジンのものであることが原因です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass

<html>
  <head>
    <title>Page title</title>
    <style>body { background: #fff; }</style>
  </head>
  <body>Hi</body>
</html>

ページを回転させる向きのメディアクエリはありません。

fail

<html>
  <head>
    <title>Page title</title>
    <style>
      @media (orientation: landscape) {
        body { transform: rotate(90deg); }
      }
    </style>
  </head>
  <body>Hi</body>
</html>

横向きのメディアクエリが90度の回転を強制しており、デバイスの向きに関係なくページが縦向きに固定されます。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

`ORIENTATION_MEDIA_HIDES_CONTENT`

開発者ツールのデバイスツールバーまたは実機を使い、ページを縦向き、次に横向きで表示してください。
レポートに示された向きで、何が隠され、代わりに何が表示されるかを確認してください。
別のレイアウトなどによって、同じコンテンツと機能が引き続き利用できるか確認してください。
一方の向きが必須かどうか（ピアノのアプリや小切手の撮影など）を判断してください。

満たす場合：コンテンツはどちらの向きでも利用できるか、一方の向きが必須です。

満たさない場合：コンテンツが隠され、たとえば「端末を回転してください」というメッセージが表示されるため、その向きではページを使えず、WCAG 1.3.4を満たしません（F100）。

`ORIENTATION_MEDIA_ROTATES_ELEMENT`

レポートに示された要素を見つけ、それが何か（アイコン、バナー、パネル、コンテンツの一部）を控えてください。
開発者ツールのデバイスツールバーまたは実機を使い、ページを縦向き、次に横向きで表示してください。
一方の向きで要素が横倒しになるか、またそれによってコンテンツが読みにくく、使いにくくなるかを確認してください。

満たす場合：回転する要素は小さいか装飾的なもので、すべてのコンテンツをどちらの向きでも読んで使えます。

満たさない場合：一方の向きでコンテンツが横倒しになり、通常どおり読んだり使ったりできないため、WCAG 1.3.4を満たしません（ACT b33eff）。

`STYLESHEETS_NOT_READABLE`

開発者ツールのデバイスツールバーまたは実機を使い、ページを縦向きで表示してください。
横向きに切り替えて再読み込みし、その後元の向きに戻してください。
それぞれの向きで、すべてのコンテンツが正しい向きで表示されて読むことができ、「端末を回転してください」というメッセージに置き換えられていないことを確認してください。

満たす場合：ページはどちらの向きでもコンテンツを正しい向きで表示し、機能します。

満たさない場合：ページが一方の向きに固定されている（コンテンツが隠される、横倒しになる、またはメッセージに置き換えられる）ため、WCAG 1.3.4を満たしません。

ソースコードを見る