현재 페이지 위치

Home> 나눔> 웹접근성 가이드> PC/모바일 웹 접근성 체크리스트

PC/모바일 웹 접근성 체크리스트

체크리스트 보기

8.1.1 사용자가 의도하지 않은 기능(초점 변화, 서식 전송, 새 창, 팝업, 레이어)이 실행된 곳은 없는가?

장애 유형

장애 유형
전맹, 저시력, 운동
오류 설명
  • 셀렉트 박스의 옵션을 선택 변경하는 것 만으로 페이지가 전환되거나 새 창이 뜨게 되면 시각 장애 환경에서 변화를 인지할 수 없어 다음 단계로의 진행이 어려움.
  • 의도하지 않은 기능의 실행은 운동 장애 및 비장애 환경에서도 사용자에게 불편을 초래함
  • 초점이나 입력을 받은 후에 발생할 수 있는 변화를 사전에 공지하거나, 사용자가 수행한 기능을 완료할 수 있는 버튼을 별도로 제공하는 것이 바람직함.

오류 유형

페이지가 자동 refresh 되는 경우

오류 예시
페이지 전체가 10분마다 자동 리프레시 됨
참고 이미지
javascript로 refresh시킨 코드 예
해결 방법
페이지 리프레시를 없애거나 리프레시를 정지할 수 있는 정지 버튼을 제공해야 함.

의도하지 않은 초점 변화가 일어나는 경우

오류 예시
검색창에서 tab키를 눌렀는데 로그인 인풋박스로 포커스가 넘어감.
참고 이미지
의도하지 않는 초점 변화가 일어나는 예
해결 방법
검색창에서 tab키를 누르면 검색 버튼으로 넘어가야 함.

페이지에 접속하는 순간 새창이 뜨는 경우

오류 예시
페이지에 접속하자마자 새창(팝업)이 뜨고 있음.
참고 이미지
페이지 진입 시 새창이 뜨는 예
해결 방법
의도하지 않은 새창은 뜨지 말아야 함.

초점을 받은 것 만으로 새창이나 레이어가 뜨는 경우

오류 예시
'우편번호 찾기 인풋박스'에 초점이 가는 순간 우편번호 찾기 팝업창이 뜸.
참고 이미지
우편번호 찾기 인풋박스에 초점이 가는 순간 팝업창이 뜨는 예
해결 방법
'우편번호 찾기' 버튼을 클릭시에 팝업창이 뜨도록 수정해야 함.

초점을 받은 것 만으로 페이지가 바뀌는 경우

오류 예시
초점을 받은 것 만으로 페이지가 이동함.
참고 이미지
셀렉트박스 선택을 변경하는 순간 팝업창이 뜨는 예
해결 방법
onChange 이벤트는 제거하고 셀렉트박스 우측에 '이동' 버튼을 추가하여 버튼 클릭시 이동하도록 수정해야 함.

자바스크립트로 새창을 띄우고 title="새창"을 제공하지 않은 경우

오류 예시
window.open 메소드를 사용하여 새창을 띄웠으나 title="새창"을 제공하지 않았음
참고 이미지
자바스크립트로 새창띄운 경우
해결 방법
window.open을 사용하면 새창을 띄우는 요소에 title="새창"을 제공해야 함.

모바일 환경에서 자바스크립트로 새창을 띄우고 title="새창"을 제공하지 않은 경우

오류 예시
자바스크립트로 새창을 띄웠으나 title="새창"을 제공하지 않았음
참고 이미지
자바스크립트로 새창띄운 경우
해결 방법
자바스크립트로 새창을 띄우는 요소에 title="새창"을 제공해야 함.

주의 사항

  • onFocus, onKeypress등의 이벤트에 의해 포커스를 옮기는 동작만으로 새창이 발생하면 오류
  • 플래시 등에서 제공하는 새창에서도 Name, Description값에서 새창 안내가 없으면 오류
  • <a target="blank">로만 새창을 알린 경우 오류 아님
  • 자바스크립트로 새창을 띄웠으나 target="_blank"를 함께 사용한 경우는 오류 아님
  • 오류 정정을 위한 자동 초점 변경은 감점 아님

평가 방법

평가 방법

  • 페이지가 자동 refresh되고 있지는 않은지 확인.
  • 페이지내 요소들을 Tab으로 이동하면서 초점을 받은 것만으로 새창이나 레이어가 뜨는 지 확인
  • 페이지내 요소들을 Tab으로 이동하면서 초점을 받은 것만으로 페이지가 이동하는 지 확인.
  • 셀렉트박스에서 화살표로 옵션을 옮기는 것만으로 페이지가 변경되는 지 확인.

모바일 환경에서 평가 방법

평가 도구
User Agent Switcher(파이어폭스 부가기능)
평가 방법
Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, PC환경에서의 평가와 동일하게 진행함

평가 도구 전체 설치 방법