Accessibility 본문

4.1.1 마크업 오류 방지

마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

필요성

콘텐츠 소스 코드에 오류가 있으면, 브라우저마다 오류처리 방식이 달라 사용자에게 전달되는 정보에 차이가 발생할 수 있다.

대상

모두

적용기술

HTML Convention 가이드를 준수한다.

검사방법 및 QA 지표 산정방법

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
W3C 마크업 유효성 검사 도구 [http://validator.w3.org/]
수동 검사방법
  • 태그의 열고 닫음 체크
  • 태그의 중첩이 올 바른지 체크
  • 한 요소에 중복된 속성 선언 여부 체크
  • 한 페이지에 중복된 id 속성값 선언 여부 체크
오류수(건)
  • 태그가 열고 닫히지 않은 경우
  • 태그의 중첩이 올바르지 않은 경우
  • 한 요소에 중복된 속성을 선언한 경우
  • 한 페이지에 중복된 id 속성값을 선언한 경우
평가점수

100 - (수동 오류수 * 5)점

사례

태그의 열고 닫음
오류사례

아래는 p요소로 열고 닫을때 슬래시(/)를 빠뜨린 부분이다.

<p>요소를 여는 태그의 닫음 표시가 불명확한 문단입니다.<p>
우수사례

마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시작 태그와 끝나는 태그가 정의되어야 한다.

<p>요소를 여는 태그의 닫음 표시가 불명확한 문단입니다.</p>
태그의 중첩
오류사례

열고 닫는 태그가 나타내는 요소는 포함관계가 어긋나고 있다.

<h4 ...><a ...>공감! 네티즌리뷰.</h4></a>
우수사례

열고 닫는 태그가 나타내는 요소는 포함관계가 어긋나지 않는다.

<h4 ...><a ...>공감! 네티즌리뷰.</a></h4>
속성값의 정확한 사용
오류사례

속성값에 따옴표를 사용해야 할 경우, 따옴표를 그냥 사용하면 속성값의 종결 문자로 인식한다.

<input type="text" value=""가나다"">
우수사례

속성값에 따옴표를 사용해야 할 경우,(&quot;)로 사용해야 한다.

<input type="text" value="&quot;가나다&quot;">