🏗️

構造的ロール

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

このプラクティスの詳細は 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>
<!-- role="heading" aria-level="2" -->
<ul>
  <!-- role="list" -->
  <li>項目1</li>
  <!-- role="listitem" -->
  <li>項目2</li>
</ul>
<hr />
<!-- role="separator" -->

カスタム構造にはARIA

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

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

<!-- 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からh4にスキップ -->
<h2>メインセクション</h2>
<h4>サブセクション</h4>

<!-- 良い例: 適切な階層 -->
<h2>メインセクション</h2>
<h3>サブセクション</h3>

セパレーターロール

フォーカス可能 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によって一部のブラウザで暗黙的なリストセマンティクスが削除される可能性があります：

/* Safariでリストセマンティクスが削除される可能性あり */
ul {
  list-style: none;
}

明示的なロールで修正：

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

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

<!-- 悪い例: 不要なARIA -->
<div role="list">
  <div role="listitem">項目</div>
</div>

<!-- 良い例: ネイティブHTML -->
<ul>
  <li>項目</li>
</ul>

不正な見出し階層

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

概要