コンテンツを正しく非表示にする
すべてのコンテンツ非表示方法が、スクリーンリーダーやその他の支援技術のユーザーに適しているわけではありません。このページでは、すべてのユーザーとスクリーンリーダーのユーザーのためのコンテンツ非表示の主要な方法について説明します。
コンテンツを見えなくする（視覚的に非表示にする）
ページ上の要素が：
- インタラクティブな要素であるが、スタイルを適用できるように見えなくする必要がある場合（例えば、カスタムスタイル付きのリンク、チェックボックス、ラジオボタン、フォームコントロール）、
- 目的が明らかなものの見出しまたはラベルであり（したがって、見出し/ラベルを視覚ユーザーに表示する必要がない場合。例えば、セクションのラベルやフォーム要素のラベル）、
- 視覚ユーザーには見えるべきではないが、スクリーンリーダーのユーザーには見える必要がある場合、
...その場合、要素を見えなくする（視覚的に非表示にする）必要があります。
これを行うには、次の方法があります：
要素にvisually-hiddenクラスを付与する、
Drupal 8では、エンティティサブタイプの表示管理ページでフィールド（例えば、Articleコンテンツタイプの「Tags」フィールド）を設定して、フィールドラベルを「- Visually Hidden -」に設定する、
CSSを使用してページの表示領域外に配置する、または、
CSSを使用する
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;を要素に適用します。
例：
エラーメッセージ、警告、ステータスの見出しを非表示にする。
根拠：
ほとんどのテーマでは、ステータスメッセージは色付きのボックス内の目立つ場所に表示されるため、視覚ユーザーの注意を引きます。ただし、WCAG 2.0のセクション1.3.3に従い、理解と操作のためのコンテンツは、形、サイズ、視覚的な配置、方向などのコンポーネントの感覚的特性のみに依存してはなりません。
これらがどのようなステータスメッセージであるかを示す見出しがないと、スクリーンリーダーのユーザーを混乱させる可能性があります。
ほとんどのスクリーンリーダーは、ページ上の見出しを使用してページをスキップできます。メッセージに見出しを付けると、メッセージを簡単に見つけられるようになります。
誰かがキーボードでフォーカスするまでコンテンツを見えなくする
ページ上の要素が：
- ユーザーがメインコンテンツまたはメインナビゲーションに移動するのに役立つリンクである場合、
- マウスでしか使用できない他の要素の代替である場合、または、
- キーボードでページをナビゲートしていない限り、視覚ユーザーに見えるべきではない場合、
...その場合、誰かがキーボードでフォーカスするまで要素を見えなくする必要があります。
これを行うには、次の方法があります：
- 要素にvisually-hiddenとfocusable の両方のクラスを付与する、または、
- CSSを使用する
css_selector_for_my_element {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
width: auto;
}css_selector_for_my_elementは、誰かがキーボードでフォーカスするまで見えなくしたい要素のセレクタです。
例：
コアテーマの各ページ上部にある「メインコンテンツへスキップ」リンク。
根拠：
キーボードのみとスクリーンリーダーを使用するユーザーは、ページのメインコンテンツにすばやく移動したいと考えています。
WCAG 2.0のセクション2.4.1の基準に準拠するには、複数のページで繰り返されるコンテンツブロックをスキップする方法を提供する必要があります。
すべてのユーザーからコンテンツを完全に非表示にする
ページ上の要素が：
- JavaScriptイベントが表示するまで表示すべきでない場合、
- 文脈上、視覚ユーザーにもスクリーンリーダーユーザーにも関係がない場合、
- JavaScriptが読み取り/書き込みする値が含まれているが、直接表示されるべきではない場合、または、
- 一般的に、視覚ユーザーにもスクリーンリーダーユーザーにも見えるべきではない場合、
...その場合、すべてのユーザーから完全に非表示にする必要があります。
これを行うには、次の方法があります：
- 要素にhiddenクラスを付与する（D8）、
- エンティティサブタイプのフィールドの場合、そのサブタイプの表示管理ページでフォーマットを「- Hidden -」に設定する、
- エンティティサブタイプのフィールドラベルの場合、そのサブタイプの表示管理ページでラベルの表示を「- Hidden -」に設定する、または、
- CSSのdisplay: none;を使用する。
例：
Javascriptが実行される前にカラーモジュールのプレビュー領域を非表示にする：
/* color.css (Drupal 7 and 8) */
#preview {
display: none;
}根拠：
JavaScriptが動作しない場合、プレビューは機能しないため、誰にも必要ありません。
誤用
「display:none」の一般的な不適切な使用法は、ページの外観を変更するためにフォームのラベルや見出しを削除することです。ただし、これによりフォーム要素はスクリーンリーダーのユーザーにとって使用不能になります！
例えば、「display:none」でフォームラベルを削除すると、スクリーンリーダーのユーザーはこう言うかもしれません。「必須のテキスト入力フィールドがありますが、このフィールドが何のためのものかまったくわかりません。」この状況では、コンテンツを見えなくする（視覚的に非表示にする）方がより適切です。
スクリーンリーダーからコンテンツを見えなくする
ページ上の要素が：
- それ自体が混乱を招く場合、または、
- 視覚ユーザーにのみ見える必要がある場合、
...その場合、スクリーンリーダーから見えなくする必要があります。
これを行うには、次の方法があります：
- 要素にaria-hidden="true"属性を付与する
例：
検索フィルタを削除するためのコントロールは、視覚ユーザーにのみ「x」を表示し、スクリーンリーダーのユーザーにアクセシブルな視覚的に非表示の指示を提供します：
Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>根拠：
アクセシブルな代替テキストがすでにあります。
代替テキストを聞いた後でも、「x」だけを聞くことは、スクリーンリーダーのユーザーを混乱させる可能性があります。
誤用
スクリーンリーダーから見えないコンテンツを作成することは、それを使用する人々がそれを認識したり操作したりできないことを意味します。WCAG 2.0のセクション1.1の要件を満たすには、アクセシブルな代替コンテンツを提供する必要があります。そうしないと、支援技術を使用する人々はそれを使用できません。