web-dev-qa-db-ja.com

tabindex -1が子要素に対して機能しない

Divタグがあり、中にコンテンツが読み込まれています。内部のコンテンツには、フォーカス可能なボタン、アンカー要素などを含めることができます。コンテンツを制御できませんが、「div」タグの属性を変更できます。

私の問題は、divタグにtabIndex -1を指定した場合でも、フォーカスがコンテンツ（アンカー、ボタンなど）に移動することです。

<!-- HTML content here -->
<div tabindex="-1" id="externalContent">
  <div>
    ...
    <button>click me</button> <!-- Focus shouldn't come here -->
  </div>
</div>
<!-- HTML content here -->

タブ移動中にコンテンツ全体をスキップする方法はありますか？確かに上記のコードでは動作しません。

htmlaccessibilitytabindex
14
Adarsh Konchady

tabindex="-1"を設定すると、スクリプトで要素のフォーカスを設定できますが、notはページのタブオーダーに配置します。また、何かの子outのキーボードタブオーダーを取得しません。

tabindex="-1"は、スクリプトまたはユーザーアクションの外部で更新したものにフォーカスを移動する必要がある場合に便利です。

要素をtabindexから完全に削除しようとしている場合、スクリーンリーダーまたはキーボードユーザーのいずれであっても、次のいずれかを選択する必要があります。

  1. （display: noneを介して）完全に非表示にします。
  2. 要素にスクリプトを使用して、要素がフォーカスを受け取ったときに、スクリプトが別の場所にフォーカスを移動するようにします。

コンテキスト（作業URL、これを実行する理由）がない場合、これはoppositeのアクセシビリティと非常によく似ています。非常に正当な理由がない限り、集中しないでください。

8
aardrian

なぜ誰もvisibility: hiddenについて言及していない理由がわかりません。 display: noneを設定すると、非視覚要素の寸法を処理するときにロジックが台無しになる場合があります。 visibilityはopacity: 0と同じようにディメンションを保持しますが、タブ可能な子も無効にします。

例：

<div style="visibility: hidden;">
    <a href="#">I'm only tabbable if my parent is visible!</a>
</div>
4
Nordling Art

要素を残すことができます[〜＃〜]両方[〜＃〜]visibleとunfocusable、およびその子。

HTMLプロパティinert： https://html.spec.whatwg.org/multipage/interaction.html#inert を介して行われます。

まだ広くサポートされていませんが、ポリフィルがあります https://github.com/WICG/inert 。

npm install --save wicg-inert

require('wicg-inert')

<section inert={true}>
  I am visible, but not focusable! 
</section>
1
lakesare

最も近い方法は、iframe要素を使用して、JavaScriptを使用して内部にHTMLを挿入することです。

<a href="somewhere.html">first link</a>
<iframe id="iframeid" tabindex="-1"></iframe>
<a href="somewhere_else.html">second link</a>

<script>
    document.getElementById('iframeid').contentWindow.document.body.innerHTML="<button>click me</button>";
</script>

ただし、これにより、キーボードからアクセスできないリンクやボタンが表示されるなど、アクセシビリティの問題が発生します。

0
Adam