🏗️

構造的ロール

構造的ロールは、ページの構造を記述するために使用され、通常はドキュメントコンテンツに使用されます。

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

概要

構造的ロールは、ページ上のコンテンツの構成を説明します。ランドマークロール（主要なセクションを識別）やウィジェットロール（インタラクティブな要素を説明）とは異なり、構造的ロールは支援技術がドキュメント内の要素間の関係を理解するのを助けます。

一般的な構造的ロール

ロール	目的	HTML相当
`heading`	セクション見出し	`<h1>` - `<h6>`
`list`	項目のリスト	`<ul>`, `<ol>`
`listitem`	リスト内の項目	`<li>`
`group`	関連する要素	`<fieldset>`
`separator`	視覚的な区切り	`<hr>`
`img`	画像コンテンツ	`<img>`
`figure`	自己完結型コンテンツ	`<figure>`

ARIA構造的ロールを使用するタイミング

まずネイティブHTMLを使用

ネイティブHTML要素には暗黙的なロールがあります：

<h2>セクションタイトル</h2>
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<hr />

これらの要素は自動的に暗黙のロールを持ちます: h2 → heading (level 2), ul → list, li → listitem, hr → separator

カスタム構造にはARIA

HTMLセマンティクスが合わない場合はARIAを使用：

<div role="heading" aria-level="2">カスタムセクションタイトル</div>

<div role="list">
  <div role="listitem">項目1</div>
  <div role="listitem">項目2</div>
</div>

グループロール

要素間の関係を確立するために group を使用：

<div role="group" aria-labelledby="address-heading">
  <h3 id="address-heading">配送先住所</h3>
  <label>番地: <input type="text" /></label>
  <label>市区町村: <input type="text" /></label>
</div>

<div role="group" aria-label="テキスト配置">
  <button>左揃え</button>
  <button>中央揃え</button>
  <button>右揃え</button>
</div>

見出しレベル

カスタム見出しの aria-level

role="heading" を使用する場合はレベルを指定：

<div role="heading" aria-level="3">これはh3のように動作します</div>

レベルをスキップしない

論理的な見出し階層を維持する：

<h2>メインセクション</h2>
<h4>サブセクション</h4>

悪い例: h2 から h4 へのスキップは論理的な見出し階層を壊します。

<h2>メインセクション</h2>
<h3>サブセクション</h3>

良い例: 適切な階層 — h3 がレベルをスキップせずに h2 に続きます。

セパレーターロール

フォーカス可能 vs フォーカス不可能

<hr />
<div role="separator"></div>

フォーカス不可能なセパレーター — 視覚的な区切りとしてのみ機能します。

<div
role="separator"
tabindex="0"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
aria-label="パネルのリサイズ"
></div>

フォーカス可能なセパレーター — リサイズ可能なスプリッターとして機能します。tabindex を追加すると範囲プロパティが必要な値ウィジェットになります。

実装のポイント

none と presentation ロール

role="none" や role="presentation" を使用するタイミングについては、セマンティクスの無効化プラクティスを参照してください。

ドキュメントモード vs アプリケーションモード

デフォルトでは、スクリーンリーダーは読み取り用の「ドキュメントモード」を使用します。application ロールはキーボード処理用の「アプリケーションモード」に切り替えます。控えめに使用し、本当に必要な場合にのみ使用してください。

<div role="application">
...
</div>

めったに必要ありません — カスタムキーボードハンドラーを提供する必要があります。注意して使用してください。

よくある間違い

誤ってリストセマンティクスを削除

CSSによって一部のブラウザで暗黙的なリストセマンティクスが削除される可能性があります：

ul {
list-style: none;
}

Safari でリストセマンティクスが削除される可能性があります。

明示的なロールで修正：

<ul role="list" style="list-style: none;">
  <li>リストアイテムとして読み上げられる</li>
</ul>

ARIA構造的ロールの過剰使用

<div role="list">
<div role="listitem">項目</div>
</div>

悪い例: 不要な ARIA — ネイティブ HTML 要素がすでにこれらのロールを提供しています。

<ul>
<li>項目</li>
</ul>

良い例: ネイティブ HTML が自動的に正しいロールを提供します。

不正な見出し階層

スクリーンリーダーユーザーはしばしば見出しでナビゲートします。見出しレベルは視覚的なスタイリングではなく、ドキュメント構造を反映するようにしてください。

概要