HTML: The Living Standard

Edition for Web Developers — Last Updated 27 June 2025

1. 6 ユーザーとの対話処理
   1. 6.1 hidden属性
   2. 6.2 ページの可視
      1. 6.2.1 VisibilityStateEntryインターフェイス
   3. 6.3 不活性サブツリー
      1. 6.3.1 モーダルダイアログと不活性サブツリー
      2. 6.3.2 inert属性
   4. 6.4 ユーザーのアクティブ化の追跡
      1. 6.4.1 UserActivationインターフェイス
   5. 6.5 要素のアクティブ化動作
      1. 6.5.1 ToggleEventインターフェイス
      2. 6.5.2 CommandEventインターフェイス
   6. 6.6 フォーカス
      1. 6.6.1 導入
      2. 6.6.2 データモデル
      3. 6.6.3 tabindex属性
      4. 6.6.4 フォーカス管理API
      5. 6.6.5 autofocus属性
   7. 6.7 キーボードショートカットの割り当て
      1. 6.7.1 導入
      2. 6.7.2 accesskey属性
   8. 6.8 編集
      1. 6.8.1 編集可能な文書領域を作成する：contenteditableコンテンツ属性
      2. 6.8.2 文書全体を編集可能にする：designModeのゲッターおよびセッター
      3. 6.8.3 ページ内編集者のためのベストプラクティス
      4. 6.8.4 スペルと文法チェック
      5. 6.8.5 書き込みの提案
      6. 6.8.6 自動大文字化
      7. 6.8.7 自動修正
      8. 6.8.8 入力モダリティ：inputmode属性
      9. 6.8.9 入力モダリティ：enterkeyhint属性
   9. 6.9 ページ内検索
      1. 6.9.1 導入
      2. 6.9.2 detailsとhidden=until-foundとの相互作用
      3. 6.9.3 選択との相互作用
   10. 6.10 閉じ要求および閉じウォッチャー
       1. 6.10.1 閉じ要求
       2. 6.10.2 CloseWatcherインターフェイス

6 ユーザーとの対話処理

6.1 hidden属性

すべてのHTML要素はhiddenコンテンツ属性設定を持ってもよい。draghiddengable属性は、次のキーワードと状態を持つ列挙属性である：

この属性の欠損値のデフォルトはNot Hidden状態であり、無効値のデフォルトはHidden状態である。

要素がhidden状態のhidden属性を持つ場合、それは、その要素がまだないこと、もしくはもはやページの現在の状態には直接関係がない、または、ユーザーが直接アクセスするのとは対照的に、ページの他の部分で再利用するコンテンツを宣言するために使用されていることを示す。ユーザーエージェントは、Hidden状態にある要素をレンダリングすべきでない。

要素がHidden Until Foundにあるhidden属性を持つ場合、その要素はHidden状態のように非表示になっているが、要素内のコンテンツはページ内検索およびフラグメントナビゲーションにアクセスできることを示す。これらの機能が要素のサブツリーにあるターゲットにスクロールしようとすると、ユーザーエージェントはhidden属性を削除して内容を表示してから、ターゲットノードでancestor hidden-until-found revealing algorithmを実行してスクロールする。

  <h1>The Example Game</h1>
  <section id="login">
   <h2>Login</h2>
   <form>
    ...
    <!-- calls login() once the user's credentials have been checked -->
   </form>
   <script>
    function login() {
      // switch screens
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
   </script>
  </section>
  <section id="game" hidden>
   ...
  </section>

hidden属性は、別のプレゼンテーションに合法的に示すことができたコンテンツを隠すために使用されてはならない。たとえば、タブ付きインターフェイスは単にオーバーフロープレゼンテーションの一種であるため、タブ付きダイアログでパネルを隠すためにhiddenを使用することは誤りである。―それはスクロールバーをもつ1つの大きなページ内のすべてのフォームコントロールを示すのと同様である。ちょうど1つのプレゼンテーションからコンテンツを非表示にするためにこの属性を使用することも同様に誤りである。―何かがhiddenとマークされる場合、それは、たとえばスクリーンリーダーなどを含む、すべてのプレゼンテーションから隠されている。

自身がhiddenでない要素は、hiddenである要素へハイパーリンクされてはならない。自身がhiddenでないlabelおよびoutput要素のfor属性も同様に、hiddenである要素を参照してはならない。どちらの場合も、このような参照はユーザーの混乱を引き起こすだろう。

しかし、要素およびスクリプトは、他のコンテキストでhiddenである要素を参照してもよい。

hidden属性によって非表示にされたセクション内の要素は依然としてアクティブである。たとえば、そのようなセクションでのスクリプトやフォームコントロールは、依然として実行および送信する。それらのプレゼンテーションのみがユーザーに変更される。

6.2 ページの可視

作成時の初期値を含む、トラバース可能なナビゲート可能のシステム可視状態は、ユーザー エージェントによって決定される。たとえば、ブラウザーウィンドウが最小化されているか、ブラウザータブが現在バックグラウンドにあるか、またはタスクスイッチャーなどのシステム要素がページを覆い隠しているかどうかを表す。

When a user agent determines that the system visibility state for traversable navigable traversable has changed to newState, it must run the following steps:

1. Let navigables be the inclusive descendant navigables of traversable's active document.

2. For each navigable of navigables in what order?:

   1. Let document be navigable's active document.

   2. Queue a global task on the user interaction task source given document's relevant global object to update the visibility state of document with newState.

Documentは可視状態を持ち、これは"hidden"または"visible"のいずれかで、最初は"hidden"に設定される。

visibilityStateゲッターの手順は、この可視状態を返すものである。

hiddenのゲッター手順は、この可視状態が"hidden"の場合はtrueを返し、それ以外の場合はfalseを返すものである。

To update the visibility state of Document document to visibilityState:

1. If document's visibility state equals visibilityState, then return.

2. Set document's visibility state to visibilityState.

3. Queue a new VisibilityStateEntry whose visibility state is visibilityState and whose timestamp is the current high resolution time given document's relevant global object.

4. Run the screen orientation change steps with document. [SCREENORIENTATION]

5. Run the view transition page visibility change steps with document.

6. Run any page visibility change steps which may be defined in other specifications, with visibility state and document.

   It would be better if specification authors sent a pull request to add calls from here into their specifications directly, instead of using the page visibility change steps hook, to ensure well-defined cross-specification call order. As of the time of this writing the following specifications are known to have page visibility change steps, which will be run in an unspecified order: Device Posture API and Web NFC. [DEVICEPOSTURE] [WEBNFC]

7. Fire an event named visibilitychange at document, with its bubbles attribute initialized to true.

6.2.1 VisibilityStateEntryインターフェイス

VisibilityStateEntryインターフェイスは、文書がアクティブになった瞬間から、文書の可視性の変更を公開する。

function wasHiddenBeforeFirstContentfulPaint() {
    const fcpEntry = performance.getEntriesByName("first-contentful-paint")[0];
    const visibilityStateEntries = performance.getEntriesByType("visibility-state");
    return visibilityStateEntries.some(e =>
                                            e.startTime < fcpEntry.startTime &&
                                            e.name === "hidden");
}

ページを非表示にすると、レンダリングおよびその他のユーザエージェント操作のスロットリングが発生する可能性があるため、そのようなスロットリングが発生したことを示すものとして、可視の変更を使用するのが一般的である。ただし、長時間の非アクティブ状態など、他の要因によっても、さまざまなブラウザーでスロットリングが発生する可能性がある。

VisibilityStateEntryは、関連付けられたDOMHighResTimeStampタイムスタンプを持つ。

VisibilityStateEntryは、関連付けられた"visible"または "hidden"可視状態を持つ。

nameゲッターステップは、thisの可視状態を返す。

entryTypeゲッターステップは、"visibility-state"を返す。

startTimeゲッターステップは、thisのタイムスタンプを返す。

durationゲッターステップは0を返す。

6.3 不活性サブツリー

同じ名前の属性の説明については、inertも参照のこと。

ノード（特に要素およびテキストノード）は不活性である可能性がある。ノードが不活性である場合：

• ヒットテストは、あたかも'pointer-events' CSSプロパティが'none'に設定されているかのように動作しなければならない。

• テキスト選択機能は、あたかも'user-select' CSSプロパティが'none'に設定されているかのように動作しなければならない。

• 編集可能である場合、ノードはあたかも編集不可能であるかのように動作する。

• ユーザーエージェントは、ページ内検索の目的でノードを無視すべきである。

通例、不活性ノードにフォーカスを当てることはできず、ユーザーエージェントは非活性ノードをアクセシビリティAPIまたは支援技術に公開しない。コマンドである不活性ノードは、上記の方法ではユーザーには使用不能となる。

いずれにせよ、ユーザーエージェントは、ページ内検索およびテキスト選択の制限をユーザーが上書き可能にしてもよい。

デフォルトでは、ノードは不活性ではない。

6.3.1 モーダルダイアログと不活性サブツリー

subjectがdocumentの最上位レイヤーの一番上のdialog要素である場合、Document documentはモーダルダイアログボックスによってブロックされるsubjectである。documentがそのようにブロックされる一方で、documentに接続されているすべてのノードは、subject要素とそのフラットツリーの子孫を除き、不活性とマークされなければならない。

subjectは、inert属性を介してさらに不活性になることができるが、subject自体に指定されている場合に限る（つまり、subjectは祖先の不活性を回避する）。subjectのフラットツリーの子孫は、同じように不活性になることがある。

dialog要素のshowModal()メソッドは、dialog要素をノード文書の最上位レイヤーに追加することによって、このメカニズムをトリガーさせる。

6.3.2 inert属性

inert属性は、その存在によって、（モーダルダイアログなど）他の方法では不活性化を免れない要素およびそのすべてのフラットツリーの子孫がユーザーエージェントによって不活性にされることを示す真偽属性である。

不活性サブツリーは、不活性状態ではないページの外観を理解または使用するために重要なコンテンツまたはコントロールを含むべきでない。不活性サブツリー内のコンテンツは、すべてのユーザーによって認識できる、またはインタラクティブではない。著者は、要素が表す内容が何らかの形で視覚的に隠されていない限り、要素を不活性と指定すべきでない。ほとんどの場合、著者は個々のフォームコントロールにinert属性を指定すべきでない。このような場合は、disabled属性の方がおそらく適切である。

次の例は、"loading"メッセージによって視覚的に隠されている、部分的に読み込まれたコンテンツを不活性としてマークする方法を示す。

<section aria-labelledby=s1>
  <h3 id=s1>Population by City</h3>
  <div class=container>
    <div class=loading><p>Loading...</p></div>
    <div inert>
      <form>
        <fieldset>
          <legend>Date range</legend>
          <div>
            <label for=start>Start</label>
            <input type=date id=start>
          </div>
          <div>
            <label for=end>End</label>
            <input type=date id=end>
          </div>
          <div>
            <button>Apply</button>
          </div>
        </fieldset>
      </form>
      <table>
        <caption>From 20-- to 20--</caption>
        <thead>
          <tr>
            <th>City</th>
            <th>State</th>
            <th>20-- Population</th>
            <th>20-- Population</th>
            <th>Percentage change</th>
          </tr>
        </thead>
        <tbody>
          <!-- ... -->
        </tbody>
      </table>
    </div>
  </div>
</section>

"loading"のオーバーレイは、不活性のコンテンツを覆い隠し、不活性のコンテンツが現在アクセス可能でないことを視覚的に明らかにする。見出しおよび"loading"のテキストは、inert属性をもつ要素の子孫ではないことに注意する。これは、このテキストがすべてのユーザーをアクセス可能にするが、不活性のコンテンツは誰も操作できなくなる。

inert IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

6.4 ユーザーのアクティブ化の追跡

ユーザーに迷惑となる可能性がある特定のAPI（ポップアップを開く、振動する電話など）の悪用を防ぐために、ユーザーエージェントは、ユーザーがウェブページをアクティブに操作している、または少なくとも1回はページを操作した場合にのみ、これらのAPIを許可する。この"アクティブな相互作用"の状態は、この節で定義されたメカニズムを通じて維持される。

ユーザーのアクティブ化に依存するAPIは、さまざまなレベルに分類される：

定着したアクティブ化ゲート型API

このAPIは、定着したアクティブ化状態がtrueである必要があるため、最初のユーザーによるアクティブ化までブロックされる。

一時的なアクティブ化ゲート型API

このAPIは、一時的なアクティブ化状態がtrueであることを必要とするが、それを消費しないため、一時的な状態が期限切れになるまで、ユーザーによるアクティブ化ごとに複数の呼び出しが許可される。

一時的なアクティブ化を消費するAPI

このAPIは、一時的なアクティブ化状態がtrueであることを必要とし、ユーザーによるアクティブ化ごとの複数の呼び出しを防ぐために、各呼び出しでユーザーによるアクティブ化を消費する。

履歴アクションのアクティブ化を消費するAPI

このAPIは、履歴アクションのアクティブ化状態がtrueであることを要求し、ユーザーアクティブ化ごとに複数のコールが発生するのを防ぐために、各コールで履歴アクションのアクティブ化を消費する。

6.4.1 UserActivationインターフェイス

各Windowは、関連付けられたUserActivationを持ち、これはUserActivationオブジェクトである。Windowオブジェクトの作成時に、関連するUserActivationをWindowオブジェクトの関連領域で作成された新しいUserActivationオブジェクトに設定しなければならない。

navigator.userActivation.hasBeenActive

MDN

Navigator/userActivation

FirefoxNoSafari16.4+Chrome72+

---

Opera?Edge79+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

UserActivation/hasBeenActive

FirefoxNoSafari16.4+Chrome72+

---

Opera?Edge79+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ウィンドウがスティッキーアクティベーションを持つかどうかを返す。

navigator.userActivation.isActive

MDN

UserActivation/hasBeenActive

FirefoxNoSafari16.4+Chrome72+

---

Opera?Edge79+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ウィンドウが一時的にアクティベーションを持つかどうかを返す。

6.5 要素のアクティブ化動作

HTMLの特定の要素は、ユーザーがアクティブにすることができることを意味する、アクティブ化動作を持つ。これは、常にclickイベントによって発生する。

element.click()

あたかも要素をクリックされたかのように動作する。

6.5.1 ToggleEventインターフェイス

event.oldState

✔MDN

ToggleEvent/oldState

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+

---

Opera?Edge114+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

クローズからオープンに遷移する場合は"closed"に設定し、オープンからクローズに遷移する場合は"open"に設定する。

event.newState

✔MDN

ToggleEvent/newState

Support in all current engines.

Firefox🔰 114+Safari17+Chrome114+

---

Opera?Edge114+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

クローズからオープンに遷移する場合は"open"に設定し、オープンからクローズに遷移する場合は"closed"に設定する。

event.source

切り替えを開始したエレメントに設定する。これは、popovertargetおよびcommandfor属性で設定できる。ソース要素がない場合、nullに設定される。

oldStateおよびnewState属性は、初期化された値を返さなければならない。

The source getter steps are to return the result of retargeting source against this's currentTarget.

DOM standard issue #1328 tracks how to better standardize associated event data in a way which makes sense on Events. Currently an event attribute initialized to a value cannot also have a getter, and so an internal slot (or map of additional fields) is required to properly specify this.

toggle task trackerは、次のような構造体である：

task

ToggleEventを発火するタスク。

old state

oldState属性のタスクのイベントの値を表す文字列。

6.5.2 CommandEventインターフェイス

event.command

要素が実行できるアクションを返す。

event.source

このイベントを発生させるために相互作用したElementを返す。

command属性は、初期化された値を返さなければならない。

The source getter steps are to return the result of retargeting source against this's currentTarget.

DOM standard issue #1328 tracks how to better standardize associated event data in a way which makes sense on Events. Currently an event attribute initialized to a value cannot also have a getter, and so an internal slot (or map of additional fields) is required to properly specify this.

6.6 フォーカス

6.6.1 導入

HTMLユーザーインターフェイスは典型的に、フォームコントロール、スクロール可能領域、リンク、ダイアログボックス、ブラウザータブなど、複数の対話的なウィジットから成る。これらウィジェットは、他（たとえば、リンク、フォームコントロール）を含むもの（たとえば、ブラウザータブ、ダイアログボックス）をもつ、階層構造を形成する。

キーボードを使用するインターフェイスと情報交換する場合、アクティブなウィジェットから、フォーカスされると呼ばれる、対話的なウィジェットの階層構造を通して、キー入力はシステムから流れる。

キーボードイベントは、常にこのフォーカスされた要素で対象にされる。

6.6.2 データモデル

トップレベルトラバーサブルは、オペレーティングシステムからチャネルされたキーボード入力（おそらくアクティブな文書の子孫ナビゲート可能の1つがターゲット）を受け取ることができる場合、システムフォーカスを持つ。

トップレベル横断可能は、そのシステム可視状態が"visible"である場合、 ユーザーアテンションを持ち、そしてシステムフォーカスを持つか、またはそれに直接関連するユーザーエージェントウィジェットが、オペレーティングシステムから送られたキーボード入力を受け取ることができるかのいずれかである。

ブラウザーウィンドウがフォーカスを失うと、ユーザーアテンションは失われるが、一方でシステムのフォーカスもまた、ロケーションバーなど、ブラウザーウィンドウ内の他のシステムウィジェットを失われる可能性がある。

Document dは、dが完全にアクティブであり、かつdのノートナビゲート可能のトップレベル横断可能に ユーザーアテンションがある場合、ユーザーアテンションをもつトップレベル横断可能の完全にアクティブの子孫である。

用語フォーカス可能領域は、そのようなキーボード入力の対象になる可能性があるインターフェイスの領域を指すために使用される。フォーカス可能領域は、要素、要素の一部、またはユーザーエージェントによって処理される他の領域となることができる。

各フォーカス可能領域は、DOMでフォーカス可能領域の位置を表すNodeオブジェクトである、DOMアンカーを持つ。（フォーカス可能領域がNode自身である場合、それはそれ自身のDOM anchorである。）フォーカス可能領域を表すために他のDOMオブジェクトが存在しない場合、DOMアンカーは、フォーカス可能領域に適するようないくつかのAPIで使用される。

次のテーブルは、どのオブジェクトがフォーカス可能領域となることができるかを説明する。左の列におけるセルは、フォーカス可能領域となることができるオブジェクトを説明する。右の列におけるセルは、この要素に対するDOMアンカーを説明する。（両方の列をまたぐセルは、非規範的な例である。）

<map id=wallmap><area alt="Enter Door" coords="10,10,100,200" href="door.html"></map>
...
<img src="images/innerwall.jpeg" alt="There is a white wall here, with a door." usemap="#wallmap">
...
<img src="images/outerwall.jpeg" alt="There is a red wall here, with a door." usemap="#wallmap">

ナビゲート可能なコンテナー（iframeなど）は、フォーカス可能な領域であるが、ナビゲート可能なコンテナーに送られるキーイベントは、コンテンツナビゲート可能のアクティブな文書にすぐに送られる。 同様に、シーケンシャルフォーカスナビゲーションにおいて、ナビゲート可能なコンテナーは基本的に、コンテンツナビゲート可能のアクティブ文書のプレースホルダーとしてのみ機能する。

各Documentの1つのフォーカス可能な領域は、文書のフォーカスされた領域として指定される。どのコントロールがそのように呼ばれるかは時間とともに変化し、この仕様におけるアルゴリズムに基づく。

たとえ文書が完全にアクティブでなくかつユーザーに表示されないとしても、文書のフォーカスされた領域を保持できる。文書の完全にアクティブな状態が変化しても、文書のフォーカスされた領域は同じままとなる。

The currently focused area of a top-level traversable traversable is the focusable area-or-null returned by this algorithm:

1. If traversable does not have system focus, then return null.

2. Let candidate be traversable's active document.

3. While candidate's focused area is a navigable container with a non-null content navigable: set candidate to the active document of that navigable container's content navigable.

4. If candidate's focused area is non-null, set candidate to candidate's focused area.

5. candidateを返す。

The current focus chain of a top-level traversable traversable is the focus chain of the currently focused area of traversable, if traversable is non-null, or an empty list otherwise.

An element that is the DOM anchor of a focusable area is said to gain focus when that focusable area becomes the currently focused area of a top-level traversable. When an element is the DOM anchor of a focusable area of the currently focused area of a top-level traversable, it is focused.

6.6.3 tabindex属性

tabindexコンテンツ属性は、著者が、DOMアンカーとして要素を持つ要素および領域をフォーカス可能領域にする、シーケンシャルフォーカス可能にすることを許可または防止する、ならびにシーケンシャルフォーカスナビゲーションの相対的な順序を決定することを可能にする。

名前"tab index"は、フォーカス可能な要素を通してナビゲートするためのTabキーの一般的な使用方法に由来する。"tabbing"（タブ移動）という用語は、シーケンシャルフォーカス可能なフォーカス可能領域を前に進めることを指す。

tabindex属性が指定される場合、妥当な整数である値を持たなければならない。正の数値は、要素のフォーカス可能領域の相対的な位置をシーケンシャルフォーカスナビゲーション順序で指定し、負の数値はコントロールがシーケンシャルフォーカス可能でないことを示す。

0または-1以外の値を使用している場合、開発者は、これが正しく行うために複雑になるよう、自身のtabindex属性に対して用心すべきである。

6.6.4 フォーカス管理API

documentOrShadowRoot.activeElement

キーイベントがルーティングされるdocumentOrShadowRoot内の最も深い要素を返す。大まかにいって、これは文書におけるフォーカスされた要素である。

このAPIために、子ナビゲート可能がフォーカスされるとき、そのコンテナーは親のアクティブな文書内でフォーカスされる。 たとえば、ユーザーがiframeでフォーカスをテキストコントロールに移動する場合、iframeはiframeのnode documentにおいてactiveElement APIによって返される要素である。

同様に、フォーカスされた要素がdocumentOrShadowRootとは異なるノードツリーにあるとき、documentOrShadowRootがフォーカスされた要素のシャドウを含む包含祖先である場合、返される要素はdocumentOrShadowRootと同じノードツリーにあるホストになり、そうでない場合はnullになる。

document.hasFocus()

キーイベントがdocumentを経由またはルーティングされている場合はtrueを返し、そうでなければfalseを返す。大まかにいって、これはフォーカスされているdocument、またはdocument内にネストされた文書に対応する。

window.focus()

windowのナビゲート可能なフォーカスを移動する。

element.focus()

element.focus({ preventScroll, focusVisible })

フォーカスをelementに移動する。

elementがナビゲート可能なテキストコンテナーである場合、代わりにナビゲート可能なコンテンツにフォーカスを移動する。

デフォルトでは、このメソッドもelementをビューにスクロールする。preventScrollオプションを指定してtrueに設定すると、この動作が防止される。

デフォルトでは、ユーザーエージェント実装で定義されたヒューリスティックを使用して、フォーカスリングを介してフォーカスを示すかどうかを決定する。focusVisibleオプションを指定してtrueに設定すると、フォーカスリングが常に表示される。

element.blur()

フォーカスをビューポートに移動する。このメソッドの使用は奨められない。ビューポートにフォーカスしたい場合、Documentの文書要素上のfocus()メソッドを呼び出す。

見苦しいフォーカスリングを発見する場合、フォーカスリングを非表示にするためにこの方法を使用してはならない。代わりに、'outline'プロパティを上書きするために:focus-visible疑似クラスを使用し、要素がフォーカスされるものを表示する別の方法を提供する。代替フォーカススタイルが利用可能にならないか、ページが主にキーボードを使用してページをナビゲートする人に対して著しく使用可能にならないか、ページをナビゲートするのに役立つフォーカスアウトラインを使う人の視覚を減少させないかどうかに注意する。

たとえば、textarea要素からアウトラインを隠し、代わりにフォーカスを示すために黄色の背景を使用するために、次を使うことができる：

textarea:focus-visible { outline: none; background: yellow; color: black; }

6.6.5 autofocus属性

autofocusコンテンツ属性は、著者にページがロードされるとすぐに要素にフォーカスされることを示すのを可能にし、ユーザーは重要な要素に手動でフォーカスすることなく入力を開始できる。

popover属性が設定されているdialog要素またはHTML要素内部の要素にautofocus属性が指定される場合、ダイアログまたはポップオーバーが表示されたときにフォーカスされる。

autofocus属性は真偽属性である。

To find the nearest ancestor autofocus scoping root element given an Element element:

1. If element is a dialog element, then return element.

2. If element's popover attribute is not in the No Popover State, then return element.

3. Let ancestor be element.

4. While ancestor has a parent element:

   1. Set ancestor to ancestor's parent element.

   2. If ancestor is a dialog element, then return ancestor.

   3. If ancestor's popover attribute is not in the No Popover State, then return ancestor.

5. Return ancestor.

両方がautofocus属性を指定される同じ直近の祖先オートフォーカス範囲のルート要素をもつ2つの要素が存在してはならない。

<input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search">

<div contenteditable autofocus>Edit <strong>me!</strong><div>

6.7 キーボードショートカットの割り当て

6.7.1 導入

アクティブにされるまたはフォーカスさせることができる各要素はaccesskey属性を使用して、それをアクティブにするための単一のキーの組み合わせを割り当てることができる。

正確なショートカットは、ユーザーエージェントによって決定され、ユーザーのキーボードに関する情報に基づき、どのキーボードショートカットが既にプラットフォーム上に存在し、他にどのようなショートカットがページ上で指定され、ガイドとしてaccesskey属性に提供された情報を使用する。

関連するキーボードショートカットが多種多様な入力デバイスで利用可能であることを確実にするために、著者はaccesskey属性で多数の選択肢を提供できる。

各選択肢は、文字または数字のような、単一の文字で構成される。

ユーザーエージェントは、キーボードショートカットの一覧をユーザーに提供できるが、著者は行うことも推奨される。accessKeyLabel IDL属性は、ユーザーエージェントによって割り当てられた実際のキーの組み合わせを表す文字列を返す。

<input type=button value=Collect onclick="collect()"
       accesskey="C 1" id=c>

function addShortcutKeyLabel(button) {
  if (button.accessKeyLabel != '')
    button.value += ' (' + button.accessKeyLabel + ')';
}
addShortcutKeyLabel(document.getElementById('c'));

6.7.2 accesskey属性

すべてのHTML要素は、accesskeyコンテンツ属性の設定を持ってもよい。accesskey属性値は、要素をアクティブにするまたはフォーカスするキーボードショートカットを作成するためのガイドとして、ユーザーエージェントによって使用される。

指定される場合、値は、順序付きの一意な空白区切りトークンの集合でなければならない。これらのトークンはいずれも別のトークンと同一でなく、それぞれが正確に1コードポイント長さでなければならない。

<nav>
 <p>
  <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
  <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
  <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
  <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
  <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
 </p>
</nav>

<form action="/search">
 <label>Search: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

<input type=submit accesskey="N @ 1" value="Compose">
...
<script>
 function labelButton(button) {
   if (button.accessKeyLabel)
     button.value += ' (' + button.accessKeyLabel + ')';
 }
 var inputs = document.getElementsByTagName('input');
 for (var i = 0; i < inputs.length; i += 1) {
   if (inputs[i].type == "submit")
     labelButton(inputs[i]);
 }
</script>

6.8 編集

6.8.1 編集可能な文書領域を作成する：contenteditableコンテンツ属性

enctypeコンテンツ属性は、次のキーワードおよび状態をもつ列挙属性である：

この属性の欠損値のデフォルトおよび無効値のデフォルトは両方ともinherit状態である。継承状態は、親要素の状態に基づいて要素が編集可能である（または編集可能でない）ことを示す。

<form method=POST>
 <fieldset>
  <legend>New article</legend>
  <textarea name=article>&lt;p>Hello world.&lt;/p></textarea>
 </fieldset>
 <p><button>Publish</button></p>
</form>

<form method=POST>
 <fieldset>
  <legend>New article</legend>
  <textarea id=textarea name=article>&lt;p>Hello world.&lt;/p></textarea>
  <div id=div style="white-space: pre-wrap" hidden><p>Hello world.</p></div>
  <script>
   let textarea = document.getElementById("textarea");
   let div = document.getElementById("div");
   textarea.hidden = true;
   div.hidden = false;
   div.contentEditable = "true";
   div.oninput = (e) => {
     textarea.value = div.innerHTML;
   };
  </script>
 </fieldset>
 <p><button>Publish</button></p>
</form>

<!doctype html>
<html lang=en>
<title>Live CSS editing!</title>
<style style=white-space:pre contenteditable>
html { margin:.2em; font-size:2em; color:lime; background:purple }
head, title, style { display:block }
body { display:none }
</style>

element.contentEditable [ = value ]

contenteditable属性の状態に基づいて、"true"、"plaintext-only"、"false"、または"inherit"を返す。

その状態を変更する設定が可能である。

新しい値がこれらの文字列のいずれかでない場合、"SyntaxError" DOMExceptionを投げる。

element.isContentEditable

要素が編集可能な場合にtrueを返す。そうでなければfalseを返す。

6.8.2 文書全体を編集可能にする：designModeのゲッターおよびセッター

document.designMode [ = value ]

文書が編集可能である場合に"on"を返し、ない場合に"off"を返す。

文書の現在の状態を変更する設定が可能である。これは、文書をフォーカスし、その文書で文書の選択をリセットする。

6.8.3 ページ内編集者のためのベストプラクティス

著者は、もともと値'pre-wrap'へこれら編集のメカニズムを介して作成された編集ホストおよびマークアップ上の'white-space'プロパティを設定することを奨める。デフォルトのHTML空白処理は、あまりWYSIWYG編集に向かず、そして'white-space'がデフォルト値のままである場合、いくつかのコーナーの場合において、行の折り返しは正しく動作しない。

6.8.4 スペルと文法チェック

spellcheck属性は、次のキーワードと状態を持つ列挙属性である：

この属性の欠損値のデフォルトと無効値のデフォルトは、両方ともDefault状態である。デフォルト状態は、下記で定義されるように、おそらく親要素自身のspellcheck状態に基づいて、デフォルトの動作に応じて動作する要素であることを示す。

element.spellcheck [ = value ]

要素がスペルや文法チェックを持つ場合はtrueを返す。そうでなければfalseを返す。

デフォルトを上書きしてspellcheckコンテンツ属性を設定するための、設定が可能である。

この仕様は、スペルや文法チェッカーに対するユーザーインターフェイスを定義しない。ユーザーエージェントはオンデマンドチェックを提供するかもしれず、チェックが有効である間に連続的なチェックを実行するかもしれず、または他のインターフェイスを使用するかもしれない。

6.8.5 書き込みの提案

ユーザーエージェントは、ユーザーがフォームコントロール（textarea要素など）または編集ホスト内の要素のいずれかの編集可能領域に入力するときに、書き込みの提案を提供する。

writingsuggestionsコンテンツ属性は、次のキーワードおよび状態をもつ列挙属性である：

この属性の欠損値のデフォルトは、Default状態である。デフォルト状態は、下記で定義されるように、おそらく親要素自身のwritingsuggestions状態に基づいて、デフォルトの動作に応じて動作する要素であることを示す。

The attribute's invalid value default is the True state.

element.writingSuggestions [ = value ]

ユーザーエージェントが要素のスコープの下で書き込みの提案を行う場合は "true"を返し、そうでなければ "false"を返す。

デフォルトを上書きしてwritingsuggestionsコンテンツ属性を設定するための、設定が可能である。

User agents should only offer suggestions within an element's scope if the result of running the following algorithm given element returns true:

1. If the user has disabled writing suggestions, then return false.

2. If none of the following conditions are true:

   • element is an input element whose type attribute is in either the Text, Search, Telephone, URL, or Email state and is mutable;

   • element is a textarea element that is mutable; or

   • element is an editing host or is editable,

   then return false.

3. If element has an inclusive ancestor with a writingsuggestions content attribute that's not in the Default and the nearest such ancestor's writingsuggestions content attribute is in the False state, then return false.

4. Otherwise, return true.

This specification does not define the user interface for writing suggestions. A user agent could offer on-demand suggestions, continuous suggestions as the user types, inline suggestions, autofill-like suggestions in a popup, or could use other interfaces.

6.8.6 自動大文字化

モバイルデバイス上の仮想キーボードや音声入力など、テキストを入力するいくつかの方法では、文の最初の文字を自動的に大文字にすることでユーザーを支援することがある（この規則で言語でテキストを構成する場合）。自動大文字化を実装する仮想キーボードは、自動大文字にすべき文字を入力しようとするとき、大文字の文字を表示するように自動的に切り替えるかもしれない（ただし、ユーザーはその文字を小文字に切り替え可能である）。例えば音声入力など、他の入力の種類は、ユーザーが最初に介入するオプションを与えないような方法で自動大文字化を行ってもよい。autocapitalize属性は、著者がそのような振る舞いを制御するのを可能にする。

典型的に実装されるように、autocapitalize属性は、物理キーボードで入力するときの動作に影響しない。（この理由のために、場合によっては自動大文字化の動作を上書きしたり、最初の入力の後にテキストを編集することをユーザーの能力と同様に、属性をいかなる種類の入力検証にも当てにしてはならない。

ホストされている編集可能領域の自動大文字化動作を制御するために編集ホスト上で、その要素にテキストを入力するための動作を制御するためにinputもしくはtextarea要素の上で、またはform要素に関連付けられたすべての自動大文字化および自動修正継承要素のデフォルトの動作を制御するためにform要素上でautocapitalize属性を使用することができる。

autocapitalize属性は、type属性がURL、Email、またはPassword状態のいずれかにあるinput要素に対して、自動大文字化を有効にすることはない。

自動大文字化処理モデルは、次のように定義される5つの自動大文字化ヒントの中から選択することに基づく：

default

ユーザーエージェントおよび入力メソッドは、自動大文字化を有効にするかどうかを独自に決定すべきである。

none

自動大文字化は適用されるべきではない（すべての文字は小文字をデフォルトにすべきである）。

sentences

各文の最初の文字は大文字をデフォルトにすべきである。他のすべての文字は小文字をデフォルトにすべきである。

words

各単語の最初の文字は大文字をデフォルトにすべきである。他のすべての文字は小文字をデフォルトにすべきである。

characters

全ての文字は大文字をデフォルトにすべきである。

autocapitalize属性は、状態が可能な自動大文字ヒントである列挙属性である。属性の状態で指定された自動大文字化ヒントは、ユーザーエージェントの動作を通知する、使用済みの自動大文字化ヒントを形成するための他の考慮事項と組み合わされる。この属性のキーワードと状態マッピングは次のとおり：

この属性の欠損値のデフォルトはdefault状態であり、無効値のデフォルトはsentences状態である。

element.autocapitalize [ = value ]

要素の現在の自動大文字化状態を返す。設定されていない場合は空文字列を返す。form要素から状態を継承するinput要素とtextarea要素の場合、これはform要素の自動大文字化状態を返すが、編集可能領域の要素の場合、これは（この要素が実際に編集ホストでない限り）編集ホストの自動大文字化状態を返さないことに注意すること。

autocapitalizeコンテンツ属性を設定する（そしてそれによって要素の自動大文字化動作を変化させる）ことで、設定が可能である。

6.8.7 自動修正

一部のテキスト入力方法は、入力中にスペルミスのある単語を自動的に修正することでユーザーを支援する。このプロセスは自動修正とも呼ばれる。ユーザーエージェントは、編集可能なテキストの自動修正を、フォームコントロール（textarea要素の値など）、または編集ホスト内の要素（contenteditableを使用するなど）でサポートできる。自動修正は、テキストが自動修正されようとしている、または自動修正されたことを示すユーザーインターフェイスを伴ってもよく、一般に、スペルミスのある単語の後に句読文字、スペース、または新しい段落を挿入するときに実行される。autocorrect属性は、著者にそのような動作を制御を可能にする。

ホストされている編集可能領域の自動大文字化動作を制御するために編集ホスト上で、その要素にテキストを入力するための動作を制御するためにinputもしくはtextarea要素の上で、またはform要素に関連付けられたすべての自動大文字化および自動修正継承要素のデフォルトの動作を制御するためにform要素上でautocapitalize属性を使用することができる。

type属性がURL、EmailまたはPasswordのいずれかの状態にあるinput要素ではautocorrect属性によって自動修正が有効になることはない。

autocorrect属性は、次のキーワードと状態を持つ列挙属性である：

属性の無効値のデフォルトおよび欠損値のデフォルトは、両方ともon状態である。

autocorrectゲッターステップは次のとおり：要素の使用された自動修正状態がonの場合はtrueを返し、要素の使用された自動修正状態がoffの場合はfalseを返す。セッターステップ手順は次のとおり：指定した値がtrueの場合、要素のautocorrect属性を"on"に設定しなければならない。そうでなければ、"off"に設定しなければならない。

To compute the used autocorrection state of an element element, run these steps:

1. If element is an input element whose type attribute is in one of the URL, Email, or Password states, then return off.

2. If the autocorrect content attribute is present on element, then return the state of the attribute.

3. If element is an autocapitalize-and-autocorrect inheriting element and has a non-null form owner, then return the state of element's form owner's autocorrect attribute.

4. Return on.

element . autocorrect

要素の自動修正動作を返す。form要素から状態を継承する自動大文字化および自動修正の継承要素の場合、これはform要素の自動修正動作を返すが、編集可能領域内の要素の場合、編集ホストの自動修正動作は返さない（この要素が実際に編集ホストでない場合）。

element . autocorrect = value

autocorrectコンテンツ属性を更新する（そしてこれにより、要素の自動修正動作が変更される）。

<form autocorrect="off">
 <input type="search">
 <textarea autocorrect="on"></textarea>
</form>

6.8.8 入力モダリティ：inputmode属性

ユーザーエージェントは、フォームコントロール（textarea要素の値など）で、または編集ホスト（contenteditableなど）における要素でinputmode属性をサポートすることができる。

inputmodeコンテンツ属性は、ユーザーがコンテンツを入力する際に最も参考になる入力メカニズムの種類を指定する列挙属性である。

6.8.9 入力モダリティ：enterkeyhint属性

ユーザーエージェントは、フォームコントロール（textarea要素の値など）で、または編集ホスト（contenteditableなど）における要素でenterkeyhint属性をサポートすることができる。

enterkeyhintコンテンツ属性は、仮想キーボードのEnterキーに表示するアクションラベル（またはアイコン）を指定する列挙属性である。これにより、ユーザーにとってより役立つようにするために、著者はEnterキーの表示をカスタマイズを可能にする。

6.9 ページ内検索

6.9.1 導入

このセクションは、ページ内検索を定義する。これは、ユーザーが特定の情報に対してページのコンテンツを検索できるようにする一般的なユーザーエージェントのメカニズムである。

ページ内検索機能へのアクセスは、ページ内検索インターフェイスを介して提供される。これはユーザーエージェントが提供するユーザーインターフェイスであり、ユーザーが入力と検索のパラメーターを指定できるようする。このインターフェイスは、ショートカットまたはメニュー選択の結果として表示される。

ページ内検索インターフェイスのテキスト入力と設定の組み合わせは、ユーザーのクエリーを表す。これは通常、ユーザーが検索したいテキストと、オプションの設定（例えば、検索を単語に限定する機能など）が含まれる。

ユーザーエージェントは、与えられたクエリーのページコンテンツを処理し、0個以上のマッチを識別する。これはユーザークエリーを満たすコンテンツ範囲である。

マッチの1つがアクティブなマッチとしてユーザーに識別される。 それはハイライトされ、スクロールして表示される。ユーザーは、ページ内検索インターフェイスを使用してアクティブなマッチを前進させることにより、マッチをナビゲートできる。

Issue #3539は、ページ内検索が現在指定されていないwindow.find() APIの基礎となる方法の標準化を追跡する。

6.9.2 detailsとhidden=until-foundとの相互作用

ページ内検索が一致するものの検索を開始するとき、 open属性が設定されていないページ内のすべてのdetails要素は、ページ内検索が検索できるようにするために、open属性を変更せずに、2番目のスロットのスキップされたコンテンツにアクセスできるようにすべきである。同様に、Hidden Until Found状態のhidden属性をもつすべてのHTML要素は、ページ内検索で検索できるようにするために、hidden属性を変更せずにスキップされたコンテンツにアクセスできるようにすべきである。ページ内検索が一致の検索を終了した後、details要素と、Hidden Until Found状態のhidden属性をもつ要素は、コンテンツが再びスキップされるようにすべきである。このプロセス全体は同期的に行われなければならない（したがって、ユーザーや著者のコードを監視することはできない）。[CSSCONTAIN]

When find-in-page chooses a new active match, perform the following steps:

1. Let node be the first node in the active match.

2. Queue a global task on the user interaction task source given node's relevant global object to run the following steps:

   1. Run the ancestor details revealing algorithm on node.

   2. Run the ancestor hidden-until-found revealing algorithm on node.

このようにページ内検索がdetails要素を自動展開すると、toggleイベントが発火する。ページ内検索が起動する別のscrollイベントと同様に、このイベントは、ユーザーがページ内検索のダイアログに入力している内容を検出するためにページによって使用される。ページが、現在の検索語と、ユーザーが入力できるすべての次の文字をギャップで区切った小さなスクロール可能領域を作成し、ブラウザがどの文字にスクロールするかを観察した場合、その文字を検索語に追加し、スクロール可能領域を更新して、検索語を段階的に構築できる。考えられる次のマッチをそれぞれ閉じたdetails要素でラップすることで、ページはscrollイベントではなくtoggleイベントをリッスンすることができる。この攻撃は、ユーザーがページ内検索ダイアログに入力したすべての文字に作用しないことによって、両方のイベントに対して対処することができる。

6.9.3 選択との相互作用

ページ内検索プロセスは、文書のコンテキストで呼び出され、その文書の選択に影響を与えることがある。 具体的には、アクティブなマッチを定義する範囲が、現在の選択を決定することがある。しかし、この選択の更新は、ページ内検索プロセスのさまざまな時点で発生することがある（たとえば、ページ内検索インターフェイスの終了時、またはアクティブなマッチの範囲の変更時）。

6.10 閉じ要求および閉じウォッチャー

6.10.1 閉じ要求

実装で定義された（そしておそらくデバイス固有の）方法で、ユーザーはユーザーエージェントに閉じ要求を送ることができる。これは、ユーザーが、ポップオーバー、メニュー、ダイアログ、ピッカー、表示モードなど、現在画面に表示されているものを閉じたいことを示す。

Escキーを押すことが閉じ要求として解釈されるプラットフォームでは、ユーザーエージェントは、キーが押されているdownを、キーが離されているのではなく、閉じ要求としなければならない。したがって、上記のアルゴリズムでは、発生する"関連イベント"は単一のkeydownイベントでなければならない。

Escが閉じ要求であるプラットフォームでは、ユーザーエージェントはまず、適切に初期化されたkeydownイベントを発火する。ウェブ開発者がpreventDefault()を呼び出してイベントをキャンセルした場合、それ以降は何も起こらない。しかし、イベントがキャンセルされずに発生した場合、ユーザーエージェントはクローズウォッチャーの処理に進む。

戻るボタンが潜在的閉じ要求であるプラットフォームでは、イベントは関係しないため、戻るボタンが押されると、ユーザーエージェントは直接クローズウォッチャー の処理に進む。アクティブなクローズウォッチャーが存在する場合、それがトリガーされる。存在しない場合、ユーザーエージェントは、別の方法で、例えば、-1のデルタによる履歴のトラバース要求として、戻るボタンの押下を解釈することができる。

6.10.2 CloseWatcherインターフェイス

watcher = new CloseWatcher()

watcher = new CloseWatcher({ signal })

新しいCloseWatcherインスタンスを作成する。

signalオプションが与えられる場合、与えられたAbortSignalをアボートすることで、watcherを破棄できる（あたかもwatcher.destroy()のように）。

いずれかのclose watcherがすでにアクティブであり、かつWindowがhistory-action activationを持たない場合、結果として生じるCloseWatcherは、close requestに応答して、すでにアクティブなclose watcherとともに閉じられる。（このすでにアクティブなclose watcherは、必ずしもCloseWatcherオブジェクトである必要はない。モーダルdialog要素、またはpopover 属性をもつ要素によって生成されたポップオーバーである可能性がある。）

watcher.requestClose()

最初にcancelイベントを発火させ、かつそのイベントがpreventDefault()でキャンセルされない場合、あたかもwatcher.destroy()が呼び出されたかのように閉じたウォッチャを非アクティブ化する前にcloseイベントを発火させる。これにより、あたかもclose requestがwatcherをターゲットとして送信されたかのように動作する。

これは、キャンセルおよびクローズロジックをcancelおよびcloseイベントハンドラーに統合するために使用できるヘルパーユーティリティであり、非close requestのすべてのクローズアフォーダンスでこのメソッドを呼び出すことができる。

watcher.close()

即座にcloseイベントを発火させ、 あたかもwatcher.destroy()が呼び出されたかのようにクローズウォッチャーを停止させる。

これは、cancelイベントハンドラー内のロジックをスキップして、 closeイベントハンドラーへの終了ロジックをトリガーするために使用できるヘルパーユーティリティである。

watcher.destroy()

watcherを停止させ、closeイベントを受け取らないようにし、新しい独立したCloseWatcherインスタンスを構築できるようにする。

これは、関連するUI要素が閉じられる以外の方法で分解された場合に呼び出されることを目的とする。

下記は、CloseWatcherインターフェイスを実装するすべてのオブジェクトによって、イベントハンドラーIDL属性として、サポートされるイベントハンドラー（および対応するイベントハンドラーイベント型）である：

const watcher = new CloseWatcher();
const picker = setUpAndShowPickerDOMElement();

let chosenValue = null;

watcher.onclose = () => {
  chosenValue = picker.querySelector('input').value;
  picker.remove();
};

picker.querySelector('.close-button').onclick = () => watcher.requestClose();

watcher.oncancel = async (e) => {
  if (hasUnsavedData && e.cancelable) {
    e.preventDefault();

    const userReallyWantsToClose = await askForConfirmation("Are you sure you want to close?");
    if (userReallyWantsToClose) {
      hasUnsavedData = false;
      watcher.close();
    }
  }
};

上記の2つの例を組み合わせると、requestClose()と close()の違いがわかる。閉じるボタンのclickイベントハンドラーでrequestClose()を使用したので、そのボタンをクリックするとCloseWatcherのcancelイベントがトリガーされ、保存されていないデータがある場合はユーザーに確認を求める可能性がある。close()を使用した場合、このチェックはスキップされる。これが適切な場合もあるが、通常はrequestClose()の方が、ユーザーがトリガーする閉じる要求に適している。

window.onload = () => {
  // This will work as normal: it is the first close watcher created without user activation.
  (new CloseWatcher()).onclose = () => { /* ... */ };
};

button1.onclick = () => {
  // This will work as normal: the button click counts as user activation.
  (new CloseWatcher()).onclose = () => { /* ... */ };
};

button2.onclick = () => {
  // These will be grouped together, and both will close in response to a single close request.
  (new CloseWatcher()).onclose = () => { /* ... */ };
  (new CloseWatcher()).onclose = () => { /* ... */ };
};