HTML Living Standard/インタラクティブ・コンテンツ

インタラクティブ・コンテンツ

インタラクティブ・コンテンツ（Interactive Content）は、ユーザーと直接的なやり取りが可能なコンテンツのカテゴリを指します。この種のコンテンツは、ユーザーからの入力やアクションに応じて動作を変化させることができます。

定義

インタラクティブ・コンテンツは以下の役割を持ちます：

• ユーザーが入力を行ったり、選択肢を選んだりすることを可能にする。
• ウェブページにインタラクティブな要素を追加し、動的で応答性の高い体験を提供する。

このカテゴリに含まれる要素は、主にフォーム、リンク、スクリプトを含むものが一般的です。

インタラクティブ・コンテンツに含まれる要素

インタラクティブ・コンテンツとして使用される主なHTML要素は以下の通りです：

• リンク（Links）
  • <a>：ハイパーリンクを作成するための要素。

    例：

    <a href="https://example.com">リンクテキスト</a>
    

• フォーム関連要素（Forms）
  • <button>：押すことでアクションを実行するボタン。
  • <input>：ユーザーからの入力を受け取るための汎用的な要素。
  • <select>：ドロップダウンメニューを作成する要素。
  • <textarea>：複数行の入力欄を提供する要素。

    例：

    <form>
      <label for="name">名前:</label>
      <input type="text" id="name" name="name">
      <button type="submit">送信</button>
    </form>
    

• 埋め込みスクリプト（Scripted Content）
  • <script>：JavaScriptコードを埋め込む要素。
  • <noscript>：JavaScriptが無効な環境で表示される代替コンテンツ。

    例：

    <script>
      alert("ページが読み込まれました！");
    </script>
    

• 埋め込みフレーム（Embedded Interactive Content）
  • <iframe>：別のHTML文書を埋め込む要素。

    例：

    <iframe src="https://example.com" width="600" height="400"></iframe>
    

• 詳細情報と折りたたみ（Details and Summary）
  • <details>：折りたたみ可能なセクションを作成。
  • <summary>：折りたたみセクションのタイトル。

    例：

    <details>
      <summary>詳細を表示</summary>
       このセクションには追加情報が含まれています。
    </details>
    

• メニューとコマンド（Menus and Commands）
  • <menu>：メニュー項目を定義する要素（現在ほとんどのブラウザで非推奨）。
  • <dialog>：モーダルダイアログや非モーダルダイアログを作成。

    例：

    <dialog open>このダイアログは開いています。</dialog>
    

特性

インタラクティブ・コンテンツの主な特性は以下の通りです：

• フォーカス可能

  インタラクティブ要素は、ユーザーがフォーカスできるように設計されています。これにより、キーボードやスクリーンリーダーを使用したナビゲーションが可能です。

• イベントハンドリング

  インタラクティブ要素は、JavaScriptを使用してユーザーアクション（クリック、入力など）を検出し、それに応じて動作を変更できます。

• アクセシビリティ

  インタラクティブ・コンテンツは、スクリーンリーダーやキーボードユーザーのような補助技術を使用するユーザーにとっても操作可能であるべきです。

使用例

以下は、さまざまなインタラクティブ要素を使用したHTMLコードの例です：

<!-- ハイパーリンク -->
<a href="https://example.com">例へのリンク</a>

<!-- ボタン -->
<button onclick="alert('ボタンがクリックされました！')">クリック</button>

<!-- フォーム -->
<form>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">送信</button>
</form>

<!-- 折りたたみセクション -->
<details>
  <summary>さらに詳しく</summary>
  ここに詳細情報があります。
</details>

<!-- 埋め込みフレーム -->
<iframe src="https://example.com" width="600" height="400"></iframe>

使用上の注意

• インタラクティブ要素は、アクセシビリティを考慮して適切なラベル（例：`aria-label`や`aria-labelledby`）を設定するべきです。
• 不適切な要素でインタラクティブな機能をエミュレートしないようにしてください（例：<div>や<span>でクリック可能な要素を作成することは避けるべきです）。

関連項目

• HTML Living Standard/フロー・コンテンツ
• HTML Living Standard/フォーム関連要素
• HTML Living Standard/アクセシビリティ

関連仕様

• HTML Living Standard – Interactive content