Web ページ内に重複した ID 属性値「x」があることが判明しました。

Question

Angular 7 を使用しています。3 つのコンポーネント [a、b、c] は id [x] の入力要素を使用しますが、コンポーネント [b] も id [x] 要素の 4 つの入力を使用します。 ID は一意である必要があるため、これによりアクセシビリティの問題が発生します。テスト ケースでは、「getElementById」を使用して値を取得し、特定の結果を期待します。

次に、これらの ID セレクターをクラスに変更しました。ID セレクターを一意である必要がなかったため、テスト ケース「querySelector」も変更しました。

「Web ページで重複した ID 属性値 'x' が見つかりました」と同じエラーが依然として発生する理由はありますか?

Answer 1

アクセシビリティの観点から見ると、WCAG 4.1.1 解析 は、一意の ID を持つためのガイドラインです。このガイドでは基本的に有効な HTML を使用する必要があると記載されていますが、アクセシビリティの問題を引き起こす可能性のある無効な HTML のリストは 4 種類のみです。

1. " 要素には完全な開始タグと終了タグがあります。
2. 要素は仕様に従ってネストされます。
3. 要素には重複した属性が含まれていません。
4. そして、どの ID も一意です。」

無効な HTML を生成する方法はたくさんありますが、これら 4 つの方法はアクセシビリティの問題を引き起こす可能性もあります。これら 4 つの問題のいずれかが発生した場合は、HTML が無効であることを意味するため、アクセシビリティの問題だけではない問題に直面している可能性があることに注意してください。

無効な HTML を含めたくないと思います。 つまり、あなたの場合、リストされた 4 番目のエラーが表示されます。

HTML 仕様

では、ID は一意である必要があると規定されています。 あなたが言及した内容:

ID が重複している場合、

getElementById

から何を取得できると考えられますか? getElementById の仕様 には次のように書かれています: あなたは次のようにも言いました:

これは、

要素には ID がないということですか?彼らは全員授業を受けていますか？アクセシビリティ スキャン ツールを実行し、ID の重複に関するエラーのフラグが立てられた場合は、明らかにすべての ID がクラスに変換されていません。