마크업 오류 방지 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

8.1.1 마크업 오류 방지

견고성

국제 기준 (WCAG 2.2)

4.1.1

어떻게 검사하나요

자동 검사가 원본 HTML을 표준 파서로 재파싱해 닫는 태그 누락·잘못된 중첩·속성 중복·id 중복을 판정하고, 렌더링된 DOM에서 ARIA 참조 id 중복도 확인합니다. 한계: 파서가 조용히 복구하는 잘못된 중첩(예: p 안의 div)과 닫는 태그 생략이 허용되는 요소(li·td 등)의 오류는 검출되지 않으므로, 전체 문법 점검이 필요하면 W3C Nu HTML Checker(validator.w3.org/nu)를 병행하세요.

자동 검사로 잡히는 부분

이 항목은 4개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 조작 가능한 요소의 id가 중복됩니다 duplicate-id-active

  id가 중복되면 label 연결, aria 참조, 스크립트가 잘못된 요소를 가리킵니다. 모든 id를 고유하게 만드세요.

• ARIA가 참조하는 id가 중복됩니다 duplicate-id-aria

  aria-labelledby 등이 참조하는 id가 중복되면 보조기기가 어떤 요소를 읽을지 보장되지 않습니다. id를 고유하게 만드세요.

• 마크업 구조 오류가 있습니다 a11ychk:markup-validity

  원본 HTML에서 요소 열고 닫음·중첩·속성 선언 오류가 발견되었습니다. 브라우저는 오류를 임의로 복구해 렌더링하지만, 복구 결과가 브라우저·보조기기마다 다를 수 있어 스크린 리더가 콘텐츠를 잘못 읽는 원인이 됩니다. 위치는 원본 소스의 행:열로 표시됩니다.

  주요 유형: - 닫는 태그 누락 또는 잘못된 중첩(먼저 연 요소를 나중에 닫아야 함) - 한 요소에 같은 속성을 두 번 선언 - 빈 요소가 아닌 태그의 자기 닫음(<div/>) — HTML에서는 무시되어 요소가 닫히지 않습니다

  <!-- 잘못된 예 -->
  <b><i>강조</b></i>
  <div class="a" class="b">중복 속성</div>
  <!-- 올바른 예 -->
  <b><i>강조</i></b>
  <div class="a b">병합</div>

• 문서 안에서 id가 중복됩니다 a11ychk:duplicate-id

  id는 문서 안에서 고유해야 합니다. 중복되면 label for·aria-labelledby·앵커 이동·스크립트가 어느 요소를 가리킬지 보장되지 않습니다. axe의 duplicate-id 검사는 조작 요소·ARIA 참조 id만 보지만, 이 검사는 원본 소스의 모든 id를 봅니다. 위치는 원본 소스의 행:열로 표시됩니다.

  <!-- 잘못된 예 -->
  <section id="content">…</section>
  <footer id="content">…</footer>
  <!-- 올바른 예 -->
  <section id="content">…</section>
  <footer id="footer">…</footer>