Completion 0%

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

6.1.1 특정 장치에 의존적이거나 복잡한 누르기 동작은 단순한 키 조작 또는 터치로도 가능한가?

장애 유형

장애 유형
전맹, 저시력, 운동
오류 설명
  • 전맹, 저시력의 경우 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등을 활용하여 화면을 읽음.
  • 스크린리더나 점자정보단말기는 주로 키보드로 사용되며 운동장애의 경우에도 세밀한 조작이 필요한 마우스보다는 키보드를 주로 사용함.
  • 마우스를 사용할 수 없는 시각 및 운동 장애 환경에서도 키보드만으로 웹 콘텐츠를 이용하는데 문제가 없도록 해야함.
  • 모바일 환경에서 VoiceOver나 TalkBack은 콘텐츠 지정 및 활성화 기능으로 작동되므로 단순한 누르기 동작만으로 웹 콘텐츠를 이용하는데 문제가 없도록 해야 함
  • 모바일 환경에서 운동장애의 경우 다중 누르기, 슬라이드 또는 드래그 앤 드롭과 같은 복잡한 동작을 수행하기에 어려움
  • 복잡한 이벤트 및 동작을 없애기 보다, 동등한 기능을 키보드나 단순한 동작만으로도 수행할 수 있는 방법을 제시하여 웹 콘텐츠를 운용하는데 무리가 없도록 해야함.

오류 유형

마우스로 가능한 기능이 키보드로 불가능한 경우.

오류 예시1
도움말 버튼에 키보드 포커스를 위치 시킨 후 엔터를 누르면 반응이 없음.
마우스를 오버했을 경우에만 도움말 레이어가 보임.
참고 이미지

해결 방법
키보드 접근 후 엔터를 누르면 레이어를 열 수 있도록 수정해야 함.
오류 예시2
네이버 GNB에서 닉네임에 키보드 포커스를 위치시킨 후 엔터를 누르면 레이어가 보이지만 다음 요소로 포커스를 이동해도 레이어가 계속 열려있음.
참고 이미지
해결 방법
오류 예시3
화면에 보이는 목록의 갯수를 변경하기 위한 UI에 키보드로 접근할 수가 없음.
참고 이미지
 
해결 방법
클릭이 되어야 하는 요소는 링크(<a>)나 버튼(<button>)으로 마크업 되어야 하며, 여러개 중에 하나를 선택해야 하는 UI의 경우 셀렉트 박스(<select>)나 라디오 버튼(<input type="radio">)으로 마크업 해야함.
오류 예시4
메일함을 만들기 위해 메일함 이름을 입력하고 만들기 버튼에 키보드 포커스를 위치시킨 후 엔터를 누르면 아무런 동작도 하지 않음.
참고 이미지

해결 방법
키보드 접근 후 엔터를 누르면 메일함이 생성되어야 함.
오류 예시5
쇼핑 탭이 마우스 오버 시 탭 선택되고 클릭 시 페이지 이동하도록 설계되어 있다.
키보드로 이용 시 포커스 시에는 아무 반응이 없고 엔터키로 선택하면 페이지 이동한다.
키보드를 이용해 탭 선택이 불가능한 구조이다.
참고 이미지
해결 방법
  1. 키보드 포커스 시에 탭 선택이 되도록 수정
  2. 혹은 엔터키로 선택 시 탭 선택이 되도록 수정하고 페이지 이동할 수 있는 링크를 추가로 제공
오류 예시6
<a> 요소로 구현된 "언론사 전체보기" 메뉴에서 enter키가 적용되지 않고 space키를 눌렀을 때 목록이 펼처짐.
참고 이미지
해결 방법
키보드로 링크를 실행할 때에는 Enter키가 사용되므로 Space키 대신 Enter키를 눌러 리스트가 펼쳐져야함
오류 예시7
"뉴스 캐스트" 메뉴의 언론사 구독해지 기능 사용 불가
참고 이미지
해결 방법
키보드로 접근시에도 마우스로 이용할때와 동일한 "구독 해지" 기능을 이용할 수 있도록 해야 함
오류 예시8
검색어 입력후 Enter키로 검색결과 조회가 가능하지만 '조회' 버튼에 키보드로 접근이 불가능할 경우에는 오류임
참고 이미지
해결 방법
검색어 입력창 뒤에 '조회' '검색' 등의 버튼에 마우스로 접근할 수 있다면 키보드로도 접근이 가능해야 함.
오류 예시9
<a>에 href속성이 없어 키보드 포커스가 접근할 수 없는 경우
참고 이미지
해결 방법
<a>에 href속성을 추가해야 함.

키보드로 플래시에 접근할 수 없는 경우

오류 예시
네이버 메인의 광고 배너를 키보드로 접근할 수 없음.
참고 이미지
해결 방법
광고 배너 플래시가 키보드로도 접근할 수 있도록 제공되어야 함.

모바일 환경의 복잡한 동작 기반 기능이 단순 누르기 동작으로 대체 되지 않는 경우

오류 예시
다중 누르기, 슬라이드 또는 드래그 앤 드롭과 같은 방식으로 확대 되는 지도 페이지에서 단순 누르기로 확대할 수 있는 별도 버튼이 제공되지 않음
참고 이미지
해결 방법
다중 누르기, 슬라이드 또는 드래그 앤 드롭과 같이 복잡한 동작은 터치, 탭과 같은 단순 누르기 동작으로도 대체될 수 있도록 함
참고 이미지와 같이 확대 축소 버튼을 한 번 터치 함으로써 복잡한 동작 기반 기능을 대체할 수 있도록 함
참고 이미지

주의 사항

  • 키보드 접근 여부는 리얼IE8을 기준으로 테스트 한다. (IE9에서 브라우저 버전을 바꾸거나 멀티IE등에서 테스트하면 결과가 리얼IE8이랑 다를 수 있음). IE8을 기준으로 하는 이유는 IE8이 국내 사용자가 가장 많고 플래시의 경우 IE8에서 문제가 되는 경우가 있기 때문.

평가 방법

평가 방법

평가 방법
  • 키보드의 Tab 키를 이용해 웹 콘텐츠를 탐색하고, 필요에 따라 엔터/ 방향키/ 스페이스 등을 눌러 바르게 동작되는지 확인.

모바일 환경에서 평가 방법

평가 방법
  • 모바일 환경에서 제공되는 다중 누르기, 슬라이드 또는 드래그 앤 드롭과 같이 복잡한 동작을 사용하는 기능이 있는지 확인
  • 복잡한 해당 기능을 단순한 누르기 동작으로 대체할 수 있는지 평가

평가 도구 전체 설치 방법

구현 예시

닫기 버튼이 없는 레이어가 표시된 상태에서의 올바른 키보드 동작

설명
링크 또는 버튼을 선택(엔터)한 뒤 레이어를 탐색하고 다음 요소로 이동하면 레이어가 자동으로 닫힘
[테스트 페이지]
HTML
<div id="menu" class="menu">
<a href="#" id="menu1">메뉴1</a>
<!--
  메뉴1을 클릭했을 때 보이는 레이어의 키보드 포커스가
  메뉴1 바로 뒤에 위치할 수 있도록 마크업의 위치를 메뉴1 바로 뒤로 구성
-->
<div id="menu1_layer" class="layer">
  <a href="#">메뉴1-1</a>
  <a href="#">메뉴1-2</a>
</div>
<a href="#" id="menu2">메뉴2</a>
<a href="#" id="menu3">메뉴3</a>
</div>
Script
// 메뉴1이 클릭 될 때 메뉴1의 레이어를 토글합니다.
document.getElementById("menu1").onclick = function() {
var layerEl = document.getElementById("menu1_layer");
layerEl.style.display = layerEl.style.display == 'block' ? 'none' : 'block';
return false;
};
// 메뉴1 레이어 바로 다음 요소인 메뉴2 포커스 시 메뉴1 레이어 숨기기
document.getElementById("menu2").onfocus = function() {
var layerEl = document.getElementById("menu1_layer");
layerEl.style.display = 'none';
};

닫기 버튼이 있는 레이어가 표시된 상태에서의 올바른 키보드 동작

설명
링크 또는 버튼을 선택(엔터)한 뒤 레이어를 탐색하고 닫기 버튼을 눌러 레이어를 닫음
[테스트 페이지]
HTML
<div id="menu" class="menu">
<a href="#" id="menu1">메뉴1</a>
<!--
  메뉴1을 클릭했을 때 보이는 레이어의 키보드 포커스가
  메뉴1 바로 뒤에 위치할 수 있도록 마크업의 위치를 메뉴1 바로 뒤로 구성
  닫기 버튼의 마크업 위치는 레이어의 가장 마지막으로 위치해야함
  (닫기 버튼이 두 개 이상일 경우 한 버튼만 레이어의 가장 마지막으로 위치하면 됨)
-->
<div id="menu1_layer" class="layer">
  <a href="#">메뉴1-1</a>
  <a href="#">메뉴1-2</a>
  <button type="button" title="메뉴1 레이어 닫기">닫기</button>
</div>
<a href="#" id="menu2">메뉴2</a>
<a href="#" id="menu3">메뉴3</a>
</div>
Script
// 메뉴1이 클릭 될 때 메뉴1의 레이어를 토글합니다.
document.getElementById("menu1").onclick = function() {
var layerEl = document.getElementById("menu1_layer");
layerEl.style.display = layerEl.style.display == 'block' ? 'none' : 'block';
return false;
};
// 메뉴1 레이어의 닫기 버튼 클릭 시 메뉴1 레이어를 숨깁니다.
document.getElementById("menu1_layer").getElementsByTagName("button")[0].onclick = function() {
document.getElementById("menu1_layer").style.display = 'none';
};

닫기 버튼이 없는 레이어가 표시된 상태에서의 올바른 키보드 동작 (레이어를 호출 버튼 바로 뒤에 위치시킬 수 없는 경우)

설명
레이어를 호출 버튼 바로 뒤에 위치하지 않고 떨어져 있는 경우 자바스크립트를 이용하여 레이어가 호출 버튼 바로 뒤에 있는 것처럼 키보드 포커스가 이동되도록 구성
[테스트 페이지]
HTML
<div id="menu" class="menu">
<a href="#" id="menu1">메뉴1</a>
<a href="#" id="menu2">메뉴2</a>
<a href="#" id="menu3">메뉴3</a>
</div>
<div id="menu1_layer" class="layer">
<a href="#">메뉴1-1</a>
<a href="#">메뉴1-2</a>
</div>
Script
// 메뉴1이 클릭 될 때 메뉴1의 레이어를 토글합니다.
// 레이어가 보여질 경우 레이어의 첫번째 포커스 가능 요소로 포커스를 이동시킵니다.
document.getElementById("menu1").onclick = function() {
var layerEl = document.getElementById("menu1_layer");
if (layerEl.style.display == "block") {
  layerEl.style.display = "none";
} else {
  layerEl.style.display = "block";
  document.getElementById("menu1_layer").getElementsByTagName("a")[0].focus();
};
return false;
};
// 메뉴1 레이어의 마지막 요소에서 탭 키를 이용하여 다음 요소로 포커스 이동 시도 시 메뉴1 레이어 숨기기
// 이 때 메뉴2로 키보드 포커스를 이동시킴
var menu1LayerLastEl = document.getElementById("menu1_layer").getElementsByTagName("a")[1];
menu1LayerLastEl.onkeydown = function(e) {
var TAB_KEY = 9;
if (e.keyCode == TAB_KEY) {
  var layerEl = document.getElementById("menu1_layer");
  layerEl.style.display = 'none'
  document.getElementById("menu2").focus();
  return false;
};
};

닫기 버튼이 있는 레이어가 표시된 상태에서의 올바른 키보드 동작 (레이어를 호출 버튼 바로 뒤에 위치시킬 수 없는 경우)

설명
레이어를 호출 버튼 바로 뒤에 위치하지 않고 떨어져 있는 경우 자바스크립트를 이용하여 레이어가 호출 버튼 바로 뒤에 있는 것처럼 키보드 포커스가 이동되도록 구성
[테스트 페이지]
HTML
<div id="menu" class="menu">
<a href="#" id="menu1">메뉴1</a>
<a href="#" id="menu2">메뉴2</a>
<a href="#" id="menu3">메뉴3</a>
</div>
<div id="menu1_layer" class="layer">
<a href="#">메뉴1-1</a>
<a href="#">메뉴1-2</a>
<button type="button" title="메뉴1 레이어 닫기">닫기</button>
</div>
Script
// 메뉴1이 클릭 될 때 메뉴1의 레이어를 토글합니다.
// 레이어가 보여질 경우 레이어의 첫번째 포커스 가능 요소로 포커스를 이동시킵니다.
document.getElementById("menu1").onclick = function() {
var layerEl = document.getElementById("menu1_layer");
if (layerEl.style.display == "block") {
  layerEl.style.display = "none";
} else {
  layerEl.style.display = "block";
  document.getElementById("menu1_layer").getElementsByTagName("a")[0].focus();
};
return false;
};
// 메뉴1 레이어의 닫기 버튼 클릭 시 메뉴1 레이어를 숨깁니다.
// 이 때 키보드 포커스를 메뉴1 호출 버튼으로 돌려줍니다.
document.getElementById("menu1_layer").getElementsByTagName("button")[0].onclick = function() {
document.getElementById("menu1_layer").style.display = 'none';
document.getElementById("menu1").focus();
};

키보드 동작 키

입력 서식

선택 목록
탭 키로 포커스, 방향키로 목록 선택
체크박스
탭 키로 포커스, 스페이스 바로 선택/해제
라디오버튼
탭 키로 포커스, 스페이스 바와 방향키로 선택/해제

동영상 플레이어

컨트롤 버튼
탭 키로 포커스, 엔터 또는 스페이스 바로 실행
재생 막대
왼쪽/오른쪽 방향키로 조절
볼륨 막대
위, 아래 방향키로 조절