適用 (対象)
この達成方法は、カスケーディングスタイルシート / HTML 技術に適用される。
これは達成基準 1.3.4: 表示の向き (失敗例) に関する達成方法である。
解説
これは、望ましくないと考えられるデバイスの向きが検出された場合、コンテンツ制作者が、コンテンツすべての向きを変更する代わりに利用者にデバイスの向きを変更するよう指示するメッセージを表示したときに起こる、失敗条件を記述するものである。
利用者のデバイスの向きを検出して対応すること自体は問題ではない。コンテンツを一つの方向でのみ提供するというコンテンツ制作者の判断が、達成基準 1.3.4 表示の向きの要件を満たさないことになる。検出されたデバイスの向きに対して、利用者にデバイスを回転させるよう指示するメッセージを表示するだけでは、不十分である (根底にあるアクティビティに回転が必要不可欠でない場合) 。達成基準を満たすためには、コンテンツ制作者が管理するコンテンツ全体の向きが変更される必要がある。
コンテンツが横向きなのか縦向きなのかをデバイスが判断するには、様々な方法がある。その方法の一つは、ビューポートの幅と高さのアスペクト比を調べることである。つまり、横幅が縦幅よりも小さいか大きいかを調べる。CSS メディア特性 orientation は、height の値が width の値と同じ又はそれ以上の場合、 portrait になる。それ以外の場合は、高さメディア特性の値が幅メディア特性の値以上であれば縦向きになる。それ以外の場合は、orientation は landscape になる。
事例
例 1: HTML 及び CSS を用いて、向きの変更を妨げる (門前払いにする)
以下の例では、HTML 及び CSS を用いて、landscape の場合に、デバイスの向きを変更するよう促すメッセージを表示している。
向きを portrait に変更すると、メッセージは消える。portrait プロパティがメディアクエリで定義されたビューポート空間と一致した場合、メッセージは消える。逆の場合も同様である。この例では、CSS のメディアクエリプロパティ landscape と portrait を使用している。
<style>
/* Orientation "door slam" Styling */
@media all and (orientation: landscape) {
.rotate { display: block; }
.content { display: none; }
}
@media all and (orientation: portrait) {
.rotate { display: none; }
.content { display: block; }
}
.rotate {
text-align: center;
font-size: 2rem;
margin-top: 4rem;
}
/* Orientation "door slam" HTML */
<div class="rotate">
Please rotate your device!
</div>
<div class="content">
...
</div>
検証
手順
- コンテンツを横向きで開く。デバイスの向きを変更するように促すメッセージが表示されているかを確認する。
- コンテンツを縦向きで開く。デバイスの向きを変更するように促すメッセージが表示されているかを確認する。
- コンテンツの閲覧及び操作に、縦向き又は横向きの表示が必要不可欠であるかどうかを確認する。
期待される結果
手順 #1 又は #2 が真であり、かつ #3 が偽である場合、この失敗条件が適用され、コンテンツは達成基準を満たさないことになる。