저는 Angular 7을 사용하고 있습니다. 세 개의 구성요소 [a, b, c]는 ID가 [x]인 입력 요소를 사용하지만, 구성요소 [b]도 ID가 [x] 요소인 4개의 입력을 사용합니다. ID가 고유해야 하므로 접근성 문제가 발생합니다. 테스트 사례에서는 'getElementById'를 사용하여 값을 검색하고 특정 결과를 기대합니다.
이제 제가 한 일은 이러한 ID 선택자를 클래스로 변경한 것입니다. 왜냐하면 고유할 필요가 없었고 테스트 사례인 'querySelector'도 변경했기 때문입니다.
"웹 페이지에서 중복 ID 속성 값 'x'가 발견되었습니다."와 같은 오류가 계속 발생하는 이유에 대해 알고 계시나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
접근성 관점에서 볼 때WCAG 4.1.1 구문 분석은 고유 ID를 갖는 방법에 대한 가이드입니다. 가이드에는 기본적으로 유효한 HTML이 있어야 한다고 나와 있지만 접근성 문제를 일으킬 수 있는 잘못된 HTML 유형 네 가지만 나열되어 있습니다.
잘못된 HTML을 생성하는 방법에는 여러 가지가 있지만 이 네 가지 방법도 접근성 문제를 일으킬 수 있습니다. 이 네 가지 문제 중 하나라도 유효하지 않은 HTML이 있다는 의미이므로 단순한 접근성 문제 이상의 문제에 직면할 수도 있습니다. 내 생각에 당신은 잘못된 HTML을갖고 싶지 않을 것 같습니다.
귀하의 경우에는 네 번째 나열된 오류가 표시됩니다.HTML 사양에는 ID가 고유해야 한다고 명시되어 있습니다.
당신이 언급한 내용:
ID가 중복된 경우
getElementById中获得什么？getElementById의 사양을 원하세요.당신은 또한 다음과 같이 말했습니다:
이것은no요소에 ID가 있다는 뜻인가요? 다들 수업이 있나요? 접근성 검사 도구를 실행했는데 중복 ID에 대한 오류가 표시된다면 분명히 모든 ID를 클래스로 변환하지 않은 것입니다.