: 모든 사용자가 기술에 영향을 받지 않고 웹 콘텐츠를 이용할 수 있어야 한다.
: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
웹 브라우저 내 모든 콘텐츠는 다양한 하드웨어 및 소프트웨어 환경에서 해석이 가능해야 합니다. 특히 장애인 및 고령자 등의 접근성을 높이기 위해 보조 기술(assistive technology)이 적용돼요. 보조 기술에는 스크린 리더, 대체 키보드, 대체 포인팅 장치 등이 포함됩니다. 중요한 것은 다양한 기술과 환경에서 오류 없이 호환이 가능해야 하고, 정확한 정보를 전달해야 한다는 것인데요. 정보 해석의 오류를 없앨 수 있는 방법으로 견고한 마크업이 요구됩니다. 그 기본은 문법을 준수하는 것이에요. 해당 마크업 언어의 문법을 최대한 준수하여 콘텐츠를 제공하는 것이 필요해요. 문법 준수의 주요 수칙에는 ① 요소의 열고 닫음 일치, ② 요소의 중첩 방지, ③ 중복된 속성 사용 금지, ③ id 속성값 중복 선언 금지 등이 있습니다. 순서대로 살펴볼게요.
시작이 있으면 끝이 있어야 해요. 콘텐츠를 포함하는 마크업은 표준에서 정한 특별한 경우를 제외하고 시작과 끝 요소를 지정해줘야 합니다.
// div 요소
<div class="container"> //시작태그
<h1>웹접근성에 접근하기</h1>
<p>견고하게 마크업하세요!</p>
**???** **// (종료 태그 자리) 종료 태그가 없어요**
위에 있는 코드는 <div>
요소가 전체 내용을 감싸고 있는 형태입니다. <div>
의 자식 요소 <h1>
과 <p>
요소는 종료 태그까지 잘 닫혔지만 부모 요소 <div>
는 종료 태그가 없이 마무리 된 것을 볼 수 있어요.
// div 요소
<div class="container"> //시작태그
<h1>웹접근성에 접근하기</h1>
<p>견고하게 마크업하세요!</p>
</div> // 종료 태그
앞서 입력하지 않았던 <div>
요소의 닫기 태그를 입력하여 오류를 수정했습니다. 위의 예시처럼 콘텐츠를 포함하고, 문서의 구조를 명시하는 요소는 반드시 종료 태그를 지정하여 열고 닫음의 오류가 생기지 않도록 해야 합니다.