🙈

presentation ロールによるセマンティクスの無効化

presentation ロールは、コンテンツを表示したまま、暗黙の ARIA セマンティクスをアクセシビリティツリーから削除します。

このプラクティスの詳細は Hiding Semantics with the presentation Role - WAI-ARIA APG を参照してください。以下は、このサイトの実装例に基づく補足解説です。

概要

presentation ロール（およびその同義語 none）は、要素の暗黙的なARIAセマンティクスをアクセシビリティツリーから削除します。これは要素の視覚的な外観がセマンティックな意味と一致しない場合に便利ですが、支援技術ユーザーから重要な情報を隠さないよう注意して使用する必要があります。

presentation/none を使用するタイミング

装飾的な画像

コンテンツを伝えない画像：

<img src="decorative-border.png" alt="" />

装飾的な画像には空のaltが推奨されます。

<img src="decorative-border.png" role="presentation" />

または presentation ロールを使用します。

レイアウトテーブル

視覚的なレイアウトのみに使用されるテーブル：

<table role="presentation">
  <tr>
    <td>左カラムのコンテンツ</td>
    <td>右カラムのコンテンツ</td>
  </tr>
</table>

冗長なコンテナ要素

親要素のロールが冗長な場合：

<div role="tablist">
<ul role="presentation">
  <li role="presentation">
    <button role="tab">タブ1</button>
  </li>
  <li role="presentation">
    <button role="tab">タブ2</button>
  </li>
</ul>
</div>

スタイリングのために ul/li を使用したタブパネル — ul と li のロールは presentation で削除されます。

presentation vs none

これらのロールは同義です：

<div role="presentation">...</div>
<div role="none">...</div>

両方とも同等です。

role="none" は意図を明確にするために導入されました。role="presentation" は古い支援技術でより広くサポートされています。

presentation/none が削除するもの

要素	元のロール	presentation 後
`<table>`	table	none
`<ul>`	list	none
`<li>`	listitem	none
`<img>`	img	none

重要: ロールは要素自体にのみ影響し、その子孫には影響しません（必須の子要素を除く）。

必須の子要素も非表示になる

一部のロールには自動的に非表示になる必須の子要素があります：

<table role="presentation">
<tr><td>...</td></tr>
</table>

tbody, tr, td のロールも削除されます。table の必須の子要素であるためです。

<ul role="presentation">
<li>...</li>
</ul>

li のロールも削除されます。listitem は list の必須所有要素であるためです。

presentation/none が非表示にできないもの

フォーカス可能な要素

要素がフォーカス可能な場合、role="presentation" は無視されます：

<button role="presentation" tabindex="0">まだボタン</button>

tabindex があるため role="presentation" は無視されます。

<a href="/page" role="presentation">まだリンク</a>

href 付きのリンクはフォーカス可能なため、ロールは無視されます。

グローバルARIA属性を持つ要素

aria-label、aria-describedby、その他のグローバルARIA属性が存在する場合：

<img role="presentation" aria-label="重要な情報" />

グローバルARIA属性が存在する場合、role="presentation" は無視されます。

実装のポイント

装飾的なアイコンボタンを非表示にする

<button type="button" aria-label="閉じる">
<svg aria-hidden="true">...</svg>
</button>

アイコンは装飾的です — aria-hidden="true" で支援技術から非表示にします。

支援技術から完全に非表示にしたいコンテンツには、role="presentation" ではなく aria-hidden="true" を使用します。

冗長なテキストを非表示にする

<button>
<svg aria-hidden="true">...</svg>
<span class="visually-hidden">閉じる</span>
閉じる
</button>

可視テキスト「閉じる」がアクセシブルな名前を提供します。

よくある間違い

意味のあるコンテンツを非表示にする

<img src="chart.png" role="presentation" alt="売上チャート" />

悪い例: コンテンツを伝える重要な画像を非表示にしています。

<img src="chart.png" alt="20%成長を示す売上チャート" />

良い例: 意味のある画像は説明的な alt テキストでアクセシブルに保ちます。

インタラクティブ要素に presentation を使用

<button role="presentation">クリック</button>

悪い例: ボタンはフォーカス可能なのでロールは無視されます。

完全な非表示に aria-hidden を忘れる

<div role="presentation">テキストコンテンツ</div>

これはまだアクセシビリティツリーに表示されます — ロールのみが削除されます。

<div aria-hidden="true">テキストコンテンツ</div>

これは支援技術から完全に非表示になります。

要素とそのコンテンツの両方を支援技術から非表示にしたい場合は aria-hidden="true" を使用します。

概要