웹 콘텐츠 제작기법

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

1. 인식의 용이성
(Perceivable)

1.1 적절한 대체 텍스트 제공

1.1.1 적절한 대체 텍스트 제공

1.2 멀티미디어 대체 수단

1.2.1 자막 제공

1.3 명료성

1.3.1 색에 무관한 콘텐츠 인식

1.3.2 명확한 지시 사항 제공

1.3.3 텍스트 콘텐츠의 명도 대비

1.3.4 자동 재생 금지

1.3.5 콘텐츠 간의 구분
2. 운용의 용이성
(Operable)

2.1 입력장치 접근성

2.1.1 키보드 사용 보장

2.1.2 초점 이동

2.1.3 조작 가능

2.2 충분한 시간 제공

2.2.1 응답 시간 조절

2.2.2 정지 기능 제공

2.3 광과민성 발작 예방

2.3.1 깜빡임과 번쩍임 사용 제한

2.4 쉬운 내비게이션

2.4.1 반복 영역 건너뛰기

2.4.2 제목 제공

2.4.3 적절한 링크 텍스트
3. 이해의 용이성
(Understandable)

3.1 가독성

3.1.1 기본 언어 표시

3.2 예측 가능성

3.2.1 사용자 요구에 따른 실행

3.3 콘텐츠의 논리성

3.3.1 콘텐츠의 선형 구조

3.3.2 표의 구성

3.4 입력 도움

3.4.1 레이블 제공

3.4.2 오류 정정
4. 견고성
(Robust)

4.1 문법 준수

4.1.1 마크업 오류 방지

4.2 웹 애플리케이션 접근성

4.2.1 웹 애플리케이션 접근성 준수

3. 이해의 용이성(Understandable)

3.1 가독성

콘텐츠는 읽고 이해하기 쉬워야 한다.

① 화면 낭독 프로그램을 사용하는 경우, 텍스트 콘텐츠의 언어 정보를 화면 낭독 프로그램으로 제공하여 정확한 발음이 가능하도록 화면 낭독 프로그램을 제어하기도 한다. 따라서 웹 페이지를 구성하는 기본 언어는 정확히 명시해야 한다.

3.1.1 기본 언어 표시

- 주로 사용하는 언어를 명시해야 한다.

<html>에 lang 속성을 명시하지 않은 경우

잘못된 사례

해당 사례의 원본소스: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang=“ko” xmlns=“http://www.w3.org/1999/xhtml”>
사례 설명: <lang>속성 값을 이용하여 기본 언어를 명시하였지만 잘못된 형식으로 <lang> 속성을 제공하였습니다. 현재 페이지에서 선언된 문서형식이 무엇인지 모르는 경우에 자주 발생하는 사례입니다.

우수 사례

해당 사례의 원본소스: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang=“ko” xml:lang=“ko” xmlns=“http://www.w3.org/1999/xhtml”>
사례 설명: XHTML 방식에 맞는 기본 언어 명시가 되어야 합니다. 선언된 문서타입이 HTML 4.01인 경우는 간단하게 <lang> 속성만 사용하여 기본 언어를 명시하면 되지만 XHTML의 경우 1.0과 1.1에 대한 명시 방법이 별도로 존재합니다. xml:lang과 lang 두 가지에 모두 언어코드를 제공하는 이유는 호환성을 높여주고자 하는 의도 때문으로 웹 접근성 품질인증 심사가이드에서 제공하는 가이드의 표준 소스 예시를 그대로 사용하시면 됩니다.

우수 사례

사례 이미지: <ISO 639-1에서 지정한 주요 언어 코드>
사례 설명: 기본 언어는 페이지의 상단에 html 태그에 lang 속성을 이용하여 지정하고, lang의 속성 값에는 ISO 639-1에서 지정한 두 글자로 된 언어 코드를 사용해야 합니다.
기본 언어로 지정하기 위해서는 lang의 속성 값에 공식 언어 코드(ISO 639)를 사용하게 되는데 웹 사이트에서 http://www.loc.gov/standards/iso639-2/php/code_list.php를 통해서도 확인하실 수 있습니다. 특히 한국어의 경우 ‘ko’로 사용해야 하는데 ‘kr’로 쓰는 경우가 많으니 주의하셔야 합니다.

3.2 예측 가능성

콘텐츠의 기능과 실행결과는 예측 가능해야 한다.

① 사용자가 인지하지 못한 상황에서 새 창, 팝업 창 등을 제공하지 않아야 한다.

3.2.1 사용자 요구에 따른 실행

- 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

사용자가 실행하지 않은 상황에서 예측하지 않은 새 창이 열리는 경우

잘못된 사례

사례 이미지: <이동 버튼이 없는 목록 선택 상자>
해당 사례의 원본소스: <label for="nearsite1">유관기관</label>
<select onchange="copyrtChgUrl(this.value)" id=“nearsite1”>
<option value="0">경기도 교육청 관련기관</option>
<option value="http://~~~">경기도교육청</option>
</select>
사례 설명: 셀렉트 박스에 onchange 이벤트 핸들러를 제공한 경우입니다. 이런 경우 마우스로는 셀렉트 박스 안에 있는 다양한 옵션에서 사이트를 골라 클릭하여 이동할 수 있지만 키보드로 진입한 경우에는 셀렉트 박스에서 옵션을 선택하기 위해 아래 화살표 방향키를 눌러도 onchange 이벤트가 실행되어 가장 첫 옵션에서 지정한 웹 사이트로 이동해버리게 됩니다. 결국 키보드 사용자는 첫 선택만이 가능한 상황이 됩니다.

우수 사례

사례 이미지: <이동 버튼이 있는 목록 선택 상자>
해당 사례의 원본소스: <form name="selectForm1" action="#" onsubmit="goSelectUrl(1);return false;">
<label for="nearsite1" >유관기관</label>
<select name="url" id=“nearsite1”>
<option value='' selected >경기도 교육청 관련기관</option>
<option value="http://~~~">경기도교육청</option>
</select>
<input type="image" src="/gpms/resource/images/common/general/btn_go.gif" alt="이동" title="새 창으로 이동">
</form>
사례 설명: 마우스를 이용하는 것이 불가능한 사용자는 옵션 선택만으로 이동되어서는 안 되기 때문에 셀렉트 박스에 제공되었던 onchange 이벤트 핸들러를 제거하여 마우스나 키보드 모두 원하는 옵션 값을 선택할 수 있도록 해줍니다. 따라서 최종 이동할 수 있도록 이동버튼을 별도로 제공하여 의도하지 않은 실행이 일어나지 않도록 만들 수 있습니다. 만약 디자인적인 측면 때문에 이동버튼을 제공하기 싫다면 change와 keyup이벤트를 자바스크립트로 따로 구현할 수도 있습니다.

버튼 또는 링크 등을 실행할 때 사전에 알리지 않고 새 창이 발생되는 경우

잘못된 사례

사례 이미지: <링크 실행 시 사전에 알리지 않고 새 창이 발생되는 경우>
해당 사례의 원본소스: <p>
<a href=“javascript:bOpen(‘/index.jsp’,‘private’,‘620’,‘650’)”>[개인정보보호규정]</a>
<a href=“javascript:bOpen(‘/index2.jsp’,‘copy’,‘620’,‘550’)”>[저작권신고]</a>
<a href=“javascript:bOpen(‘/index3.jsp’,‘email’,‘620’,‘450’)”>[이메일무단수집거부]</a>
</p>
사례 설명: 단순 링크임에도 습관적으로 자바스크립트를 통해 새 창이 열리도록 구현된 내용입니다. 위와 같이 해당 링크를 실행 시키면 새 창이 발생되지만 사전에 알려주지 않으므로 시각 장애인의 경우 본 창에서 그대로 이동했을 것으로 예상하고 다음 컨트롤을 하게 됩니다.

우수 사례

해당 사례의 원본소스: <p>
<a href=“javascript:bOpen(‘/index.jsp’,‘private’,‘620’,‘650’)” title=“새창열림”>[개인정보보호규정]</a>
<a href=“javascript:bOpen(‘/index2.jsp’,‘copy’,‘620’,‘550’)” title=“새창열림”>[저작권신고]</a>
<a href=“javascript:bOpen(‘/index3.jsp’,‘email’,‘620’,‘450’)” title=“새창열림”>[이메일무단수집거부]</a>
</p>
사례 설명: 사용자는 링크를 실행시키기 전에 해당 “새창열림”이라는 정보를 화면낭독기를 통해 사전에 알 수 있게 되므로 관련 정보를 확인 한 후에는 새 창을 닫고 다시 본 창에서 계속 정보를 탐색하며 이용할 수 있게 됩니다.

웹 사이트 초기화면에 팝업창(레이어팝업 포함)을 제공하는 경우

잘못된 사례

해당 사례의 원본소스: if ( notice_getCookie("CookieName5") != "done" ) {
window.open('http://poll.kofst.or.kr:8080/Email_poll_101015_pop.aspx','CookieName
5','status=no,width=480, height=320,resizable=no,left=0,top=215,scrollbars=no')
}
사례 설명: 국내 웹 사이트들은 대부분 한시적인 이벤트나 공지사항을 보여 주기 위해 웹 사이트 초기화면에 새 창을 제공하는 경우가 굉장히 많습니다. 특히 사용자에게 꼭 필요한 경우보다 원하지 않는 팝업(레이어 팝업 포함)일 경우가 많은 편입니다. 사용자가 예측하지 못한 팝업은 시각장애인, 지체장애인, 인지능력이 떨어지는 사람 등이 웹 탐색을 하는데 더욱 어렵게 만드는 요인이 됩니다. 또한 대부분의 웹브라우저들이 팝업 창을 차단하는 옵션을 제공하고 있어 실질적인 광고 및 홍보효과도 떨어지는 편입니다.

우수 사례

사례 이미지: <웹 사이트 초기화면에 새 창을 제공하지 않은 경우>
사례 설명: 팝업 창(레이어팝업 포함)을 쓰지 않고 웹 사이트 초기화면에서 중요한 내용을 사용자들이 잘 보거나 전달 받을 수 있도록 배치 및 디자인하는 것이 실질적인 홍보 효과 및 웹 접근성을 높일 수 있는 방법입니다. 웹 기획자라면 팝업 창을 통해 제공해야 하는 정보가 반드시 필요한 내용인지 다시 생각해 볼 필요가 있습니다.

3.3 콘텐츠의 논리성

콘텐츠는 논리적으로 구성해야 한다.

① 화면 낭독 프로그램과 같은 보조 기기는 전체 콘텐츠를 보통 소스 코드 순서대로 풀어서 접근하므로 콘텐츠는 논리적인 순서로 제공해야한다.

② 복잡한 데이터를 표로 제공할 경우, 시각장애인 등도 이해할 수 있도록 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다.

3.3.1 콘텐츠의 선형 구조

- 콘텐츠는 논리적인 순서로 제공해야 한다.

계층 구조가 명백하게 필요한 콘텐츠를 중첩 마크업을 이용하여 표현하지 않은 경우

잘못된 사례

사례 이미지: <계층구조를 준수하지 않은 사례>
해당 사례의 원본소스: <img src=“” alt=“감사 > 감사실 > 감사1팀, 감사2팀, 청렴전략팀”>
사례 설명: 위의 이미지의 경우 시각적으로 정보를 확인할 경우 감사라는 업무는 감사실이 담당하고 감사실은 크게 3개의 팀으로 구성되어 있다는 계층구조의 정보를 이해할 수 있지만 이를 통이미지로 제공하여 대체텍스트를 나열식으로 처리하였기 때문에 화면낭독기를 통해 확인하게 되면 계층 구조라는 정보라고 생각하기 어렵게 됩니다.

우수 사례

해당 사례의 원본소스: <ul>
<li>감사
<ul>
<li>감사실
<ul>
<li>감사1팀</li>
<li>감사2팀</li>
<li>청렴전략팀</li>
</ul>
</li>
</ul>
</li>
</ul>
사례 설명: 순서가 없는 리스트인 <ul>과 해당 리스트인 <li>를 활용하여 계층 구조를 표현하게 되면 구조적인 정보를 제공하게 되어 포함관계 등을 이해하는데 도움이 됩니다. 따라서 직관적으로 이해할 수 있도록 콘텐츠를 마크업하여 제공하는 것이 바람직합니다.

‘제목-내용' 으로 구성된 콘텐츠 목록의 배치가 분리되어 내용을 직관적 이해가 불가능한 경우

잘못된 사례

사례 이미지: <제목과 내용이 분리되어 직관적 이해 불가능한 사례>
해당 사례의 원본소스: <h2><a href=“”>새소식</a></h2>
<h2><a href=“”>언론보도</a></h2>
<div>
<ul>
<li>2012년도 녹색제품 구매실적 및 2013년도 녹색제품 구매계획</li>
<li>사내방송 Today KOMSCO 125회차</li>
<li>한국조폐공사 사내방송 124회차</li>
</ul>
</div>
<div>
<ul>
<li>조폐공사, 공사 최초 미국 마켓시장 상품권 수출</li>
<li>「노사상생협력 유공」 국무총리 표창 수상</li>
<li>‘가장 아름다운 지자체상품권’에 경주시</li>
</ul>
</div>
사례 설명: 탭 게시판 형태로 제목과 내용이 분리되어 있어 제목만 연거푸 읽어준 후 다음 내용이 어떤 제목의 내용인지 직관적으로 파악하기 힘든 사례입니다. 위 그림은 탭이 2개뿐이지만 더 많은 탭이 있는 경우라면 더욱 이해하기 힘든 구조라고 할 수 있습니다.

우수 사례

사례 이미지: <제목과 내용이 분리되어 직관적 이해 가능한 사례>
해당 사례의 원본소스: <h2><a href=“”>새소식</a></h2>
<div>
<ul>
<li>2012년도 녹색제품 구매실적 및 2013년도 녹색제품 구매계획</li>
<li>사내방송 Today KOMSCO 125회차</li>
<li>한국조폐공사 사내방송 124회차</li>
</ul>
</div>
<h2><a href=“”>언론보도</a></h2>
<div>
<ul>
<li>조폐공사, 공사 최초 미국 마켓시장 상품권 수출</li>
<li>「노사상생협력 유공」 국무총리 표창 수상</li>
<li>‘가장 아름다운 지자체상품권’에 경주시</li>
</ul>
</div>
사례 설명: 제목 다음에 내용에 대한 소스코드의 순서로 되어 있어 콘텐츠를 이해하는데 어려움이 없습니다. 다만 탭 게시판과 같이 내용이 간결하게 되어 있는 경우에는 현재의 순서가 직관적으로 이해하기 쉬운 가장 바람직한 계층 구조라고 할 수 있습니다.

3.3.2 표의 구성

- 표는 이해하기 쉽게 구성해야 한다.

<caption> 요소, summary 속성을 제공하지 않은 경우

잘못된 사례

사례 이미지: <제목과 요약 글을 제공하지 않은 표>
해당 사례의 원본소스: <table>
<tr>
<th rowspan=“2”>합계(권)</th>
<th>000</th>
...
... 중략...
...
</table>
사례 설명: 테이블에 대한 제목 및 요약이 제공되지 않아 시각장애인과 같은 사용자에게 표의 전반적인 내용을 미리 이해를 시키지 못하여 모든 내용을 확인해야 하는 번거로움이 생깁니다.

우수 사례

해당 사례의 원본소스: <table summary=“총류, 철학, 종교, 사회, 순수, 기술, 예술, 어학, 문학, 역사책 자료 총 51,282권”>
<caption>도서관 자료현황 표</caption>
<tr>
<th rowspan=“2”>합계(권)</th>
<th>000</th>
...
... 중략...
...
</table>
사례 설명: 표에 대한 제목과 요약을 제공함으로써 표에 접근했을 때 먼저 표의 내용이 무엇이라는 정보를 알 수 있고, 원하는 정보일 경우에는 표에서 정보를 확인할 수 있게 됩니다.

<caption> 요소, summary 속성의 용도가 부적절한 경우

잘못된 사례

사례 이미지: <제목과 요약 글의 용도가 부적절한 표>
해당 사례의 원본소스: <table summary=“센터 안내”>
<caption>총 4개 센터에 대한 주소와 전화번호를 안내하고 있습니다.</caption>
<tr>
<th>센터명</th>
<th>주소</th>
...
... 중략...
...
</table>
사례 설명: 표에 대한 제목과 요약을 용도에 맞지 않게 반대로 제공한 경우입니다. 또는 요약에 제목만을 제공하거나 제목에 요약만을 제공하는 경우도 있습니다. 표의 제목은 caption으로 짧게 제공하고 요약은 summary로 표의 전체적인 요약정보 또는 구조에 대한 설명을 제공하는 것이 바람직합니다.

우수 사례

해당 사례의 원본소스: <table summary=“총 4개 센터에 대한 주소와 전화번호를 안내하고 있습니다.”>
<caption>센터 안내</caption>
<tr>
<th>센터명</th>
<th>주소</th>
...
... 중략...
...
</table>
사례 설명: 표의 제목과 요약에 적절한 내용이 제공됨으로 표를 이해하기 쉬워졌습니다.

데이터 테이블에 제목 셀과 내용 셀을 <th>와 <td> 요소로 구분하지 않은 경우

잘못된 사례

사례 이미지: <제목셀과 내용 셀을 구분하지 않은 경우>
해당 사례의 원본소스: <table summary=“번호, 카테고리, 글제목, 이름, 날짜 정보를 제공하는 표”>
<caption>제품 신청 게시판 리스트</caption>
<tbody>
<tr>
<td>번호</td>
<td>카테고리</td>
<td>글제목</td>
<td>이름</td>
<td>날짜</td>
</tr>
<tr>
<td>15</td>
...
...
</tr>
</tbody>
사례 설명: “번호”, “카테고리”, “글 제목” 등 데이터 테이블에 caption, summary와 제목 셀과 내용 셀을 <th>와 <td> 요소로 구분하지 않았습니다. 따라서 화면낭독기에서 짝지어 읽을 수 없기 때문에 셀 제목이 어디까지인지도 모르고 셀 간의 상관관계를 알 수가 없게 됩니다.

우수 사례

해당 사례의 원본소스: <table summary=“번호, 카테고리, 글제목, 이름, 날짜 정보를 제공하는 표”>
<caption>제품 신청 게시판 리스트</caption>
<tbody>
<tr>
<th>번호</th>
<th>카테고리</th>
<th>글제목</th>
<th>이름</th>
<th>날짜</th>
</tr>
<tr>
<td>15</td>
...
...
</tr>
</tbody>
사례 설명: 표의 제목 셀과 내용 셀을 <th>와 <td>로 구분하게 됨으로써 화면낭독기에서 제목 셀과 내용 셀을 함께 읽어 줄 수 있게 되었습니다. 이에 따라 내용 셀이 여러 개가 된다 하더라도 해당 내용의 제목이 무엇인지 이해할 수 있게 됩니다.

복잡한 표 제공시 id, headers 또는 scope로 제공하지 않음

잘못된 사례

사례 이미지: <복잡한 표에 id, headers 또는 scope 제공하지 않은 사례>
해당 사례의 원본소스: <table summary="이용일자, 카드구분, 이용카드, 매출구분, 이용가맹점(은행)명, 이용금액(현지금액), 할부개월, 당월 결제하실 금액, 결제 후 잔액, 회차, 원금, 혜택금액, 환율, 수수료 제공">
<caption>카드 이용대금결제 테이블</caption>
<thead>
<tr>
<th rowspan="2">이용일자</th>
<th rowspan="2">카드<br>구분</th>
<th rowspan="2">이용<br>카드</th>
<th rowspan="2">매출<br>구분</th>
<th rowspan="2">이용가맹점<br>(은행)명</th>
<th rowspan="2">이용금액<br>(현지금액)</th>
<th rowspan="2">할부<br>개월</th>
<th colspan="5" class="col">당월 결제하실 금액</th>
<th rowspan="2">결제 후 잔액</th>
</tr>
<tr>
<th>회차</th>
<th>원금</th>
<th>혜택금액</th>
<th>환율</th>
<th>수수료</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012.09.09.</td>
....
...
</tr>
</tbody>
</table>
사례 설명: 제목 셀이 한 줄이 아니라 두 줄이고, 셀 간의 다단과 병합이 포함된 복잡한 표입니다. 따라서 제목 셀과 내용 셀로 구분한다 하더라도 병합되어 있는 제목 중의 전체 제목인 ‘당월 결제하실 금액’과 같은 경우에는 처음 한번만 제목 셀로 읽어주고 이후부터는 짝지어 읽지 못하여 이해력이 떨어지게 됩니다.

우수 사례

해당 사례의 원본소스: <table summary="이용일자, 카드구분, 이용카드, 매출구분, 이용가맹점(은행)명, 이용금액(현지금액), 할부개월, 당월 결제하실 금액, 결제 후 잔액, 회차, 원금, 혜택금액, 환율, 수수료 제공">
<caption>카드 이용대금결제 테이블</caption>
<thead>
<tr>
<th scope="col" rowspan="2">이용일자</th>
<th scope="col" rowspan="2">카드<br>구분</th>
<th scope="col" rowspan="2">이용<br>카드</th>
<th scope="col" rowspan="2">매출<br>구분</th>
<th scope="col" rowspan="2">이용가맹점<br>(은행)명</th>
<th scope="col" rowspan="2">이용금액<br>(현지금액)</th>
<th scope="col" rowspan="2">할부<br>개월</th>
<th colspan="5" class="col" id="a1">당월 결제하실 금액</th>
<th scope="col" rowspan="2">결제 후 잔액</th>
</tr>
<tr>
<th id="a2">회차</th>
<th id=“a3">원금</th>
<th id="a4">혜택금액</th>
<th id="a5">환율</th>
<th id="a6">수수료</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012.09.09.</td>
...
<td headers=“a1 a2”>10,000</td>
<td headers=“a1 a3”>10,000</td>
사례 설명: 복잡한 표에는 직접적으로 제목 셀의 범위를 지정해주는 scope와 제목 셀과 내용 셀을 연결해주는 id, headers를 사용하여 짝지어 읽는 수준을 높일 수 있습니다. 비록 화면낭독기에서는 scope로 제공한 경우 큰 효과가 없지만 품질인증 심사에서는 웹 접근성을 준수한 것으로 인정이 되고, id, headers로 짝을 지어준 경우 실제로 원하는 셀들, 즉 함께 짝 지어 읽으면 좋은 셀들을 직접적으로 연결하여 읽어주게 됨으로써 표를 이해하는데 가장 도움이 되는 방법입니다.

3.4 입력 도움

입력 오류를 방지하거나 정정할 수 있어야 한다.

① 입력 서식을 사용할 때 현재 위치에 대한 정확한 안내, 특정한 서식으로의 빠른 이동, 정확한 맥락의 제공, 입력할 값의 범위에 대한 안내, 오류를 방지하거나 복구할 수 있는 방법 제공, 작업을 다시 하거나 취소할 수 있는 방법 제공, 충분한 시간적 여유를 제공 등을 통해 장애인의 서식 접근성을 확보할 수 있도록 해야한다.

② 입력 서식 작성 시 오류가 발생하지 않도록 미리 어떤 값을 넣어야 하는지 안내를 해주고, 만약 그래도 실수로 오류가 발생하는 경우, 어디에서 어떤 오류가 났는지 사용자가 알 수 있어야 하고, 이를 정정할 수 있는 방법을 제공해야 한다.

3.4.1 레이블 제공

- 입력 서식에는 대응하는 레이블을 제공해야 한다.

<input>,<textarea>, <select> 요소에 1:1 대응하는 <label>요소 또는 title 속성을 제공하지 않은 경우

잘못된 사례

사례 이미지: <1:1에 대응하는 label또는 title이 없는 경우>
해당 사례의 원본소스: <fieldset>
<legend>회원 로그인</legend>
<ul>
<li><input type="text" id="userId" value=”아이디” /></li>
<li><input type="password" id="userPwd" value=”비밀번호” /></li>
</ul>
사례 설명: 1:1에 대응하는 레이블을 제공하지 않았습니다. 이는 시각장애인에게 입력하고자 하는 폼요소에 대한 목적을 파악할 수 없어 온라인 서식을 입력함에 문제가 됩니다.

우수 사례

해당 사례의 원본소스: <fieldset>
<legend>회원 로그인</legend>
<ul>
<li><label for=”userId”>아이디</label><input type="text" id="userId" /></li>
<li><label for=”password”>비밀번호</label><input type="password" id="userPwd" /></li>
</ul>
사례 설명: <label>의 for와 <input>의 id가 동일하게 제공함으로서 입력서식의 목적을 사용자에게 명확히 제공하여 줍니다.

<input>의 id와 페이지 안에 같은 id가 있는 경우

잘못된 사례

사례 이미지: <input의 id와 페이지 안에 같은id가 있을 경우>
해당 사례의 원본소스: <dl>
<dt><label for="hsp">용도</label></dt>
<dd><select id=“hsp”><option>월급여</option></select></dd>
<dt><label for="pwd3">받는분통장표시내용</label></dt>
<dd><input type=“text" id="hsp"/></dd>
</dl>
사례 설명: id값이 중복되어 폼 요소의 레이블이 제대로 작동되지 않습니다. 이는 사용자에게 폼요소의 설명을 잘못 알려 에러를 유도할 수 있게 됩니다.

우수 사례

해당 사례의 원본소스: <dl>
<dt><label for="hsp">용도</label></dt>
<dd><select id=“hsp”><option>월급여</option></select></dd>
<dt><label for="pwd3">받는분통장표시내용</label></dt>
<dd><input type=“text" id=”pwd3"/></dd>
</dl>
사례 설명: 폼요소의 id속성 값을 별도로 제공하여 올바른 레이블 연결이 되었습니다.

잘못된 사례

사례 이미지: <label의 for와 input의 id가 다른 경우>
해당 사례의 원본소스: <dl>
<dt><label for="pwd">기존비밀번호 입력</label></dt>
<dd><input type="password" id="password1"/></dd>
<dt><label for="pwd2">새비밀번호 입력</label></dt>
<dd><input type="password" id="password2"/></dd>
<dt><label for="pwd3">비밀번호 입력 확인</label></dt>
<dd><input type="password" id="password3"/></dd>
</dl>
사례 설명: <label>의 for값과 <input>의 id값이 일치하지 않아 1:1에 대응하는 레이블 형성이 제대로 이루어지지 않았습니다. 그로 인하여 입력서식의 설명이 부족하여 사용자가 온라인서식을 이용함에 있어 불편함이 예상됩니다.

우수 사례

해당 사례의 원본소스: <dl>
<dt><label for="pwd">기존비밀번호 입력</label></dt>
<dd><input type="password" id="pwd"/></dd>
<dt><label for="newPwd">새비밀번호 입력</label></dt>
<dd><input type="password" id="newPwd" /></dd>
<dt><label for="pwdConfirm">비밀번호 입력 확인</label></dt>
<dd><input type="password" id="pwdConfirm"/></dd>
</dl>
사례 설명: <label>의 for값과 폼요소의 id값을 동일하게 제공하여 사용자가 폼요소의 용도를 파악할 수 있습니다.

<select> 요소의 첫 번째 <option>이 레이블 역할을 대신하는 경우

잘못된 사례

사례 이미지: <select요소의 첫 번째 option이 레이블을 대신하는 경우>
해당 사례의 원본소스: <select>
<option value="">시·도협의회 홈페이지</option>
<option value="http://www.s-win.or.kr">서울특별시사회복지협의회</option>
...(중간생략)...
</select>
사례 설명: 위와 같은 사례는 첫 번째 <option>요소가 <label>요소를 대신하는 경우입니다. <option>요소는 선택하고자 하는 데이터를 나열하는 의미로 사용되는 것이지 폼요소에 대한 설명을 대신할 수 없습니다. 첫 번째 <option>이 폼요소의 설명을 대신하게 되면 화면낭독기 사용자에게는 해당 옵션에 대한 내용이 선택하는 것으로 오해할 소지가 있어 불편함이 예상 됩니다.

우수 사례

해당 사례의 원본소스: <select title=”시·도협의회 홈페이지 바로가기”>
<option value="http://www.s-win.or.kr">서울특별시사회복지협의회</option>
...(중간생략)...
</select>
사례 설명: <select>요소에 title을 제공하여 해당 요소에 대한 설명을 제공하여 사용자가 해당 요소에 대한 목적을 파악할 수 있게 되었습니다.