logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

コンテンツを非表示にする

23/04/2020, by maria

コンテンツを非表示にすることは、アクセシビリティにとって非常に役立ちます。物を視覚的に非表示にしてスクリーンリーダーのユーザーにのみ表示することも、スクリーンリーダーのユーザーからコンテンツを非表示にして視覚的にのみ表示することも、両方からコンテンツを非表示にすることもできます。Drupalには、意図を明確にするのに役立つ組み込みのCSSクラスがいくつか付属しています。多くの場合誤用される{ display:none; }の使用はお勧めしません。

テクニック     視覚的に             非表示     スクリーンリーダーで非表示 追加情報

CSS: 

<div class="visually-hidden"></div>

            はい                    いいえ

これはDrupal 8に組み込まれています。Drupal 7ではclass="element-invisible"でした。

CSS: 

<div class="hidden"></div>

            はい                     はい

これはDrupal 8に組み込まれています。Drupal 7ではclass="element-invisible"でした。

HTML5属性: 

<div hidden></div>

            はい                     はい

サポートされているブラウザでは、これはCSSの{ display:none; }と同じです。

ARIA属性: 

<div aria-hidden="true"></div>

            いいえ                     はい 最新のブラウザに組み込まれています。HTML5のhidden属性と非常に似ています

CSS: 

<div class="visually-hidden focusable"></div>

            はい                     はい これはDrupal 8に組み込まれています。Drupal 7ではclass="element-invisible element-focusable"でした

 

この形式は18Fの非表示コンテンツのページから取得されています。