웹 접근성을 고려한 콘텐츠 제작 기법 2.0

웹 접근성의 목적은 장애인과 비장애인이 동등하게 접근할 수 있도록 웹 컨테츠를 제작하는데 있습니다. 한국에는 한국형 웹 컨텐츠 접근성 지침이라는 웹사이트에서 웹 컨텐츠를 제공할 경우 지켜야하는 웹 접근성 지침 표준문서가 있습니다.

한국형 웹 컨텐츠 접근성 지침 2.0을 기준으로 웹 접근성을 고려한 콘텐츠 제작 기법 v2.0이 2011년 11월에 발표되었습니다. 맑은커뮤니케이션에서 문서에 대한 자료와 내용을 정리해 보고자 합니다.

한국형 웹 컨텐츠 접근성 지침(KWCAG)은 W3C의 웹 컨텐츠 접근성 지침(WCAG)를 한국 실정에 맞게 알아보기 쉽게 구성한 표준문서입니다. 현재 국가표준은 한국형 웹 컨텐츠 접근성 지침 2.0 으로 구성은 크게 4가지의 원칙과 13가지의 세부 지침으로 구성되어 있고 각 세부 지침별로 사례별 기술지침이 부가적으로 포함되어 있습니다. html5를 기준으로 작성되었으며 자료 내용과 함께 내용을 확인하시면 좀 더 쉽게 이해할 수 있을거라 생각합니다.

첫째. 인식의 용이성

웹 사이트에서 제공하는 컨텐츠를 이용하기 위해서는 해당 컨텐츠를 정확히 인식할 수 있어야 한다.

지침	검사항목
텍스트 아닌 컨텐츠에는 대체 텍스트를 제공해야 한다.	텍스트 아닌 컨텐츠는 그 의미나 용도를 이해할 수 있도록 적절한 대체 텍스트 제공해야 한다. 제대로 제공된 대체텍스트는 일반적인 접근이 불가능한 사용자 뿐아니라 예외적인 상황에서는 일반인들에게도 유용할 수 있다. 1. 이미지에 대한 대체 텍스트 제공 1 <img alt="biew" src="http://kangyoo80.tistory.com/admin/entry/post/logo.png"> 2. 버튼에 대한 대체 텍스트 제공 1 2 3 <form method="post" action="http://sample.co.kr/submit/test">     <input alt="확인" src="button.gif" type="image" name="submit"> </form> 3. 이미지 맵에 대한 대체 텍스트 1 2 3 4 5 <img alt="language" src="http://kangyoo80.tistory.com/admin/entry/post/languge.gif" usemap="#language"> <map name="language">     <area href="/en/" shape="rect" alt="English" coords="10,5,66,19">     <area href="/ko/" shape="rect" alt="Korean" coords="10,17,66,32"> </map> 4. CAPTCHA에 대한 대체 텍스트 제공 CAPTCHA(의도적으로 글자 모양을 비틀어 만든 이미지)는 사용 목적상 그 내용을 대체 텍스트로 제공한다면 CAPTCHA가 의도하는 본래 목적을 달성할 수 없기 때문에 CAPTCHA에 대한 대체 텍스트는 그 용도를 알려주는 것으로 한다. 5. 온라인 시험 등에 대한 대체 텍스트 제공 검사, 시험을 위한 컨텐츠는 검사결과 또는 시험의 정답을 유추할 수 있는 내용을 대체 텍스트로 제공할 수 없으므로 이는 간략한 용도를 알려주는 정도로 대체 텍스트를 제공해야 한다. 1 <img alt="색맹 검사용 이미지1" src="http://kangyoo80.tistory.com/admin/entry/post/colorBlindnessTest.png"> 1 <img alt="토플 1번 문항용 오디오" src="http://kangyoo80.tistory.com/admin/entry/post/TOEFLTest.png"> 6. QR 코드에서 URL을 대체 텍스트로 제공 1 <img alt="애듀랭키 아이폰용 QR 코드" src="http://kangyoo80.tistory.com/admin/entry/post/QR_code.jpg" longdesc="http://itunes.apple.com/app/eduranky/id451086260?mt=8">
동영상, 음성등 멀티미디어 컨텐츠를 이해할 수 있도록 멀티미디어 대체 수단을 제공해야 한다.	멀티미디어 컨텐츠에는 자막, 원고 또는 수화를 제공해야 한다. 멀티미디어 컨텐츠를 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 원고 또는 수화를 제공해야 한다. 가장 중요한 요소는 멀티미디어 컨텐츠와 동등한 내용을 제공하는 것이고 가장 바람직한 방법은 닫힌 자막(Closed caption)을 오디오와 동기화시켜 제공하는 것이다. 대사 없이 영상만 제공하는 경우에는 화면 해설(텍스트, 오디오, 원고)을 제공하고, 음성만 제공하는 경우에는 자막, 원고 또는 수화를 제공해야 한다. 1. 열린 자막 제공 청각장애인은 시청각 컨텐츠에 포함된 대화를 청취할 수 없으므로 이를 열린자막(동영상의 오디오 트랙에 포함된 대화 및 중요한 음향 정보를 텍스트 표시된 자막)으로 시각적인 정보를 제공해야 한다. 2. 닫힌 자막 제공 닫힌 자막(사용자가 필요에 따라 자막을 화면에 표시하도록 제작하는 방법)은 동영상의 대화와 중요한 음향 정보를 포함해야 하며 대화나 음향 효과가 제공되지 않는 동영상은 '이 동영상은 음성을 제공하지 않음'이라는 메시지를 닫힌 자막 방식을 이용하여 수시로 제공할 필요가 있다. 3. 수화 제공 빠르게 변화하는 자막을 인식하기 어려운 청각장애인을 위하여 동영상의 자막을 수화로 함께 제공하고 자막으로 인하여 수화가 가리지 않도록 닫힌 자막으로 구현하여 사용자가 자막을 화면에서 삭제할 수 있어야 한다.
컨텐츠는 명확하게 전달되어야 한다.	컨텐츠는 색에 관계없이 인식될 수 있어야 한다. 컨텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자나 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자가 색을 배제하여도 해당 컨텐츠를 인식할 수 있도록 제공해야 한다. 1. 색을 보완하는 텍스트 제공
	명확한 지시 사항 제공 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다. 특정 요소를 가리키거나 지시 사항을 전달하는 컨텐츠에 한하는 것으로, 시각이나 청각 등과 같은 특정 감각에만 의존하여 제공해서는 안 되며, 다른 감각을 통해서도 지시 사항을 인식하는 데 문제가 없도록 제공해야 한다. 텍스트 컨텐츠와 대체 텍스트가 제공된 텍스트 아닌 컨텐츠는 보조 기기를 통해 다른 감각으로의 전환이 가능하기 때문에 이들 컨텐츠를 음성 컨텐츠로 변환하여 제공할 필요는 없다. 1. 시각 정보를 이용한 지시문의 보완 색, 크기, 모양 또는 위치를 이용하여 어떤 컨트롤이나 컨텐츠를 지시하는 경우 시각장애인이 인식할 수 있도록 대체 수단을 제공해야 한다. 2. 청각 정보를 이용한 지시문의 보완 청각 정보를 이용하여 지시문을 제공하는 웹 컨텐츠는 청각 정보를 인식할 수 없는 사용자를 위한 대체 수단을 제공해야 한다.
	텍스트 컨텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다. 웹 페이지에서 보이는 핵심 텍스트 컨텐츠와 배경 간의 충분한 대비를 제공하여, 저시력자, 색각 이상자, 노인 등도 컨텐츠를 인식할 수 있도록 제공해야 한다. 본문 컨텐츠에 단순한 목적으로 사용한 글자, 마우스나 키보드를 활용하여 초점(Focus)을 받았을 때 명도 대비가 커지는 컨텐츠는 예외로 한다.
	자동으로 재생되는 배경음을 사용하지 않아야 한다. 웹 페이지에서 자동으로 재생되는 배경음(동영상, 음성, 음악 등)으로 인해 컨텐츠를 인식하는 데 방해받지 않아야 한다. 단, 3초 미만의 배경음은 예외로 한다. 3초 이상 재생되는 배경음을 사용할 경우, 반드시 배경음을 제어할 수 있는 수단(멈춤, 일시정지, 음량조절 등)이나 배경음 제어로 이동하는 바로가기 링크를 웹 페이지의 첫 부분에 제공해야 한다. 컨텐츠가 제공하는 배경음의 음량을 조절하더라도 화면 낭독프로그램의 음량에는 영향을 주지 않아야 한다. 1. 재생 시간이 3초 미만인 배경음의 사용 웹 페이지에 포함되어 자동적으로 재생되는 사운드 컨텐츠의 길이를 3초 미만이 되도록 구현하고, 반복적으로 재생되지 않도록 한다. 2. 배경음을 정지 상태로 제공하는 방법 컨텐츠에 포함된 배경음을 음소거 상태로 제공하고, 사용자 제어에 의하여 배경음을 들을 수 있도록 구현하는 방법으로 이 방법은 사용자가 화면 낭독 프로그램을 사용하는데 아무런 영향을 주지 않는다.

둘째. 운용의 용이성

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

지침	검사항목
컨텐츠는 키보드로 접근할 수 있어야 한다.	모든 기능은 키보드만으로도 사용할 수 있어야 한다. 웹 페이지에서 제공하는 모든 기능은 키보드만으로도 사용할 수 있어야 한다. 사용자의 반응 속도나 지속성이 중요한 요소인 붓질(Painting), 시뮬레이션 컨텐츠등과 시각적인 방법으로만 접근이 가능한 지리정보 컨텐츠, 가상현실 컨텐츠등은 예외로 할 수 있다. 1. 키보드와 마우스 이벤트 핸들러 제공 - 마우스와 키보드 이벤트 핸들러를 동시에 제공하는 링크 - 마우스와 키보드 이벤트 핸들러를 동시에 제공하는 버튼 2. 키보드와 마우스로 접근이 가능한 이미지 버튼 1 <button onclick="page_print();"><img alt="인쇄" src="http://kangyoo80.tistory.com/admin/entry/post/image/print.gif"></button> 3. 키보드와 마우스로 접근이 가능한 링크 제공 - 키보드 초점을 받을 때 메뉴의 색이 변화할 경우 1 2 3 <a onmouseover="show('show')" onfocus="show('show')" onmouseout="show('hide')" onblur="show('hide')" href="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#notice">     <img alt="공지사항" src="http://kangyoo80.tistory.com/admin/entry/post/tabAnc_on_01.gif"> </a> - 마우스 클릭과 키보드 선택에 의하여 공통적으로 이벤트 핸들러 발생할 경우 1 2 3 <a onclick="show('show')" href="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#notice">     <img alt="공지사항" src="http://kangyoo80.tistory.com/admin/entry/post/tabAnc_on_01.gif"> </a> 4. 키보드만으로 입력 서식 이동이 가능하도록 제공 자동적으로 초점이 다음 입력 상자로 이동하지 않도록 구현하거나 이동하더라도 다시 뒤로 돌아갈 수 있도록 구현되어야 한다.
	키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. 웹 페이지에서 제공하는 모든 기능을 키보드만으로 사용하여 운용할 경우에도 초점이 논리적인 순서에 따라 이동하도록 제공해야 하며, 조작이 불가능한 상태가 되거나 갑작스러운 페이지의 전환 등이 일어나지 않아야 한다. 저시력자, 지체 장애인들이 초점을 받은 컨텐츠를 시각적으로 인지할 수 있도록 시각적으로 표현하여야 한다. 1. 컨텐츠 화면 순서와 동일한 키보드 내비게이션 순서 제공 시각적으로 표시된 컨텐츠와 일치하지 않으면 사용자에게 혼란을 줄 수 있으므로 Tab 키를 눌러서 컨텐츠를 이동하는 순서는 시각적 레이아웃 순서와 일치해야 한다. 컨텐츠의 논리적인 이동 순서를 돕기 위해 tabindex로 제어하는 방법도 있다. 2. 시각적으로 표시 가능한 초점 표시 방법 키보드로 웹 페이지를 이동할 때 현재 초점이 어디에 있는지 알 수 있어야 한다. 마우스와 같은 장치를 이용하지 못하는 사람에게 키보드와 같은 순차적인 탐색 장치가 매우 중요한 도구가 되기 때문이다. - CSS의 가상 클래스 1 2 a:hover, a:focus { border:1px solid #ee6600; } - 스크립트를 사용하여 배경색이나 경계선 변경 1 2 3 4 5 6 7 8 <script> function toggleFocus(el) { el.style.backgroundColor = el.style.backgroundColor=="yellow" ? "inherit" : "yellow"; } </script> <a onfocus="toggleFocus(this)" onblur="toggleFocus(this)" href="http://kangyoo80.tistory.com/admin/entry/post/example.html">focus me</a>
컨텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.	시간 제한이 있는 컨텐츠는 응답시간을 조절할 수 있어야 한다. 웹 컨텐츠 제작 시 시간 제한이 있는 컨텐츠는 가급적 제공하지 않는 것이 바람직하며, 보안 등의 사유로 시간 제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다. 1. 제한 시간 연장 방법 제공 제한 시간을 가진 기능을 제공할 때 사용자가 제한 시간을 연장할 수 있도록 해야 한다. 2. 메타 태그를 이용한 페이지 재 이동 방법 제공 1 2 ＜meta http-equiv="refresh" content="0;URL='redirect.html'" /＞ <p><a href="http://kangyoo80.tistory.com/admin/entry/post/redirect.html">redirect.html</a> 페이지로 이동합니다.</p>
	자동으로 변경되는 컨텐츠는 움직임을 제어할 수 있어야 한다. 웹 컨텐츠에서 스크롤 및 자동 갱신되는 컨텐츠를 장애인 사용자가 이용할 수 있도록 일시정지할 수 있는 방법을 제공해야 한다. 1. 변화하는 컨텐츠를 일시정지 시키고, 일시정지 된 곳으로 부터 다시 시작할 수 있도록 제공 2. 전체 배너를 보여줄 수 있는 방법 제공 3. 전체 배너의 리스트 제공 4. 사용자 요구에 의한 업데이트 방법 제공
광과민성 발작 예방 광과민성 발작을 일으킬 수 있는 컨텐츠를 제공하지 않아야 한다.	초당 3~50회 주기로 깜빡이거나 번쩍이는 컨텐츠를 제공하지 않아야 한다. 깜빡이거나 번쩍이는 컨텐츠로 인해 발작을 일으키지 않도록 초당 3~50회 주기로 깜박이거나 번쩍이는 컨텐츠를 제공하지 않아야 한다. 1. 깜빡이는 시간이 3초 이내인 컨텐츠만 제공 사용자의 시각적인 유인 효과를 위해서 컨텐츠의 움직임, 번쩍임, 깜빡임을 사용하는 경우 이들 움직임이 3초 이내에 자동적으로 멈출 수 있도록 제공한다. 2. 경고 페이지 제공 alert창을 이용하여 사용자에게 움직임, 번쩍임, 깜빡임이 있는 페이지로 이동함을 알리고 이동여부를 사용자가 결정할 수 있도록 한다.
컨텐츠는 쉽게 내비게이션 할 수 있어야 한다.	컨텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. 화면 낭독 프로그램을 이용하는 사람들은 반복되는 메뉴 등을 페이지마다 다시 듣게 되는데 이런 불편을 막기 위해, 메뉴 등과 같이 페이지마다 공통되며 반복되는 영역을 사용자가 바로 건너뛰어 핵심 컨텐츠로 이동할 수 있도록 건너뛰는 방법을 제공해야 한다. 1. 반복적인 컨텐츠 영역의 시작 부분에 건너뛰기 링크 제공 컨텐츠 영역 건너뛰기 링크(skip navigation)를 제공하면 해당 영역을 건너뛰고 다음 영역으로 사용자 제어를 이동시킬 수 있으므로 키보드 사용자의 사용성을 높일 수 있다. ** 모든 페이지가 반복 영역 건너뛰기가 반드시 필요하지는 않는다. 컨텐츠 블록마다 링크의 수가 많거나 메뉴나 링크 등의 반복되는 컨텐츠가 많은 복잡한 페이지일 경우에만 반복 영역 건너뛰기가 필요하다. 또한 반복 영역 건너뛰기 자체도 너무 많이 제공되지 않아야 한다. 2. 건너뛰기 링크의 화면 표시 1 2 3 4 5 <style> .contents_nav_link{visibility:hidden;position:absolute;} .contents_nav_link:focus{visibility:visible;position:static;} </style> <a class="contents_nav_link" href="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#contents">본문 바로가기</a>
	페이지, 프레임, 컨텐츠 블록에는 적절한 제목을 제공해야 한다. 페이지, 프레임, 컨텐츠 블록에 적절한 제목을 제공하여 사용자가 웹 컨텐츠를 운용하기 쉽게 도와주어야 한다. 제목은 간단명료해야 하며, 해당 페이지, 프레임, 컨텐츠 블록을 유추할 수 있도록 제공해야 한다. 1. 웹 페이지의 제목 제공 2. 컨텐츠 블록의 제목 제공 1 2 3 4 5 <h2>김치의 종류</h2> <ul>     <li>배추김치     </li><li>열무김치 </li></ul> 3. 프레임 제목 제공 frame 태그를 사용할 경우 해당 frame의 title 속성을 제공하여 프레임 간의 내비게이션이 용이하도록 해야 한다. 웹 페이지를 frameset으로 구성하고 title 태그를 제공하더라도 각 frame별로 title 속성을 제공해야 한다.
	적절한 링크 텍스트 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다. 링크의 용도나 목적지를 명확하게 이해할 수 있도록 링크 텍스트를 제공해야 한다.

셋째. 이해의 용이성

웹 사이트에서 제공하는 컨텐츠를 이해할 수 있어야 한다.

지침	검사항목
가독성 컨텐츠는 읽고 이해하기 쉬워야 한다.	주로 사용하는 언어를 명시해야 한다. 1. <html> 태그에 주 사용 언어 지정 1 ＜html lang="ko"＞ 1 ＜html lang="en"＞
컨텐츠의 기능과 실행결과는 예측 가능해야 한다.	사용자 요구에 따른 실행 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다. 컨트롤이나 사용자 입력은 초점을 받았을 때에 의도하지 않는 기능이 자동적으로 실행되지 않도록 컨텐츠를 개발해야 한다. 사용자가 마우스로 클릭하거나 키보드를 이용하여 입력한 후 기능이 실행되어야 한다. 사용자가 예측할 수 없는 상황에서 정보를 제공하지 않아야 하며, 특히 사용자가 인지하지 못한 상황에서 새 창, 팝업 창 등을 제공하지 않아야 한다. 1. 명확한 서식 제출(submit) 버튼 제공 1 2 3 4 5 <form>     <p>메일링 리스트에 가입하려면 이메일 주소를 넣어주십시오.</p>     <label for="email">이메일 주소:</label><input id="email" name="address">     <input type="submit" value="가입"> </form> 2. 새 창 열림을 사전에 알림 1 2 3 <a href="http://kangyoo80.tistory.com/admin/entry/post/knitting.html" target="_blank">뜨개질 포털 사이트 (새 창으로 열림)</a> <a href="http://kangyoo80.tistory.com/admin/entry/post/korean.html" target="_blank"><img alt="한국어 페이지 (새창으로 열림)" src="http://kangyoo80.tistory.com/admin/entry/post/korean.png"></a> <a title="새 창으로 열림" href="http://kangyoo80.tistory.com/admin/entry/post/help.html" target="_blank">도움말</a>
컨텐츠는 논리적으로 구성해야 한다.	컨텐츠는 논리적인 순서로 제공해야 한다. 컨텐츠는 보조 기기 등을 통해서도 논리적인 순서로 이해할 수 있어야 한다. 1. 컨텐츠를 의미 있는 순서로 배열 1 2 3 4 5 6 7 8 9 10 11 12 <div class="box">     <dl>         <dt class="menu1">중국 음식         </dt><dd class="item1">자장면         </dd><dd class="item2">짬뽕         </dd><dd class="item3">탕수육         </dd><dt class="menu2">한국 음식         </dt><dd class="item4">김치찌개         </dd><dd class="item5">된장찌개           </dd></dl> </div> 2. 스타일을 이용한 글자 간격 조절 디자인요소에 의해 단어사이에 강제로 공백을 넣게 되면 단어의 의미가 달라지고, 화면 낭독 프로그램에서는 다르게 발음을 하게 될 수도 있으며, 페이지 내에서 해당 단어를 검색할 수 없게 되고, 검색 엔진이나 번역 엔진에서도 다른 단어로 인식하게 된다. 이 경우 CSS의 letter-spacing 속성이나 text-align 속성을 이용해 조절하면 된다. 3. 동적으로 생성된 요소는 그것을 유발시킨 요소 바로 뒤에 위치 1 2 3 4 5 6 7 8 9 10 <p>     <label for="imei">IMEI Code: </label>     <input id="imei">     <a href="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#imeihelp"><img alt="What is IMEI?" src="http://kangyoo80.tistory.com/admin/entry/post/help.png"></a> </p> <div id="imeihelp">     <h3>Explanation of IMEI</h3>     <p>Help content here....</p>     <p><a href="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#imei">Back to IMEI input field</a>.</p> </div> 위의 예제는 IMEI code에 대한 도움말이 보이는 소스 코드이다. 위와 같은 도움말 제공 방식에 대해 도움말이 IMEI Code를 입력한 다음에 나오기때문에 시각장애인들이 도움말이 있다는 사실을 알기 어렵다는 지적도 있다. 그런 경우, 도움말 링크를 <label>안에 넣어 다음과 같이 표현해도 된다. 1 2 3 4 5 6 7 <p>     <label for="imei">         IMEI Code:         <a href="http://kangyoo80.tistory.com/admin/entry/post/?id=17&type=post&returnURL=/manage/posts/#imeihelp"><img alt="What is IMEI?" src="http://kangyoo80.tistory.com/admin/entry/post/help.png"></a>     </label>     <input id="imei"> </p>
	표는 이해하기 쉽게 구성해야 한다. 시각장애인 등도 이해할 수 있도록 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다. 1. 표 제목을 <caption>으로 제공 1 2 중간 생략 <table><caption>개인별 시험 성적표</caption><tbody></tbody></table> 2. 표의 구조 또는 내용에 대한 요약을 summary로 제공 1 2 중간 생략 <table summary="중간 고사와 기말 고사 성적을 개인별로 보여주는 표"><caption>개인별 시험 성적표</caption><tbody></tbody></table> 3. 표의 헤더 셀과 데이터 셀의 관계 정의 1 <table summary="중간 고사와 기말 고사 성적을 개인별로 보여주는 표"><caption>개인별 시험 성적표</caption><thead><tr><th>구분</th><th>중간 고사</th><th>기말 고사</th></tr></thead><tbody><tr><th>김철수</th><td>50</td><td>60</td></tr><tr><th>박영희</th><td>70</td><td>80</td></tr></tbody></table>
입력 도움 입력 오류를 방지하거나 정정할 수 있어야 한다.	입력 서식에는 대응하는 레이블을 제공해야 한다. 시각 장애인 등이 해당 서식을 이해할 수 있도록 레이블을 제공해야 한다. 1. 입력 서식과 <label>의 명시적 관계 제공 1 2 <label for="name">이름 : </label> <input id="name" maxlength="50" size="30"> 1 2 <label for="show0"><input id="show0" checked="" type="radio" value="0" name="show">biew</label> <label for="show1"><input id="show1" type="radio" value="1" name="show">view</label> 2. <label>을 제공할 수 없는 입력 서식에 title 제공 1 2 3 <label for="searchTerm">검색:</label> <input id="searchTerm" size="30" name="searchTerm"> <select id="scope" title="검색 대상"> <option selected="" value="title">제목</option> <option value="keyword">키워드</option></select> 3. 여러 개의 유사한 입력 서식 묶기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <form method="post" action="http://example.com/adduser">     <fieldset>         <legend>집 주소</legend>         <label for="raddress">주소: </label>         <input id="raddress" name="raddress">         <label for="rzip">우편번호: </label>         <input id="rzip" name="rzip">     </fieldset>     <fieldset>         <legend>회사 주소</legend>         <label for="caddress">주소: </label>         <input id="paddress" name="caddress">         <label for="czip">우편번호: </label>         <input id="czip" name="czip">     </fieldset> </form>
	입력 오류를 정정할 수 있는 방법을 제공해야 한다. 사용자의 실수로 잘못된 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다. 1. 입력 값 또는 형식에 대한 예시 제공 HTML5로 코딩할 경우 html5에서 제공하는 placeholder 속성을 이용해 예제를 보여주거나 다양한 웹폼을 사용하면, 복잡한 자바스크립트를 쓰지 않고 사용자의 입력 오류를 줄이는데 도움을 줄 수 있다. 1 2 3 4 5 6 7 8 9 <form>     <label for="name">이름 (예: 홍길동): </label><br>     <input id="name" title="성과 이름을 붙여 쓰세요." name="name"><br>     <label for="email">이메일: </label><br>     <input id="email" placeholder="mailid@example.com"><br>     <label for="birthdate">생년월일 (형식: yyyy-mm-dd): </label><br>     <input id="birthdate" name="birthdate"><br>     <input type="submit" value="제출"> </form> 2. 오류 메시지를 스크립트 경고창으로 제공 제출한 값을 검사한 후 이상이 있을 때 오류가 발생한 사실을 alert창으로 보여줄 수 있다. 그리고 경고창을 확인한 후의 초점이 오류가 난 입력필드로 이동해야 사용자가 오류를 쉽게 수정할 수 있다. 3. 중요한 서식 제출 시 재확인 절차 제공 사용자가 최종적으로 되돌릴 수 없는 거래(온라인 시험, 금융 거래, 법적인 절차에 대한 동의, 법적인 거래 등)를 하기 전에 자신의 입력 사항이 맞는지 검토할 기회를 주어야 한다.

넷째. 견고성

웹 컨텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

지침	검사항목
웹 컨텐츠는 마크업 언어의 문법을 준수해야 한다.	마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. 마크업의 문법을 최대한 준수하여 제공하고 특히 태그의 열고 닫음, 중첩 관계의 오류가 없도록 해야 한다. 1. 여는 태그와 닫는 태그의 정확한 사용 마크업 언어를 이용하여 마크업 문서를 구현할 때 반드시 태그의 열림과 닫힘이 일치해야 한다. 1 <p>요소를 여는 태그의 닫음 표시가 불명확한 문단입니다.</p> 2. 속성 이름과 속성 값의 정확한 사용 따옴표로 속성 값을 구분하여 제공할 경우 따옴표를 누락하게 되면 일부 정보가 무시될 수 있다. 1 <input title="name"> 속성 값에 따옴표를 사용해야 할 경우, 따옴표를 그냥 사용하면 속성 값의 종결문자로 인식하기 때문에 값으로 사용할 때 "로 사용해야 한다. 1 <input value=""가나다""> 3. 태그의 정확한 중첩관계 태그를 사용할 경우 중첩관계가 엇갈리지 않도록 해야 한다. 1 <p>중첩관계가 <strong>명확해야 한다.</strong></p> 4. 표준에 부합하는 태그와 속성 이름, 값 사용 브라우저에 따라서는 표준에 명시되지 않는 태그나 속성을 허용하는 경우가 있다. 그러나 마크업 문서를 작성할 경우 반드시 표준에 명시된 태그와 속성을 사용해야 이 문서를 어떠한 브라우저와 보조기술을 이용하여 접근하더라도 정상적인 접근이 가능하게 된다.
웹 애플리케이션은 접근성이 있어야 한다.	웹 애플리케이션 접근성 준수 컨텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다. 웹 컨텐츠에 포함된 부가 애플리케이션 또는 웹 페이지의 기능을 실행하는 데 필요한 웹 애플리케이션은 웹 페이지를 사용하거나 접근하는 것을 방해하지 않아야 한다. 웹 애플리케이션은 본 지침에서 설명한 모든 지침들을 적용하여 제작하여야 한다.