WCAG 2.2 · 2. 운용의 용이성 · 2.2 충분한 시간
2.2.1 시간 조절 가능
Timing Adjustable
콘텐츠에 시간 제한이 있으면 사용자가 끄거나, 늘리거나, 연장할 수 있어야 합니다.
수준 AWCAG 2.0
한눈에 보기
- 성공 기준
- 2.2.1 시간 조절 가능
- 수준
- 수준 A
- 원칙
- 2. 운용의 용이성
- 지침
- 2.2 충분한 시간
- 도입
- WCAG 2.0
요구 사항
콘텐츠가 설정한 각 시간 제한에 대해 다음 중 하나 이상을 만족해야 합니다.
- 끄기: 시간 제한이 시작되기 전에 끌 수 있습니다.
- 조정: 기본 시간의 10배 이상까지 넓은 범위에서 조정할 수 있습니다.
- 연장: 시간이 끝나기 전에 경고하고 최소 20초의 여유를 주며, 키 하나 누르기 같은 간단한 동작으로 연장할 수 있고, 최소 10번 이상 연장할 수 있습니다.
- 실시간 예외: 경매처럼 실시간 이벤트의 필수 요소이고 대안이 없는 경우.
- 필수 예외: 시간 제한이 필수이고 연장하면 활동이 무효가 되는 경우(예: 시험).
- 20시간 예외: 시간 제한이 20시간보다 긴 경우.
왜 필요한가요
화면낭독기 사용자, 운동장애가 있는 사용자, 인지장애가 있는 사용자는 읽고 입력하는 데 시간이 더 걸립니다. 시간이 다 되어 입력한 내용이 사라지면 처음부터 다시 해야 합니다.
도움받는 사용자
- 시각장애인(화면낭독기 사용자)
- 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
- 인지·학습 장애가 있는 사용자
- 저시력 사용자(화면 확대 사용자)
- 고령자
적용 방법
- 로그인 세션 만료 전 대화상자로 남은 시간을 알리고 “연장” 버튼을 제공합니다. 경고는
alertdialog로 구현하면 화면낭독기 사용자도 알 수 있습니다. - 자동으로 넘어가는 슬라이드·퀴즈에는 시간 제한을 끄거나 늘리는 설정을 둡니다.
<div role="alertdialog" aria-modal="true" aria-labelledby="t-title" aria-describedby="t-desc">
<h2 id="t-title">로그인 시간 연장</h2>
<p id="t-desc">2분 후 자동으로 로그아웃됩니다. 로그인 상태를 유지하시겠습니까?</p>
<button type="button">연장하기</button>
<button type="button">로그아웃</button>
</div>자주 하는 실수
- 세션 만료 전에 아무 경고 없이 로그아웃시켜 입력 내용이 사라집니다.
- 연장 경고가 화면에 보이기만 하고 키보드·화면낭독기로 알 수 없습니다.
- 일정 시간 후 자동으로 다음 페이지로 넘어가고 멈출 수 없습니다.
검사 방법
- 시간 제한이 있는 기능(세션 만료, 인증번호 입력, 자동 이동)을 찾습니다.
- 시간 제한을 끄기·조정·연장할 수 있는지, 경고가 20초 이상 여유를 두고 나타나는지 확인합니다.
- 예외에 해당하는지 판단합니다.