フォーカス

フォーム コントロール、リンク、ボタンなどのインタラクティブな要素は、デフォルトではフォーカス可能かつタブで操作できます。タブ可能要素は、ドキュメントのシーケンシャル フォーカス ナビゲーション順序の一部です。他の要素は不活性です。つまり、インタラクティブではありません。HTML 属性を使用すると、インタラクティブな要素を不活性にし、不活性な要素をインタラクティブにできます。

デフォルトでは、ナビゲーション フォーカスの順序は、ソースコードの順序である視覚的な順序と同じです。この順序を変更できる HTML 属性と、コンテンツの表示順序を変更できる CSS プロパティがあります。HTML でタブの順序を変更したり、CSS で視覚的なレンダリング順序を変更したりすると、ユーザー エクスペリエンスを損なう可能性があります。

CSS や HTML を使用して、認識されるタブの順序と実際のタブの順序を変更しないでください。次の 2 つの例でわかるように、タブの順序が視覚的に期待される順序と異なると、ユーザーにとってわかりにくく、ユーザー エクスペリエンスに悪影響を及ぼします。

この例では、tabindex 属性の値によってタブオーダーが混乱しています。

この例では、CSS によって、タブによる移動の順序とコンテンツの視覚的な順序に違いが生じています。

flex-flow: row-reverse; 宣言によって、視覚的な順序が逆になりました。さらに、6 番目の単語「This」には CSS の order プロパティが適用され、この単語が視覚的に移動されました。タブ操作はコードの順序であり、視覚的な順序と一致しなくなるため、キーボード ユーザーが接続できなくなります。

不活性要素をインタラクティブにする

contenteditable 属性と tabindex 属性（グローバル属性）を任意の要素に追加して、プロセス内でフォーカスできるようにします。フォーカス可能な要素は、マウスまたはポインタでフォーカスすることもできます。それには、autofocus 属性を設定するか、element.focus() などのスクリプトを使用します。

tabindex 属性

属性で導入されたグローバル tabindex 属性を使用すると、通常は Tab キーを使用してフォーカスを受け取れない要素がフォーカスを取得できるようになります。つまり、この名前の由来です。

tabindex 属性は、値として整数を取ります。負の値を指定すると、要素はフォーカス可能ですが、タブ操作はできなくなります。tabindex の値を 0 にすると、要素がフォーカス可能かつタブ操作可能になり、適用される要素がソースコード順にシーケンシャル フォーカス ナビゲーション順序に追加されます。値を 1 以上に設定すると、要素はフォーカス可能かつタブ操作可能になりますが、タブ操作の優先順位に追加されます。上記のように、これは回避する必要があります。

このページの共有ボタン <share-action> はカスタム要素です。tabindex="0" は、通常はフォーカスできない次の要素をキーボードのデフォルトのタブ順序に追加します。

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

このページには別のカスタム要素があります。ローカル ナビゲーションに、負の tabindex 値が設定されたカスタム要素があります。

<web-navigation-drawer type="standard" tabindex="-1">

tabindex 属性に負の値を指定すると、要素がフォーカス可能になりますが、タブで移動できなくなります。この要素は、HTMLElement.focus() などを介してフォーカスを受け取れますが、シーケンシャル フォーカス ナビゲーション順序の一部ではありません。タブが操作できないフォーカス可能な要素の慣例では、tabindex="-1" を使用します。tabindex="-1" をインタラクティブな要素に追加すると、タブで操作できなくなります。

element.focus() メソッドを使用すると、フォーカス可能な要素にフォーカスを設定できます。ブラウザでは、フォーカスされている要素がスクロールされて表示されます。このため、element.focus({preventScroll:true}) は使用しないでください。非表示の要素にフォーカスすると、ユーザー エクスペリエンスが低下するためです。

現在フォーカスされている要素を調べるためにドキュメントに対してクエリを実行するには、読み取り専用の Document.activeElement プロパティを使用します。

tabindex が 1 以上の要素は、個別のタブシーケンスに含まれています。Codepen では、タブは別の順序で（最小値から最大値の順に）開始され、その後、通常の順序（tabindex が設定されていない、または tabindex="0"）のタブに進みます。

tabindex を正の値にすると、要素が優先フォーカス シーケンスに配置され、フォーカス順序が混乱する可能性があります。tabindex を使用して DOM 順序を変更することは避けてください。タブによる移動の順序が変更されると、ユーザー エクスペリエンスが低下するだけでなく、デベロッパーにとって管理やメンテナンスが難しくなります。

contenteditable 属性

contenteditable 属性についてはすでに説明しました。任意の要素で contenteditable="true" を設定すると、その要素は編集可能でフォーカス可能になり、タブオーダーの一部になります。フォーカスの動作は tabindex="0" の設定と似ていますが、同じではありません。ネストされた contenteditable 要素はフォーカス可能ですが、タブ操作はできません。ネストされた contenteditable 要素をタブ可能にするには、tabindex="0" を追加して、順次フォーカス ナビゲーションの順序に追加します。

インタラクティブな要素にフォーカスする

autofocus 属性

ブール値 autofocus は任意の要素に設定できるグローバル属性ですが、不活性な要素をインタラクティブにすることはありません。ページが読み込まれると、autofocus 属性が設定された最初のフォーカス可能な要素がフォーカスされます（その要素が表示され、<dialog> にネストされていなければ）。

コンテンツにフォーカスを自動設定する場合、わかりにくいことがあります。フォーム コントロールで autofocus を設定すると、ページの読み込み時にフォーム コントロールが表示されます。スクリーン リーダーのユーザーやビューポートが小さいユーザーなど、すべてのユーザーがフォームの説明を「確認」できない可能性があります。通常、フォーム コントロールの通常表示されるラベルをスクロールすることさえあります。autofocus 属性によってドキュメントのシーケンシャル フォーカス ナビゲーション順序が変更されることはありません。自動フォーカスされた要素の前のシーケンス内の要素は単にスキップされます。このような理由から、autofocus 属性を含めることはおすすめしません。

「autofocus を使用しない」推奨事項の例外は、<dialog> 要素内に autofocus 属性を含めることです。ダイアログを開くと、ブラウザは <dialog> 内の最初のフォーカス可能なインタラクティブ要素に自動的にフォーカスするため、要素に autofocus を指定する必要はありません。ダイアログが開いたときに、ダイアログ内の特定のインタラクティブ要素がフォーカスされるようにするには、その要素に autofocus 属性を追加します。

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

閉じる <button> で設定された autofocus 属性により、ダイアログが開いたときにフォーカスを受け取るようになります。ダイアログの最初の要素として、どのような場合でもフォーカスが取得されます。デフォルトでは、ダイアログを開くと、ダイアログ内の別の要素に autofocus 属性が設定されていない限り、ダイアログ内の最初のフォーカス可能な要素がフォーカスを受けます。

インタラクティブな要素を不活性化する

タブ操作からインタラクティブな要素を削除できる HTML 属性もあります。フォーカス可能な要素に負の tabindex を追加し、サポートするフォーム コントロールに disabled 属性を追加し、コンテナにグローバル inert 属性を追加すると、要素をタブでタブできなくなります。これら 3 つの属性を交換することはできません。

負の tabindex 値

前述のように、負の値の tabindex 属性により、要素はフォーカス可能ですが、タブ操作はできなくなります。デフォルトでフォーカス可能な要素に tabindex="0" を追加する場合、リンク、ボタン、フォーム コントロール、contenteditable である要素などは必要ありません。負の値の tabindex を含めると、通常はタブで操作できる要素が連続フォーカス ナビゲーションの順序から削除されます。

負の tabindex 値を指定すると、キーボード ユーザーはインタラクティブな要素にフォーカスできなくなりますが、要素は無効になりません。ポインタ ユーザーは引き続き要素にフォーカスできます。要素を無効にするには、disabled 属性を使用します。

無効

ブール値の disabled 属性により、それが適用されるフォーム コントロールと、その子孫（存在する場合）はフォーカス不能になります。無効なフォーム コントロールはフォーカスできず、クリック イベントを取得せず、フォームの送信時に送信されません。disabled はグローバル属性ではありません。<button>、<input>、<optgroup>、<option>、<select>、<textarea>、フォームに関連付けられたカスタム要素、<fieldset> に適用されます。<optgroup> または <fieldset> に設定すると、<fieldset> の最初の <legend> のコンテンツを除き、すべての子フォーム コントロールが無効になります。

disabled をサポートする同じ要素を、:disabled 疑似クラスと :enabled 疑似クラスでもターゲットにできます。通常、disabled 属性で無効になっている要素は、accent-color が設定されていても、ユーザー エージェント スタイルシートによってライトグレーに設定されます。

ブール値属性であるため、この属性が存在すると、有効になっていない要素は無効になります。この属性を false に設定することはできません。無効化された要素を再度有効にするには、通常は Element.removeAttribute('disabled') を使用して属性を削除する必要があります。

HTMLInputElement.disabled プロパティを使用すると、入力が無効になっているかどうかを確認できます。disabled はグローバル属性ではないため、HTMLElement から継承されません。ただし、HTMLSelectElement、HTMLTextareaElement など、サポート要素のインターフェースはすべて同じ読み取り専用プロパティを持ちます。

disabled 属性は、tabindex または contenteditable を介してフォーカス可能に設定される、通常は inert 要素には適用されません。また、<form> 要素自体にも適用されません。これらを無効にするには、グローバル inert 属性を使用します。

inert 属性

inert グローバル ブール値属性を要素に追加すると、その要素とネストされたすべてのコンテンツが無効になり（クリックもタブも可能でなく）、ユーザー補助ツリーから削除されます。inert はどの要素にも適用できますが、通常は、画面外や非表示のコンテンツなど、コンテンツのセクションに使用されます。

disabled をフォーム コントロールに適用すると、ブラウザにはデフォルトのスタイルが用意されており、:disabled 疑似クラスを使用してスタイルを設定できます。inert 属性には視覚的なインジケーターがなく、一致する疑似クラスはありません（ただし、[inert] 属性セレクタは一致します）。

不活性を示すスタイルのない表示コンテンツで inert を使用すると、ユーザー エクスペリエンスが低下する可能性があります。スクリーン リーダーのユーザーは不活性なコンテンツを利用できないため、目の見えるスクリーン リーダーのユーザーが、ユーザー補助ツールで利用できないコンテンツを画面に表示してしまうと、混乱を招く可能性があります。CSS によって不活性度を明確にします。

フォーカスが非表示のコンテンツに移動しないようにする必要があります。画面外にレンダリングされ、フォーカスされたときに自動的に表示されないものは、ワームキーにする必要があります。このページの「コンテンツに移動」のように、非表示のコンテンツがフォーカスされたときに表示される場合は、不活性にする必要はありません。

理解度をチェックする

理解度をチェックする

集中力の理解度を確認しましょう。