8.1.1 마크업 오류 방지

요구 사항

마크업 언어로 작성한 콘텐츠는 해당 언어의 문법을 최대한 준수하는 것이 바람직하며, 특히 다음 오류가 없어야 합니다.

• 요소의 열고 닫음 일치: 표준에서 따로 정한 경우를 제외하고 시작 태그와 끝 태그가 있어야 합니다.
• 요소의 중첩 방지: 시작·끝 태그의 순서가 포함 관계에 어긋나지 않아야 합니다.
• 중복된 속성 사용 금지: 한 요소 안에서 같은 속성을 중복 선언하지 않습니다.
• id 속성값 중복 금지: 한 문서에서 같은 id 값을 중복 선언하지 않습니다.

왜 필요한가요

요소가 제대로 닫히지 않거나 잘못 중첩되면 브라우저마다 문서 구조를 다르게 해석해 보조기술에 잘못된 정보가 전달될 수 있습니다. id가 중복되면 레이블·설명 연결이 엉뚱한 요소를 가리킵니다.

도움받는 사용자

• 화면낭독기 등 보조기술 사용자
• 다양한 브라우저·기기를 쓰는 모든 사용자

적용 방법

W3C Nu HTML Checker 같은 마크업 검사기로 확인하고, 컴포넌트에서 id를 만들 때는 고유한 값을 생성합니다.

<!-- 비권장 -->
<p><strong>굵게 <em>기울임</strong></em></p>      <!-- 중첩 오류 -->
<input id="email" class="a" class="b">             <!-- 속성 중복 -->
<label for="q">검색</label><input id="q">
<label for="q">우편번호</label><input id="q">      <!-- id 중복 -->

<!-- 권장 -->
<p><strong>굵게 <em>기울임</em></strong></p>
<input id="email" class="a b">
<label for="q-site">검색</label><input id="q-site">
<label for="q-zip">우편번호</label><input id="q-zip">

// 컴포넌트마다 고유 id 생성
let seq = 0;
const uid = (prefix) => prefix + '-' + (++seq);

사례

<ul>
  <li><a href="/a">소개</a></li>
  <li><a href="/b">연혁</a></li>
</ul>

<ul>
  <li><a href="/a">소개</li></a>
  <li>연혁
</ul>

자주 하는 실수

• 같은 컴포넌트를 여러 번 넣어 id가 중복됩니다.
• 요소의 중첩 순서가 어긋나 있습니다.
• 한 요소에 같은 속성을 두 번 선언합니다.
• 필수 끝 태그가 빠져 있습니다.

검사 방법

• W3C 마크업 검사 서비스(Nu HTML Checker)로 페이지를 검사해 요소의 열고 닫음, 중첩, 속성 중복, id 중복 오류를 확인합니다.
• 동적으로 생성되는 화면은 브라우저에서 렌더링된 DOM을 저장해 검사합니다.
• 인증 심사에서는 전문가 심사와 장애인 사용자 심사로 확인하므로, 자동 검사 도구 결과만으로 준수를 판단하지 않습니다.

다른 지침의 대응 항목