フォーム コントロール、リンク、ボタンなどのインタラクティブな要素は、デフォルトではフォーカス可能かつタブで操作できます。タブ可能要素は、ドキュメントのシーケンシャル フォーカス ナビゲーション順序の一部です。他の要素は不活性です。つまり、インタラクティブではありません。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 によって不活性度を明確にします。
フォーカスが非表示のコンテンツに移動しないようにする必要があります。画面外にレンダリングされ、フォーカスされたときに自動的に表示されないものは、ワームキーにする必要があります。このページの「コンテンツに移動」のように、非表示のコンテンツがフォーカスされたときに表示される場合は、不活性にする必要はありません。
理解度をチェックする
理解度をチェックする
集中力の理解度を確認しましょう。
要素にフォーカスできない場合、何と記述しますか?
要素に disabled
属性がある場合、true は何ですか。