웹 콘텐츠 제작기법

HOME > 지식마당 > 개발자아카이브 > 웹 콘텐츠 제작기법

4. 견고성(Robust)

4.1 문법 준수

웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.

① 콘텐츠를 개발하는 과정에서 마크업 언어의 표준을 준수하고 가능한 한 문법적 오류나 모호성이 없도록 구현되어야 한다.

4.1.1 마크업 오류 방지
- 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
태그의 열고 닫음 오류
잘못된 사례
해당 사례의 원본소스
<a href=“”>링크 <span>바로가기</span>
<p>내용이 들어갈 곳</p>
사례 설명
<a>요소로 열었으면 닫아서 링크영역을 감싸주는 것이 원칙입니다. 하지만 </a>링크를 닫지 않아 하위 요소까지 링크영역으로 제공되며 태그의 열고 닫음 오류가 발생하였습니다.
우수 사례
해당 사례의 원본소스
<a href=“”>링크 <span>바로가기</span></a>
<p>내용이 들어갈 곳</p>
사례 설명
이제 원칙대로 <a>요소로 열고, </a>로 닫아 줌으로써 링크의 영역을 정확히 표현하고, 표준 문법을 준수함으로 브라우저가 바르게 해석할 수 있도록 하여 태그의 열고 받음 오류를 해결하였습니다.
태그의 중첩 오류
잘못된 사례
해당 사례의 원본소스
<div><span>사이트 소개</div></span>
사례 설명
HTML요소들은 DOM(Document Object Model)에서 제시한 문서구조 즉, 계층의 순서에 맞게 중첩되어야 합니다. 하지만 개발자들의 실수로 요소 간에 엇갈리도록 중첩관계를 표시하는 경우가 종종 발생합니다. 이렇게 중첩관계가 잘못되게 되면 적용하려 했던 요소나 속성 등이 반영되지 않아 원하는 콘텐츠의 화면표시가 어렵게 됩니다.
우수 사례
해당 사례의 원본소스
<div><span>사이트 소개</span></div>
사례 설명
가장 처음 여는 태그로 시작한 <div>요소가 마지막으로 닫는 태그로 정리되고, 그 안에 <span> 요소를 열고 닫음으로써 이제 제대로 된 중첩관계를 갖게 되었습니다. 따라서 바르게 표준 문법을 준수하게 됨에 따라 중첩 오류를 해결하였습니다.
중복 선언된 속성 오류
잘못된 사례
해당 사례의 원본소스
<label for=“a”>이름</label><input type=“text” id=“a”>
<label for=“b”>비밀번호</label><input type=“password” id=“a”>
사례 설명
한 페이지에서 아이디는 항상 유일해야 합니다. 만약 같은 페이지 내에서 동일한 아이디를 제공하게 되면 어떤 표현이나 동작에 대한 목표점이 어디인지 해석할 수 없게 되어 오류를 일으키게 됩니다. 레이블을 연결해주는 입력서식의 아이디가 중복되어 서로 다른 레이블이지만 한 가지는 연결이 되지 않게 됩니다.
우수 사례
해당 사례의 원본소스
<label for=“a”>이름</label><input type=“text” id=“a”>
<label for=“b”>비밀번호</label><input type=“password” id=“b”>
사례 설명
이제 서로 다른 아이디를 제공하게 되어 두 가지 레이블에 대한 연결 기능이 제대로 작동하여 올바른 레이블 제공이 가능해집니다. 같은 페이지 내에서는 아이디는 반드시 하나만 사용하여야 합니다. 아이디라는 표현 자체가 identity에서 온 것으로 정체성이 분명해야 하는 것이죠.
4.2 웹 애플리케이션 접근성

웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.

① 플러그인이나 웹 애플리케이션을 제공하는 경우, 플러그인이나 웹 애플리케이션은 반드시 사용자의 접근성을 지원하도록 구현해야 한다.

② 플러그인이나 웹 애플리케이션은 반드시 보조기술 사용자가 접근할 수 있는 대체 수단을 함께 제공해야 한다.

4.2.1 웹 애플리케이션 접근성 준수
- 콘텐츠에 포함된 웹애플리케이션은 접근성이 있어야 한다.
웹 애플리케이션이 자체적인 접근성이 없으며 대체 콘텐츠가 존재하지 않는 경우
잘못된 사례
사례 이미지
접근성이 제공되지 않은 플래시

<접근성이 제공되지 않은 플래시>

사례 설명
플래시 콘텐츠이지만 접근성 패널을 이용하여 자체 접근성을 제공하지 않은 콘텐츠입니다. 하지만 원본이 없어서 이를 수정하지 못한 채로 운영 중인 경우입니다. 키보드 사용자나 화면낭독기 사용자들은 이 콘텐츠에 아예 접근을 할 수 없게 되는데 대체할 수 있는 수단도 제공하지 않은 경우입니다.
우수 사례
사례 이미지
접근성이 제공된 플래시

<접근성이 제공된 플래시>

사례 설명
플래시 버전은 그대로 두고, 플래시를 이용하지 못하는 사용자들을 위해 일반 HTML로 제공된 대체수단을 함께 나열하여 접근성을 준수하고 있습니다. 이제 원하는 형태로 선택하여 같은 정보를 제공받을 수 있게 됩니다.

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)

위로가기