1. 6 ユーザーとの対話処理
    1. 6.1 hidden属性
    2. 6.2 ページの可視
    3. 6.3 不活性サブツリー
      1. 6.3.1 モーダルダイアログと不活性サブツリー
      2. 6.3.2 inert属性
    4. 6.4 ユーザーのアクティブ化の追跡
      1. 6.4.1 The UserActivation interface
    5. 6.5 要素のアクティブ化動作
    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 入力モダリティ:inputmode属性
      7. 6.8.7 入力モダリティ:enterkeyhint属性
    9. 6.9 ページ内検索
      1. 6.9.1 導入
      2. 6.9.2 detailshidden=until-foundとの相互作用
      3. 6.9.3 選択との相互作用

6 ユーザーとの対話処理

6.1 hidden属性

Global_attributes/hidden

Support in one engine only.

FirefoxNoSafariNoChrome102+
OperaNoEdge102+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Global_attributes/hidden

Support in all current engines.

FirefoxYesSafariYesChromeYes
Opera?EdgeYes
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android4+Samsung Internet?Opera Android?

すべてのHTML要素hiddenコンテンツ属性設定を持ってもよい。draggable属性は、列挙属性である。以下の表は、この属性の状態を列挙する:

状態キーワード
Until found stateuntil-found
Hidden stateThe empty string
hidden

属性は省略してもよい。不正値のデフォルトhidden stateである。欠損値のデフォルトnot hidden stateである。

要素がhidden statehidden属性を持つ場合、それは、要素がまだないこと、またはもはやページの現在の状態には直接関係がない、または、ユーザーが直接アクセスするのとは対照的に、ページの他の部分で再利用するコンテンツを宣言するために使用されていることを示す。ユーザーエージェントは、hidden stateにある要素をレンダリングすべきでない。 この要件は、スタイルレイヤーを通して間接的に実装されてもよい。たとえば、ウェブブラウザーは、レンダリングセクションで提案されているルールを使用してこれらの要件を実装することができる。

要素がhidden until found stateにあるhidden属性を持つ場合、その要素はhidden stateのように非表示になっているが、要素内のコンテンツはページ内検索およびフラグメントナビゲーションにアクセスできることを示す。これらの機能が要素のサブツリーにあるターゲットにスクロールしようとするとき、ユーザーエージェントは、スクロールする前にコンテンツを表示するためにhidden属性を削除する。 hidden属性を削除することに加えて、beforematchという名前のイベントも、hidden属性が削除される前に要素で発火する。

レンダリングセクションで指定されているように、hidden属性がhidden until found stateにある場合、ウェブブラウザーは'display: none'ではなく'content-visibility: hidden'を使用するだろう。

この属性は通常CSSを使用して実装されているため、CSSを使用して上書きすることもできる。たとえば、'display: block'をすべての要素に適用する規則は、hidden状態の影響を相殺するだろう。したがって著者は、期待通りに属性がスタイル付けされていることを確認し、そのスタイルシートを書くときに注意する必要がある。さらに、hidden until found stateをサポートしないレガシーユーザーエージェントは、 'content-visibility: hidden',ではなく'display: none'になるため、著者はスタイルシートがhidden until found要素の'display'または'content-visibility プロパティを変更しないようにすることを勧める。

hidden until found statehidden属性をもつ要素は、'display: none'ではなく'content-visibility: hidden'を使用するため、hidden until found stateには、hidden stateとは異なる2つの注意点が存在する:

  1. ページ内検索で表示するには、要素がレイアウトの包含の影響を受ける必要がある。 これは、hidden until found stateの要素が'none'、'contents'、または'inline'の'display'値を持つ場合、その要素はページ内検索によって表示されないことを意味する。

  2. hidden until found stateの場合、要素は依然として生成ボックスがある。これはつまり、ボーダー、マージン、およびパディングは要素の周囲にレンダリングされたままになる。

以下の骨格の例において、属性は、ユーザーがログインするまでウェブゲームのメイン画面を非表示にするために使用される:

  <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属性でマークされたセクションにリンクするhref属性を使用するのは誤りだろう。コンテンツが適切または関連しない場合、それにリンクする理由はない。

しかし、自身がhiddenである説明を参照するために、ARIA aria-describedby属性を使用することは構わない。説明を非表示にすることはそれらが単独で有用でないことを意味する一方で、それらは、それらが説明する要素から参照される特定のコンテキストにおいて有用である方法で記述することもできる。

同様に、hidden属性を持つcanvas要素は、オフスクリーンバッファーとしてスクリプト化されたグラフィックスエンジンによって使用されるかもしれず、フォームコントロールは、form属性を使用する隠しform要素を参照するかもしれない。

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

6.2 ページの可視

A traversable navigable's system visibility state, including its initial value upon creation, is determined by the user agent. It represents, for example, whether the browser window is minimized, a browser tab is currently in the background, or a system element such as a task switcher obscures the page.

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.

  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"に設定される。

Document/visibilityState

Support in all current engines.

Firefox18+Safari7+Chrome33+
Opera20+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android20+

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

Document/hidden

Support in all current engines.

Firefox18+Safari7+Chrome33+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android12.1+

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. 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, Screen Orientation API, and Web NFC. [DEVICEPOSTURE] [SCREENORIENTATION] [WEBNFC]

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

6.3 不活性サブツリー

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

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

不活性ノードは通常、フォーカスを当てることができない。コマンドである不活性ノードはまた、無効であるだろう。

しかし、ユーザーエージェントは、ユーザーが検索とテキスト選択に制限を上書きできてもよい。

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

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

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

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

6.3.2 inert属性

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

デフォルトでは、サブツリーが不活性であるという永続的な視覚的な指示はない。ユーザーの混乱を避けるために、著者は、文書のどの部分がアクティブで、どの部分が不活性であるかを明確にマークすることを勧める。特に、すべてのユーザーがページのすべての部分を一度に表示できるわけではないことを覚えておく価値がある。 たとえば、スクリーンリーダーのユーザー、小型のデバイスや拡大鏡を使用しているユーザー、特に小さなウィンドウを使用しているユーザーでさえ、ページのアクティブな部分を見ることができず、不活性なセクションが明らかに不活性でない場合はフラストレーションを感じる可能性がある。個々のコントロールの場合、おそらくdisabled属性がより適切である。

HTMLElement/inert

Support in all current engines.

Firefoxpreview+Safari15.5+Chrome102+
Opera?Edge102+
Edge (Legacy)?Internet ExplorerNo
Firefox AndroidNoSafari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

ユーザーのアクティブ化に依存するAPIは、3つの異なるレベルに分類される。レベルは以下のとおりで、ユーザーのアクティブ化に対する"依存度の強さ"でソートされている(最も弱いものから最も強いものへ)。

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

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

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

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

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

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

6.4.1 The UserActivation interface

UserActivation

Support in one engine only.

FirefoxNoSafariNoChrome72+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Each Window has an associated UserActivation, which is a UserActivation object. Upon creation of the Window object, its associated UserActivation must be set to a new UserActivation object created in the Window object's relevant realm.

navigator.userActivation.hasBeenActive

Navigator/userActivation

Support in one engine only.

FirefoxNoSafariNoChrome72+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

UserActivation/hasBeenActive

Support in one engine only.

FirefoxNoSafariNoChrome72+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Returns whether the window has sticky activation.

navigator.userActivation.isActive

UserActivation/hasBeenActive

Support in one engine only.

FirefoxNoSafariNoChrome97+
Opera?Edge97+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Returns whether the window has transient activation.

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

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

element.click()

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

6.6 フォーカス

6.6.1 導入

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

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

グラフィカル環境で動作するブラウザータブにおいて動作するHTMLアプリケーションを考えてみる。このアプリケーションが、いくつかのテキストコントロールおよびリンクをもつページを持ち、それ自身がテキストコントロールとボタンを持った、モーダルダイアログを表示していると想定する。

このシナリオにおいて、その子の間でHTMLアプリケーションを含むブラウザータブを持つだろう、フォーカス可能なウィジェットの階層構造は、ブラウザーウィンドウを含むかもしれない。タブ自身は、ダイアログと同様に、その子として、様々なリンクおよびテキストコントロールを持つだろう。ダイアログ自身は、その子として、テキストコントロールおよびボタンを持つだろう。

この例でフォーカスをもつウィジェットがダイアログボックスでテキストコントロールであった場合、キー入力は、グラフィカルシステムから①ウェブブラウザー、②タブ、③ダイアログ、そして最後に④テキストコントロールへ流される。

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

6.6.2 データモデル

A top-level traversable has system focus when it can receive keyboard input channeled from the operating system, possibly targeted at one of its active document's descendant navigables.

ブラウザーウィンドウがフォーカスを失うときにシステムフォーカスは失われるが、URLバーなどのブラウザーウィンドウ内の他のシステムウィジェットにも失われる可能性がある。

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

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

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

フォーカス可能領域DOMアンカー
次のすべての基準を満たす要素: 要素自身。

iframe<input type=text>、時に<a href=""> (プラットフォーム慣習に依存する)。

レンダリングされているおよび不活性でないimg要素に関連するイメージマップにおけるarea要素の形状。img要素

次の例において、それぞれ画像の、area要素は2つの形状を作成する。最初の形状のDOMアンカーは、最初のimg要素であり、2つめの形状のDOM anchorは、2つめのimg要素である。

<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">
要素のサブウィジェットを提供されるユーザーエージェントは、レンダリングされているかつ実際に無効または不活性でない。フォーカス可能領域がサブウィジェットとなる要素。

video要素に対するユーザーに公開されるユーザーインターフェイスにおけるコントロール<input type=number>のスピンコントロールバージョンにおけるアップ・ダウンボタン、キーボード入力を用いた開くまたは閉じるために要素を有効にするdetails要素のレンダリングの一部。

レンダリングされているかつ不活性でない要素のスクロール可能な領域。スクロール可能な領域のスクロールが作成されたボックスに対する要素

CSS 'overflow'プロパティの'scroll'値が典型的にスクロール可能領域を作成する。

非nullのブラウジングコンテキストがあり、不活性ではないDocumentビューポートビューポートが作成されたDocument

iframeのコンテンツ。

特にアクセシビリティを支援するために、またはプラットフォームの規則によりよく一致させるために、ユーザーエージェントによってフォーカス可能な領域であると判断される他の要素または要素の一部。 要素。

ユーザーエージェントは、すべてのリストアイテムの箇条書きをシーケンシャルにフォーカス可能にして、その結果ユーザーがリストをより簡単にナビゲートできるようにすることができる。

同様に、ユーザーエージェントは、title属性をもつすべての要素をシーケンシャルにフォーカス可能にして、その結果それら属性の助言情報にアクセスすることができる。

A navigable container (e.g. an iframe) is a focusable area, but key events routed to a navigable container get immediately routed to its nested navigable's active document. Similarly, in sequential focus navigation a navigable container essentially acts merely as a placeholder for its nested navigable's active document.


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 nested navigable: set candidate to the active document of that navigable container's nested 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属性

Global_attributes/tabindex

Support in all current engines.

FirefoxYesSafariYesChromeYes
Opera?EdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

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

以下に、可能なtabindex属性値の動作の概要を提供する。

省略(または非整数値)
ユーザーエージェントは、要素がフォーカス可能かどうかを決定する。もしそうであるならば、その要素がシーケンシャルフォーカス可能またはクリックフォーカス可能(もしくはその両方)かを決定する。
−1(または他の負の整数値)
要素がフォーカス可能になり、著者がその要素をクリックフォーカス可能にするが、シーケンシャルフォーカス可能にしないことを示す。ユーザーエージェントは、たとえばプラットフォームの規則に従った特定の要素タイプ、またはキーボードのみのユーザーのために、クリックおよびシーケンシャルフォーカスの可能性に関するこの設定を無視する場合がある。
0
要素をフォーカス可能にし、著者がその要素をクリックフォーカス可能シーケンシャルフォーカス可能の両方を好むことを示す。ユーザーエージェントは、クリックおよびシーケンシャルフォーカスのこの設定を無視する場合がある。
正の整数値
0と同じように動作するが、さらに、tabindex順のフォーカスナビゲーションスコープ内で相対的な順序を作成するため、tabindex属性値がより大きい要素は後から来る。

tabindex属性は、要素をフォーカス不可にするために使用できないことに注意する。ページ著者ができる唯一の方法は、要素を無効にする、または要素を不活性にすることである。

6.6.4 フォーカス管理API

documentOrShadowRoot.activeElement

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

For the purposes of this API, when a child navigable is focused, its container is focused within its parent's active document. For example, if the user moves the focus to a text control in an iframe, the iframe is the element returned by the activeElement API in the iframe's node document.

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

document.hasFocus()

キーイベントが文書を通してまたは文書に向かって送られる場合にtrueを返し、そうでなければfalseを返す。大まかにいって、これは文書、この内側でネストされた文書、フォーカスされていることに対応する。

window.focus()

Moves the focus to the window's navigable, if any.

element.focus([ { preventScroll: true } ])

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

If the element is a navigable container, moves the focus to its nested navigable instead.

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

element.blur()

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

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

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

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

6.6.5 autofocus属性

autofocusコンテンツ属性は、ページが読み込まれるとすぐに、または自身を見つけてその中でdialogを表示されるとすぐに、要素をフォーカスすることを著者に許可し、ユーザーが手動で主な要素にフォーカスすることなしに入力をすぐに開始できるようにする。

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

要素の直近の祖先オートフォーカス範囲のルート要素は、その要素がdialog要素である場合、要素そのものであり、そうでなければ、もしあれば要素の直近の祖先dialog要素であり、そうでなければ要素の最後の包括祖先要素である。

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

次の断片において、文書が読み込まれるとき、テキストコントロールにフォーカスされる。

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

autofocus属性は、フォームコントロールだけでなく、すべての要素に適用される。 これにより、次のような例が可能になる:

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

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

6.7.1 導入

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

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

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

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

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

この例において、著者はショートカットキーを使用して呼び出すことができるボタンを提供してきた。フルキーボードをサポートするために、著者は可能なキーとして"C"を提供している。To support devices equipped only with numeric keypads, the author has provided "1" as another possible key.

<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'));

異なるプラットフォーム上のブラウザーは、たとえ同じキーの組み合わせであっても、そのプラットフォーム上で普及している規則に基づいて異なるラベルを表示する。たとえば、キーの組み合わせが、Controlキー、Shiftキー、および文字Cである場合、Macのブラウザーが"^⇧C"を表示するかもしれない一方で、Windowsのブラウザーは"Ctrl+Shift+C"を表示するかもしれない。一方でEmacsのブラウザーは単に"C-C"を表示するかもしれない。同様に、キーの組み合わせがAltキーとEscキーである場合、Windowsは"Alt+Esc"を使用するかもしれず、Macは"⌥⎋"を使用するかもしれず、Emacsのブラウザーは、"M-ESC"または"ESC ESC"を使用するかもしれない。

したがって、一般に、accessKeyLabel IDL属性から返された値を解析しようとするのは賢明ではない。

6.7.2 accesskey属性

Global_attributes/accesskey

Support in all current engines.

FirefoxYesSafariYesChromeYes
Opera?EdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

すべての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>

次の例において、検索フィールドは2つの可能なアクセスキー、"s"と"0"(この順番で)が与えられる。テンキー付きの小さなデバイス上のユーザーエージェントは単なる簡素なキー0を選ぶかもしれないが、フルキーボードを搭載したデバイスでのユーザーエージェントは、ショートカットキーとしてCtrl + Alt + Sを選ぶかもしれない:

<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>

あるユーザーエージェントにおいて、ボタンのラベルは"Compose(⌘N)"になるかもしれない。別のものにおいて、これは"Compose(Alt+⇧+1)"になるかもしれない。ユーザーエージェントがキーを割り当てない場合、単に"Compose"になる。正確な文字列は割り当てられるアクセスキーが何であるか、およびどのようにユーザーエージェントがそのキーの組み合わせを表すかに依存する。

6.8 編集

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

HTMLElement/contentEditable

Support in all current engines.

Firefox3+Safari3+Chrome1+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Global_attributes/contenteditable

Support in all current engines.

Firefox3+SafariYesChromeYes
Opera9+EdgeYes
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

contenteditableコンテンツ属性は、キーワードが空文字列、true、おとびfalseとなる列挙属性である。空の文字列およびtrueキーワードは、true状態に対応する。falseキーワードは、false状態に対応する。さらに、inherit状態という第3の状態が存在する。これは欠損値のデフォルトおよび不正値のデフォルトである。

true状態は、要素が編集可能であることを示す。inherit状態は、その親が存在する場合、要素が編集可能であることを示す。false状態は、要素が編集可能でないことを示す。

たとえば、ユーザーがHTMLを使用する記事を書くことが期待される、新しい記事を公開するためにformおよびtextareaを持つページを考えてみる:

<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>

スクリプトを有効にする場合、textarea要素は、contenteditable属性を使用して、代わりにリッチテキストコントロールに置き換えることができる:

<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>

たとえば挿入リンクを挿入する機能は、document.execCommand()APIを使用する、またはSelectionAPIおよび他のDOM APIを使用して実装することができる。[EXECCOMMAND] [SELECTION] [DOM]

contenteditable属性はまた、大きな効果を使用することができる:

<!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"、"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'がデフォルト値のままである場合、いくつかのコーナーの場合において、行の折り返しは正しく動作しない。

デフォルト'normal'値が代わりに使用される場合に発生する問題の例として、単語の間に2つのスペース(ここでは"␣"によって表される)とともに、"yellow␣␣ball"と入力したユーザーの場合を考える。'white-space'のデフォルト値('normal')のための場所での編集規則ともに、結果のマークアップは、"yellow&nbsp; ball"または"yellow &nbsp;ball"のいずれかで構成される。すなわち、2つの単語間の非開票スペースに加えて、通常スペースが存在する。'white-space'に対する'normal'値は共に相殺するために隣接する通常スペースを必要とするため、これは必要である。

前者の場合において、たとえ行の末尾で"yellow"単独で一致するとしても、"yellow⍽"は次の行("⍽"は非改行スペースを表すためにここで使用されている)に折り返す。後者の場合において、行の先頭に包まれる場合、"⍽ball"は非改行スペース由来の可視インデントを持つだろう。

しかし、'white-space'が'pre-wrap'に設定される場合、編集規則は、代わりに単に単語間に2つの通常のスペースを置き、2つの単語が行末で分割されるべきであり、スペースはレンダリングから削除されてきれいになる。

6.8.4 スペルと文法チェック

Global_attributes/spellcheck

Support in all current engines.

FirefoxYesSafariYesChrome9+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android57+Safari iOS9.3+Chrome Android47+WebView Android?Samsung Internet?Opera Android37+

spellcheck属性は、キーワードが空文字列、trueおよびfalseとなる列挙属性である。空の文字列およびtrueキーワードは、true状態に対応する。falseキーワードは、false状態に対応する。さらに、default状態という第3の状態が存在する。これは欠損値のデフォルトおよび不正値のデフォルトである。

true状態は、要素がそのスペルおよび文法チェックを持つことを示す。default状態は、以下で定義されるように、親要素の独自のspellcheck状態におそらく基づいて、デフォルトの動作に応じて動作する要素であることを示す。false状態は、要素がチェックされないことを示す。

element.spellcheck [ = value ]

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

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

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

6.8.5 自動大文字化

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

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

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

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

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

default

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

none

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

sentences

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

words

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

characters

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

Global_attributes/autocapitalize

Support in all current engines.

Firefox🔰 83+SafariNoChrome43+
Opera?Edge79+
Edge (Legacy)?Internet Explorer?
Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

キーワード状態
offnone
none
onsentences
sentences
wordswords
characterscharacters

不正値のデフォルトsentences状態である。欠損値のデフォルトdefault状態である。

element.autocapitalize [ = value ]

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

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

6.8.6 入力モダリティ:inputmode属性

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

Global_attributes/inputmode

Support in all current engines.

Firefox95+SafariNoChrome66+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android79+Safari iOS12.2+Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

キーワード説明
noneユーザーエージェントは仮想キーボードを表示すべきではない。このキーワードは、独自のキーボードコントロールをレンダリングするコンテンツに役立つ。
textユーザーエージェントは、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきである。
telユーザーエージェントは、電話番号入力が可能な仮想キーボードを表示すべきであある。これは、数字0〜9、"#"文字、および"*"文字のキーを含むべきである。一部のロケールで、これはまた、アルファベットのニーモニックラベル(たとえば、米国で、"2"キーはまた、歴史的に文字A、B、およびCで標識されている)を含むことができる。
urlユーザーエージェントは、"/"と"."文字、"www"や".com"のようなドメイン名の中で見つかった文字列を簡単に入力するための、URLの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきである。
emailユーザーエージェントは、"@"文字および"."文字のような、電子メールアドレスの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきである。
numericユーザーエージェントは、数字入力が可能な仮想キーボードを表示すべきであある。このキーワードは、PIN入力に便利である。
decimalユーザーエージェントは、小数入力が可能な仮想キーボードを表示すべきであある。ロケールの数値キーおよびフォーマットセパレーターを表示すべきである。
searchユーザーエージェントは、検索に最適化された仮想キーボードを表示すべきである。

6.8.7 入力モダリティ:enterkeyhint属性

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

Global_attributes/enterkeyhint

Support in all current engines.

Firefox94+Safari13.1+Chrome77+
Opera66+Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android57+

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

キーワード説明
enterユーザーエージェントは、典型的には新しい行を挿入する、操作'enter'の合図を提示すべきである。
doneユーザーエージェントは、典型的には入力するものがもう何もなく、そして input method editor (IME)は閉じられることを意味する、操作'done'の合図を提示すべきである。
goユーザーエージェントは、典型的にはユーザーがタイプしたテキストのターゲットにユーザーを連れて行くことを意味する、操作'go'の合図を提示すべきである。
nextユーザーエージェントは、典型的にはテキストを受け付ける次のフィールドにユーザーを連れて行く、操作'next'の合図を提示すべきである。
previousユーザーエージェントは、典型的にはテキストを受け入れる前のフィールドにユーザーを連れて行く、操作'previous'の合図を提示すべきである。
searchユーザーエージェントは、典型的にはユーザーがタイプしたテキストの検索の結果にユーザーを連れて行く、操作「検索」の合図を提示すべきである。
sendユーザーエージェントは、典型的にはテキストをそのテキストのターゲットに配信する、操作'send'の合図を提示すべきである。

6.9 ページ内検索

6.9.1 導入

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

Access to the find-in-page feature is provided via a find-in-page interface. これはユーザーエージェントが提供するユーザーインターフェイスであり、ユーザーが入力と検索のパラメーターを指定できるようする。このインターフェイスは、ショートカットまたはメニュー選択の結果として表示される。

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

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

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

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

6.9.2 detailshidden=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.

When find-in-page auto-expands a details element like this, it will fire a toggle event. As with the separate scroll event that find-in-page fires, this event could be used by the page to discover what the user is typing into the find-in-page dialog. If the page creates a tiny scrollable area with the current search term and every possible next character the user could type separated by a gap, and observes which one the browser scrolls to, it can add that character to the search term and update the scrollable area to incrementally build the search term. By wrapping each possible next match in a closed details element, the page could listen to toggle events instead of scroll events. This attack could be addressed for both events by not acting on every character the user types into the find-in-page dialog.

6.9.3 選択との相互作用

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