【実務・中級編】role=’presentation’と’none’の使い分け – HTML実践ガイド

「装飾のためのタグ」をアクセシビリティの死角にしない：`role=”presentation”` と `role=”none”` の正しい使い分け

現場でコーディングをしていると、「デザインを実現するためだけに、意味のない `span` や `a` を置いてしまう」という場面、どうしてもありますよね。

「アイコンを表示するためだけの `i` タグ」や、「レイアウトを整えるためだけの `span`」は、マークアップの現場では日常茶飯事です。しかし、これがアクセシビリティの文脈になると話は別です。スクリーンリーダーを使っているユーザーにとって、意味のない要素が読み上げられることは、ノイズ以外の何物でもありません。

今回は、そんな「意味のない要素」を、ブラウザのアクセシビリティツリーから静かに退場させるための `role=”presentation”` と `role=”none”` について、現場のリアルな知見を共有します。

—

そもそも、なぜそれらを「消す」必要があるのか？

HTMLの要素には、それぞれ「意味（セマンティクス）」が備わっています。例えば `` タグがあれば、スクリーンリーダーは「これはリンクです」とユーザーに伝えます。

しかし、デザイン上の都合で「ただの装飾としてアイコンを置いただけで、リンク先はない」というケースがあったとしましょう。このとき、スクリーンリーダーが「リンクです」と読み上げてしまうと、ユーザーは「どこかに行けるはずなのに、何も起きない」という混乱に陥ります。

こうした「見た目上のタグ」から「意味」を剥奪し、純粋な視覚情報へと変えるのが、今回紹介する `role` 属性の役割です。

—

`role=”presentation”` と `role=”none”` は同じなのか？

結論から言うと、機能面では完全に同じです。どちらを使っても、ブラウザは該当要素のセマンティクスを無効化し、その子要素を直接アクセシビリティツリーへ統合します。

では、なぜ2つも存在するのか？それは仕様の歴史的な経緯によるものです。

`role=”presentation”`: 古くからある指定方法です。直感的に「これは単なる表示用のものだ」と伝わりやすい名前ですね。
`role=”none”`: WAI-ARIA 1.1から導入されました。「presentation」という言葉が誤解を招きやすい（「表示」という言葉が「アクセシブルな意味」と混同される）ため、より中立的な「none（なし）」が追加されました。

現場での使い分け基準：
基本的にはどちらを使っても良いですが、モダンな開発環境であれば、`role=”none”` を選ぶのが今のトレンドです。より意図が明快だからです。ただし、古いブラウザとの互換性を極限まで気にするレガシーな案件であれば、`presentation` を選ぶという判断もありでしょう。

—

実践：現場で使える「クリーンな」コード例

実際に、アクセシビリティを損なわないための実装パターンを見てみましょう。

お気に入り登録

●

お問い合わせ

注意すべき「唯一の例外」

ここで一つ、シニアエンジニアとして強く釘を刺しておきたいポイントがあります。それは「インタラクティブな要素に `role=”none”` を当ててはいけない」ということです。

`` や `

まとめ：現場で意識すべきこと