フォーカス

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

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

CSS や HTML を使用して、目に見えるタブの順序と実際のタブの順序を変更しないでください。次の 2 つの例で示すように、タブの順序は 想定した順序と異なる場合、ユーザーが混乱し、ユーザー エクスペリエンスに悪影響を及ぼします。

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

この例では、CSS により、コンテンツのタブ表示順序と表示順序の間に違いが生じています。

flex-flow: row-reverse; 宣言の表示順序が逆になっています。 さらに、6 番目の単語「This」には CSS の order プロパティが適用され、視覚的にこの単語が移動しました。 できます。タブシーケンスがコードの順序であり、視覚的な順序と一致しなくなり、切断が発生します。 おすすめします

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

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

tabindex 属性

グローバル tabindex 属性: attributes。他の方法ではフォーカスを受け取ることができない要素に、 通常は 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 はグローバル属性です。 任意の要素に設定できる）では、inert 要素がインタラクティブになることはありません。ページが読み込まれると、最初のフォーカス可能な要素が 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 の値が負の場合、キーボード ユーザーはインタラクティブな要素にフォーカスできなくなりますが、要素は無効になりません。Pointer ユーザーは要素に引き続き注意を向けることができます。要素を無効にするには、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 によって不活性化が非常に明確になります。

フォーカスが非表示コンテンツに移動しないようにしてください。自動的には画面外にレンダリングされるもの フォーカスされるタイミングを不活性にする必要があります。コンテンツが非表示の場合は、 このページの[コンテンツに移動]リンクのようにフォーカスされている場合 不活性化する必要はありません。

理解度をチェックする

理解度をチェックする

焦点に関する知識をテストします。