【テクニカル・上級編】role=’presentation’と’none’の使い分け – HTML実践ガイド

例えば、`aria-label`を持たないアイコン付きのリンクにおいて、アイコンが「グラフィック」として読み上げられるのはノイズでしかありません。ここで私たちは「セマンティクスの引き算」を行う必要があります。

—

2. `presentation` vs `none`：仕様上の厳密な差

W3Cの仕様において、`role=”presentation”` と `role=”none”` は機能的には完全に同等です。しかし、歴史的な経緯と「役割の明確化」という観点で使い分けるのが上級者の嗜みです。

• `role=”none”`: 「この要素には役割がない」と明示的に宣言します。直感的であり、現代的なコードベースではこちらが推奨されます。
• `role=”presentation”`: その要素を「プレゼンテーション（見栄え）のためだけのもの」と定義します。古くからある属性であり、一部の古いATとの互換性に配慮する場合に有効です。

重要な設計原則:
もしその要素に `tabindex` を付与したり、`aria-` 属性で別の意味を持たせようとした場合、ブラウザのアクセシビリティツリーはこれらを無視します。「意味を消すと決めたなら、徹底的に無害化する」。これがバグを回避する唯一の道です。

—

3. 実践：堅牢なコンポーネント設計とTypeScript

装飾用コンポーネントを作る際、最も避けるべきは「propsの汚染」です。セマンティクスを剥奪する要素に、クリックイベントやフォーカス制御を混在させてはいけません。

以下は、TypeScriptを用いた安全かつパフォーマンスを意識した実装例です。

import React from ‘react’;

/

• 装飾専用のアイコンラッパー
• セマンティクスを完全に剥奪し、ブラウザのレンダリング負荷を最小化する

/
interface DecorativeIconProps {
children: React.ReactNode;
className?: string;
}

export const DecorativeIcon: React.FC = ({ children, className }) => {
return (

{children}

);
};

—

4. パフォーマンスとブラウザエンジンの内部挙動

ここでエンジニアとして注目すべきは、「DOMの肥大化とリフロー」です。

`role=”none”` を付与することで、ブラウザはアクセシビリティツリーの構築コストを削減できます。特にDOMノードが数千個単位で存在する巨大なアプリケーションでは、無用なセマンティックノードを排除することで、アクセシビリティツリーの再計算プロセス（Recalculate Accessibility Tree）を軽量化できます。

また、非同期の競合にも注意してください。Reactの `Suspense` や `lazy` ローディングでDOMが動的に差し替わる際、`role` の解決がレンダリングに遅延をもたらすエッジケースが存在します。常に静的な属性として定義し、実行時に動的に `role` を変更するような（アンチパターンの）設計は避けるべきです。

—

5. まとめ：スペシャリストとしての視点