HTML 중복 id, 먼저 구분해야 할 것

왜 알아야 할까

중복 id: 정상처럼 보이는 한 사례만으로는 동작 범위를 이해하기 어렵습니다. 대표 입력에서는 문제없다가 경계값, 느린 응답, 배포 직후처럼 조건이 달라질 때 결과가 바뀔 수 있습니다.

문서의 id는 고유해야 하며 중복되면 label, fragment, DOM lookup과 ARIA reference가 예상하지 않은 요소를 가리킬 수 있습니다.

동작을 나누어 보기

브라우저가 파싱해 DOM과 접근성 트리를 만드는 문서 구조에서 어느 경계가 결과를 결정하는지 먼저 봅니다. 원본 문자열, browser가 보정한 DOM과 실제 기본 동작을 구분합니다. validator 오류 위치와 DOM에서 달라진 구조를 함께 보면 원인을 좁힐 수 있습니다.

구분	짧은 예시
기대 결과	중복 id: 정상 조건에서 사용자가 받아야 할 결과
실제 결과	같은 입력에서 처음 달라진 값·상태·오류
판별 자료	validator, DOM tree, accessibility tree, network와 실제 폼 제출 payload를 함께 확인한다

작게 적용하는 방법

시맨틱 요소와 기본 브라우저 동작을 우선하고 ARIA는 네이티브 의미로 표현할 수 없을 때만 보완한다. 문서 구조와 요소의 기본 의미를 먼저 바로잡고 JavaScript와 ARIA는 native HTML로 표현할 수 없는 동작만 보완합니다.

대표 사례 하나, 값이 달라지는 경계 하나, 예상 가능한 실패 하나를 같은 순서로 확인합니다. 키보드, 스크린리더, 확대, 느린 네트워크와 JavaScript 비활성 조건에서 핵심 흐름을 검사한다. validator, DOM, keyboard와 JavaScript 비활성 조건에서 링크·폼·문서 구조의 핵심 흐름이 유지되는지 확인합니다.

공식 문서와 적용 범위

• MDN HTML (새 창에서 열림)

문서의 기본값과 동작은 version에 따라 달라질 수 있습니다. 지원하는 browser, viewport, 입력 방식과 실제 network 조건에서 다시 확인합니다.