인식의 용이성 (Perceivable)
인식의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미한다.
(1) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체텍스트를 제공해야 한다.
- 텍스트 이미지에는 이미지와 동일한 텍스트를 제공한다.
- 배너와 같은 이미지의 경우 제목만 제공하지 말고 모든 내용을 대체텍스트로 제공한다.
- 블릿이나 기호와 같은 이미지의 경우 아무 의미가 없음을 인식시키기 위해 alt=“”와 같이 대체텍스트를 제공한다.
- 도표나 조직도 같은 이미지의 경우
- 내용과 동일한 대체내용을 이미지 바로 다음에 배치하고 hidden 처리한다.
- 의미 있는 이미지 부분들을 조각 내어 이미지마다 대체 텍스트를 제공한다.
- 대체 내용을 longdesc 속성을 사용하여 제공한다.
- 내용이 많은 이미지(통이미지)의 경우 내용이나 계층구조에 맞게 마크업하여 longdesc로 제공한다.
- "~이미지", "~버튼", "~링크"와 같이 중복되는 불필요한 대체텍스트는 제공하지 않는다.
- 이미지 맵의 경우 이미지 자체에 기능의 대체 텍스트를 제공하고 <area> 요소에는 링크의 대체텍스트를 제공한다.
- 의미가 있는 이미지는 배경이미지로 사용하지 말고 전경이미로 사용하고 대체텍스트를 제공한다.
- 텍스트 이미지를 제목으로 사용할 경우 <h1>~<h6>에 맞는 요소를 함께 써준다.
- 표정과 같은 이모티콘 이미지와 같은 경우 이모티콘에 맞는 (“기쁨”, “슬픔”, “화남”)대체 텍스트를 제공한다.
- 정도를 나타내는 이미지의 경우 “상”,”중”,”하” 또는 “최우수”, “우수”, “보통” 등과 같이 적절한 표현을 제공한다.
(2) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
- 동영상, 음성과 같은 멀티미디어 콘텐츠에는 해당 콘텐츠를 이해할 수 있는 자막, 원고 또는 수화를 제공해야 한다.
- 원고 제공 시 설명이나 일부만 제공하지 말고 전체 내용을 제공해야 한다.
- 원문을 제공할 경우 내용이 많을 경우 원문을 스크롤하여 볼 수 있도록 제공할 것을 권장함.
(3) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
- 롤링 콘텐츠의 현재 선택 정보를 색상 이외에 모양, 크기, 패턴등을 제공한다.
- 게시판의 페이지 네비게이션에 현재 페이지 정보를 크기, 괄호, 굵기 등을 제공한다.
- 그래프 정보를 색상 이외에 패턴, 모양, 설명 등으로 제공한다.
- 예약 상태, 처리 상태등과 같은 정보를 색상 이외에 아이콘, 텍스트, 모양 등으로 제공한다.
(4) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식 될 수 있어야 한다.
- "네모 버튼", "세모 표시" 등과 같이 모양에만 의존한 지시사항을 제공하지 않는다.
- 큰 글자, 작은 도형 등의 크기에만 의존하여 지시사항을 제공하지 않는다.
- 이곳, 여기 등 위치에만 의존한 지시사항을 제공하지 않는다.
- 오른쪽 버튼, 윈쪽 글, 우측 상단과 같이 방향에만 의존한 지시사항을 제공하지 않는다.
- "들리는 대로", "소리나는 대로"와 같이 소리에만 의존한 지시사항을 제공하지 않는다.
- "보이는 대로", "보이는 숫자"와 같이 시각에만 의존한 지시사항을 제공하지 않는다.
본문 상단으로 이동
운용의 용이성 (Operable)
운용의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 기능들을 운용할 수 있도록 제공하는 것을 의미한다.
(7) 모든 기능을 키보드로 이용할 수 있어야 한다.
- 기능을 제공할 때는 초점이 이동할 수 있는 요소로 구현한다.
- <a> 요소를 사용할 경우 반드시 href 속성을 제공한다. (미제공 시 초점이 이동하지 않음)
- 이벤트 구현 시 마우스 이벤트 뿐만 아니라 키보드도 이용할 수 있도록 구현해야 한다.
- 키 이벤트 구현 시 함정(무한루프 등)에 빠지지 않도록 구현해야 한다.
- focus="this.blur();" 코드는 초점을 브라우저에 보내 초기화 시키므로 사용하지 말아야 한다.
(8) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
- 초점은 시각적으로 구별할 수 있게 제공해야 한다.
- 초점은 논리적인 순서(왼쪽에서 오른쪽, 위에서 아래)로 이동하도록 제공해야 한다.
- 레이어 팝업 제공 시 초점을 가리지 않도록 제공해야 한다.
- 기능을 제공하는 레이어 팝업 제공 시 초점이 논리적인 순서대로 이동해야 한다.
- tabindex 속성을 잘못 사용할 경우 이동 순서가 잘못 지정되도록 하지 않는다. 콘텐츠를 논리적으로 구성할 경우 실제로 tabindex는 사용할 필요가 없으므로 사용하지 않는다. (오히려 독이 될 수 있다.)
- 일시적으로 초점이 사라지지 않도록 제공해야 한다.
(10) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
- 자동 변경되는 콘텐츠에는 제어 기능을 제공해야 한다.
- 제어 기능은 "정지", "시작", "이전", "다음" 기능을 제공해야 한다.
- "이전", "다음" 기능은 롤링 방향만 바꾸는 것이 아니라 콘텐츠가 이동해야 한다.
- 제어 기능은 마우스 뿐만 아니라 키보드로도 이용할 수 있도록 제공해야 한다.
(12) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
- 건너뛰기 링크는 본문 최상단에 위치해야 한다. (<body> 요소 다음에 제공해야 함.)
- 콘텐츠의 주요 부분으로 초점이 바로 이동할 수 있도록 건너뛰기 링크를 제공한다.
- 기본적으로 본문으로 바로가기 기능은 반드시 제공되어야 하며 부가적으로 메인 메뉴, 서브 메뉴 정도의 링크를 제공한다.
- 건너뛰기 링크는 시각적으로 보이도록 제공해야 한다.
(13) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
- 현재 페이지가 어느 페이지인지 명확히 알 수 있도록 <title>요소에 현재 페이지의 제목을 정확히 제공한다.
- 제목 정보에는 페이지의 위치까지 제공해야 한다. (예:"회사소개 > 인사말 | 위온정보기술")
- 특수문자는 1회 이상 반복하여 사용하지 않는다. (예: "::", "##")
- 콘텐츠 블록에는 제목 요소(<h1>~<h6>)를 제공해야 한다.
- <frame>이나 <iframe> 요소에는 기능이나 내용을 알 수 있도록 title 정보를 제공해야 한다.
(14) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
- 링크에 기능을 제공할 경우 용도나 목적을 이해할 수 있도록 제공해야 한다. (예:구매하기(알사탕), 찜하기(새우깡), 장바구니(꼬깔콘) 등)
- 게시물에 기능을 제공할 경우 어느 게시물에 대한 기능인지 정보를 제공해야 한다. (예:목록(공지사항), 더보기(공지사항), 검색(공지사항) 등)
- "확인"과 같이 기능이 모호한 버튼이나 링크는 사용을 지양하고 "로그인", "저장", "회원가입" 등과 같이 기능을 명확하게 알 수 있는 단어를 사용할 것을 권장함.
- url 링크를 제공할 경우 title 속성에 해당 사이트명이나 페이지명을 제공해야 한다.
본문 상단으로 이동
이해의 용이성 (Understandable)
이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다.
(15) 주로 사용하는 언어를 명시해야 한다.
- html 문서에는 <html lang="ko">로 주 사용 언어를 명시해야 한다.
- xhtml 문서에는 <html xml:lang="ko">로 주 사용 언어를 명시해야 한다.
- 언어 코드는 ISO 639 표준 코드를 사용한다.
(16) 사용자가 의도하지 않은 기능(새창, 초점 변화 등)은 실행되지 않아야 한다.
- 페이지 시작 시 팝업창 또는 레이어 팝업을 제공하지 않는다.
- 이미지 링크로 새 창을 띄울 경우 이미지의 대체텍스트에 "우편번호찾기-새창"과 같이 사전에 공지한다.
- 링크나 버튼으로 새 창을 띄울 경우 title 속성에 "우편번호찾기-새창"과 같이 사전에 공지한다.
- 초점을 임의로 이동시키지 않는다.
- 페이지 시작 시 특정 입력 서식으로 초점을 이동시키지 않는다.
- 전화번호, 카드번호와 같이 연속된 입력 서식의 경우 자동으로 초점을 다음 입력 서식으로 이동시키지 않는다.
- 특정 기능 수행 시 초점을 임의로 이동시키지 않는다.
- <select> 요소의 목록 변경 시 페이지가 새로 고쳐지지 않도록 한다. ("검색", "이동"과 같은 기능 버튼을 추가로 제공한다.)
(17) 콘텐츠는 논리적인 순서로 구성되어야 한다.
- 레이아웃이나 디자인 요소는 css로 분리시켜 콘텐츠와 디자인을 분리시킨다. html에 콘텐츠만 존재할 경우 순서가 논리적으로 나열된다.
- 꼭 필요한 경우 배치용 테이블을 사용할 때는 <thead>, <tbody>, <th>, <caption>이나 title, summary 속성 등은 사용하지 않는다.
- 탭보드의 경우 탭1 < 해당내용 < 탭2 < 해당내용 순서대로 마크업해야 한다.
- 목록으로 제공되어야 하는 콘텐츠는 <ul>, <li>와 같은 요소를 사용하여 계층구조로 제공해야 한다.
- 사용하지 않는 콘텐츠는 숨김상태로 제공하지 말고 마크업을 제거해야 한다.
- 콘텐츠를 중복해서 제공하지 말아야 한다.
- 입력 서식의 설명 정보는 입력 서식 이전에 마크업 하여 설명 정보를 인지한 후에 입력할 수 있도록 제공해야 한다.
(18) 표는 이해하기 쉽게 구성해야 한다.
- <table> 요소에 summary 속성은 표의 구성을 이해할 수 있도록 정보를 제공한다.
(예: 번호, 제목, 작성자, 작성일자, 읽은수로 구성된 공지사항 표")
- <caption> 요소는 표의 제목을 제공한다. (예:<caption>공지사항</caption>)
- 제목 영역, 내용 영역, 합계 등과 같은 하단 영역을 구분하기 위하여 <thead>, <tbody>, <tfoot> 요소를 사용한다. 단 코딩 순서는 <thead>, <tfoot>, <tbody> 순으로 작성한다.
- 제목 셀과 내용 셀을 구분하기 위하여 <th>, <td> 요소를 사용한다.
- 제목 셀의 경우 어떤 셀의 제목인지를 명확하게 하기 위하여 scope 속성을 사용한다. “col”일 경우 컬럼 제목, “row”일 경우 행 제목으로 인식된다.
- 병합이 복잡한 테이블의 경우 제목 셀에 고유 id를 부여하고 내용 셀은 headers 속성을 사용하여 내용 셀이 어떤 데이터 인지 명확하게 알 수 있도록 한다.
(19) 입력 서식에는 대응하는 레이블을 제공해야 한다.
- 입력 서식에는 <label> 정보를 제공해야 한다.
- <label> 요소의 for 속성과 입력 서식의 id 속성을 대응하여 제공해야 한다.
- <label> 정보가 이미지일 경우 입력 서식에 title 속성을 함께 제공할 것을 권장함.
- 전화번호나 카드번호 같이 대응 정보가 없을 경우 입력 서식에 title 속성을 제공해야 한다.
(20) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
- 입력 오류 발생 시 정정 메시지를 제공한 후에 오류가 발생한 위치로 초점이 이동해야 한다.
- 오류 메시지는 오류 위치와 오류 유형을 명확하게 인식할 수 있도록 제공해야 한다.
- 입력된 정보는 초기화되지 말아야 한다. 초기화 시켜야 할 경우 사전에 초기화 됨을 알려야 한다.
본문 상단으로 이동
견고성 (Robust)
견고성은 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미한다.
(21) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
- 열고 닫음 마크업 오류가 없어야 한다. W3C Validator 검사 시 "end tag for" 오류가 없어야 한다.
- 중첩 관계 마크업 오류가 없어야 한다. W3C Validator 검사 시 "already defined" 오류가 없어야 한다.
- 속성 선언 마크업 오류가 없어야 한다. W3C Validator 검사 시 "duplicate" 오류가 없어야 한다.
(22) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
- 페이지 시작 시 팝업창 또는 레이어 팝업을 제공하지 않는다.
- 이미지 링크로 새 창을 띄울 경우 이미지의 대체텍스트에 "우편번호찾기-새창"과 같이 사전에 공지한다.
- 링크나 버튼으로 새 창을 띄울 경우 title 속성에 "우편번호찾기-새창"과 같이 사전에 공지한다.
- 초점을 임의로 이동시키지 않는다.
- 페이지 시작 시 특정 입력 서식으로 초점을 이동시키지 않는다.
- 전화번호, 카드번호와 같이 연속된 입력 서식의 경우 자동으로 초점을 다음 입력 서식으로 이동시키지 않는다.
- 특정 기능 수행 시 초점을 임의로 이동시키지 않는다.
- <select> 요소의 목록 변경 시 페이지가 새로 고쳐지지 않도록 한다. ("검색", "이동"과 같은 기능 버튼을 추가로 제공한다.)
본문 상단으로 이동
