웹페이지에 중복된 ID 속성 값 "x"가 있는 것으로 나타났습니다.

Question

저는 Angular 7을 사용하고 있습니다. 세 개의 구성요소 [a, b, c]는 ID가 [x]인 입력 요소를 사용하지만, 구성요소 [b]도 ID가 [x] 요소인 4개의 입력을 사용합니다. ID가 고유해야 하므로 접근성 문제가 발생합니다. 테스트 사례에서는 'getElementById'를 사용하여 값을 검색하고 특정 결과를 기대합니다.

이제 제가 한 일은 이러한 ID 선택자를 클래스로 변경한 것입니다. 왜냐하면 고유할 필요가 없었고 테스트 사례인 'querySelector'도 변경했기 때문입니다.

"웹 페이지에서 중복 ID 속성 값 'x'가 발견되었습니다."와 같은 오류가 계속 발생하는 이유에 대해 알고 계시나요?

Answer 1

접근성 관점에서 볼 때 WCAG 4.1.1 구문 분석 은 고유 ID를 갖는 방법에 대한 가이드입니다. 가이드에는 기본적으로 유효한 HTML이 있어야 한다고 나와 있지만 접근성 문제를 일으킬 수 있는 잘못된 HTML 유형 네 가지만 나열되어 있습니다.

1. " 요소에는 완전한 열기 및 닫기 태그가 있습니다.
2. 요소는 사양에 따라 중첩됩니다.
3. 요소에는 중복된 속성이 없습니다.
4. 모든 ID는 고유합니다.”

잘못된 HTML을 생성하는 방법에는 여러 가지가 있지만 이 네 가지 방법도 접근성 문제를 일으킬 수 있습니다. 이 네 가지 문제 중 하나라도 유효하지 않은 HTML이 있다는 의미이므로 단순한 접근성 문제 이상의 문제에 직면할 수도 있습니다. 내 생각에 당신은 잘못된 HTML을 갖고 싶지 않을 것 같습니다.

귀하의 경우에는 네 번째 나열된 오류가 표시됩니다. HTML 사양에는 ID가 고유해야 한다고 명시되어 있습니다.

당신이 언급한 내용:

ID가 중복된 경우 getElementById中获得什么？ getElementById의 사양 을 원하세요.

당신은 또한 다음과 같이 말했습니다:

이것은 no 요소에 ID가 있다는 뜻인가요? 다들 수업이 있나요? 접근성 검사 도구를 실행했는데 중복 ID에 대한 오류가 표시된다면 분명히 모든 ID를 클래스로 변환하지 않은 것입니다.