責任を持ってコンテンツを隠す

CSSに要素を非表示にする方法はたくさんあります。この記事では、いくつかの一般的で実用的な方法について説明し、適用可能なシナリオを分析します。多くの方法がありますが、各方法にはロジックと適用性があります。

まず、要素を完全に非表示にする必要があり、すべてのユーザー（スクリーンリーダーユーザーを含む）に表示されない場合は、 display: none; 。

第二に、画面読者からのみ要素を非表示にし、視覚的に見えるようにする必要がある場合（たとえば、補助タグの近くの意味のないアイコン）、 aria-hidden="true"属性を使用できます。

要素を視覚的に非表示にする必要があるが、画面リーダー（例えば、非アクティブタグのコンテンツ）に表示されたままである場合は、 .sr-onlyクラスを使用できます。このクラスは視覚的に隠されていますが、スクリーンリーダーにはまだアクセスできます。

要素を視覚的に非表示にする必要があるが、配置スペースを保持する必要がある場合（たとえば、ボタンにアニメーションアイコンをロードする）、 transform: scale(0); 。この方法は視覚的に要素を隠しますが、スクリーンリーダーがまだアクセスできる元のスペースを保持します。さらに、 transformプロパティをtransitionプロパティと組み合わせて、アニメーション効果を実現できます。

段階的な効果が必要な場合は、遷移効果があるopacity属性を使用できます。画面読者もフェードの要素を読むことを避けるために、 visibility属性と組み合わせて使用​​できます。 visibility: hidden;フェードするときは、 visibility: visible;フェードするとき。

要するに、上記の方法は、ほとんどのCSS隠された要素のニーズを満たすことができます。

以上が責任を持ってコンテンツを隠すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。