【実務・中級編】hidden属性によるテキストの非表示制御 – HTML実践ガイド

「とりあえずdisplay: none」はもう卒業。`hidden`属性で制御する、モダンでセマンティックな非表示の作法

フロントエンド開発の現場で、「とりあえずこの要素を消したい」という時、真っ先に `display: none;` をCSSに書き込んでいませんか？

もちろん、それで見た目は消えます。しかし、アクセシビリティの観点や、HTMLの「意味」というレイヤーで考えると、CSSによる非表示には限界があります。今回は、HTML5から正式に導入された `hidden` 属性にスポットを当て、なぜ今これを使うべきなのか、ブラウザの裏側で何が起きているのかを深掘りしていきましょう。

1. `display: none` と `hidden` 属性の決定的な違い

CSSの `display: none` は、あくまで「描画エンジン（レンダリングツリー）」に対して「ここには何も描画するな」と命令するものです。対して `hidden` 属性は、HTMLのマークアップレベルで「この要素は現在、関連性がない（Not Relevant）」と宣言するものです。

ブラウザの内部処理において、`hidden` 属性が付与された要素は、仕様上 `display: none` が適用されたのと同等の扱いになります。しかし、重要なのはその「宣言の意図」です。

アクセシビリティ上の挙動

`hidden` 属性は、モダンブラウザのアクセシビリティツリーに対して「この要素は無視してくれ」と明確に伝えます。スクリーンリーダーを利用しているユーザーに対して、その要素は完全に存在しないものとして扱われるため、意図せず読み上げられてしまうリスクを排除できます。

一方で、CSSだけで制御しようとすると、CSSが無効化された環境（稀ですが）や、読み上げ専用の複雑な設定によっては、意図しない挙動を生む可能性があります。「情報の重要度」が低いのであれば、HTML側でコントロールするのが、今のフロントエンドのスタンダードです。

2. 実践：`hidden` をスマートに扱うテクニック

実務では、UIの状態管理（モーダル、トースト通知、条件分岐によるフォーム表示など）でこの属性が活躍します。

ただ、ここで一つ注意点があります。CSSで `display: block !important;` を指定すると、`hidden` 属性よりも優先されて要素が表示されてしまいます。 チームで開発する際は、CSS側で「`hidden` が付いている要素には手を触れない」という共通認識を持っておくことが重要です。

実用的なコードサンプル

以下は、ReactやVueなどのフレームワークを使わず、バニラJSでUIの切り替えを行う際の実践的なパターンです。

3. シニアからのアドバイス：使い分けの極意

「じゃあ、全部 `hidden` 属性にすればいいのか？」というと、そうではありません。ここが中級者から一歩上へ行くための分かれ道です。

`hidden` 属性を使うべきケース:
その要素がコンテンツとして「現在無効である」ことが論理的に正しい場合。
JSでDOMを動的に生成・削除するようなUIコンポーネントの制御。
CSSの `display: none` を使うべきケース:
レスポンシブデザインにおける「モバイルでは消して、デスクトップでは出す」といった、「見た目の都合」で制御する場合。
アニメーション（フェードインなど）を伴う表示切り替えを行う場合。`hidden` 属性は属性の有無で制御するため、CSSアニメーションのトリガーにするには少々工夫が必要です。

まとめ

`hidden` 属性は、単なる `display: none` の置き換えではありません。「このデータは今、ユーザーにとって必要か？」をHTMLに語らせるためのセマンティックなツールです。

コードを書くとき、常に「これはCSSの仕事か？それともHTMLの仕事か？」と自問自答してみてください。HTMLを正しく使うことは、SEOやアクセシビリティだけでなく、あなたの書くコードの「読みやすさ」に直結します。ぜひ、次回の実装から積極的に取り入れてみてください。

現場のコードがより美しく、より意味のあるものになることを期待しています。