aria-controlsはユーザーにとって正確に何ですか？どのようにAJAXの使用によって影響を受けますか？

Question

アクセシビリティサポートのための適切なロールと属性を持つ一連のタブがあります。タブコントロールがajax経由で読み込まれるコンテンツ。しかし、ロードされるコンテンツの各ラッパーにも、適切なタブ区画の役割と属性があります。

問題は、Chromeのアクセシビリティツールを使用して自動監査を実行すると、タブ区画に対応するIDが存在しないことを示すテストが失敗します。ロードされている）。正確なエラーには、「IDによって他の要素を参照するARIA属性は、DOM内に存在する要素を参照する必要があります。

対応するaria-controls属性のタブがアクティブになったら、IDが存在するため、これは実際にはエラーですか？あるいは、これは誤ったポジティブなケースです。なぜなら、それは自動化されたテストであり、そうすることができるからです。

要約すると、aria-controlsは何ですか。実際には現在DOMに存在するIDを参照する必要がありますか？

Answer 1

aria-controls制御された要素に移動する方法を支援技術に与えます。

この要素がDOMにないかアクセスできない場合は、エラーです。

Answer 2

idの要素を持つ要素（aria-controlsを持つ要素）は、ページのレンダリングでもJSの注入でも、同時に存在する必要があります。

DOMはUA/ATコンボで解析され、コントロールに到達する前にDOMが解析されます。 JS注入を使用する場合は、DOMが再解析されていることを確認する必要があります。

これはaria-ownsにも適用されます。

Answer 3

次のものがあなたのアーキテクチャで動作するかどうかわかりませんが、エラーの問題が解決されます。 ロード時にすべてのページになるようにタブを設計します。表示するべきではないものを、絶対位置指定と "left：-99em"のようなものを使って、ビューポートの外に配置します。 AJAXを使用して、タブが表示される時の位置をリセットします。その結果、タブは常にDOMの一部であるため、ARIA IDの依存関係は常に有効になります。