도입 스토리
"로그인 페이지에 세션 타임아웃을 추가했어요." 김개발이 자랑스럽게 말했습니다. "10분 후에 자동 로그아웃이에요."
"경고 메시지는요?"
"마지막 30초에 팝업이 뜨는데... 자동으로 닫혀요."
박멘토가 고개를 저었습니다. "스크린리더 사용자나 느리게 읽는 분들은 30초 안에 반응하기 어려울 수 있어요. 그리고 팝업이 자동으로 닫히면 내용을 읽기도 전에 사라지는 거잖아요."
"그럼 타임아웃을 없애야 하나요?"
"아니면 시간을 연장할 방법을 줘야 해요. WCAG는 세 가지 옵션 중 하나를 요구해요 — 끄거나, 늘리거나, 최소 20시간 이상으로 설정하거나."
핵심 개념 설명
시간 제한 — WCAG 2.2.1
시간 제한이 있는 경우 다음 중 하나를 제공해야 합니다.
- 끄기: 시간 제한 비활성화 옵션
- 조정하기: 기본값의 10배 이상으로 연장 가능
- 연장하기: 만료 최소 20초 전에 경고하고, 추가 시간 요청 기회 제공
<!-- 세션 만료 경고 대화상자 예시 --><div role="alertdialog" aria-modal="true" aria-labelledby="timeout-title" aria-describedby="timeout-desc"> <h2 id="timeout-title">세션 만료 예정</h2> <p id="timeout-desc"> 2분 후 자동 로그아웃됩니다. 계속 사용하시겠습니까? </p> <button id="extend-btn" onclick="extendSession()"> 세션 연장 (10분) </button> <button onclick="logout()">로그아웃</button></div>let countdown = 120; // 2분 전 경고function showTimeoutWarning() { const dialog = document.getElementById('timeout-dialog'); dialog.removeAttribute('hidden'); // 포커스를 대화상자로 이동 document.getElementById('extend-btn').focus(); // 남은 시간 안내 (스크린리더용) const announce = document.getElementById('live-region'); announce.textContent = `세션이 ${countdown}초 후 만료됩니다.`;}자동 재생 콘텐츠 — WCAG 2.2.2
5초 이상 자동 재생되는 움직이는 콘텐츠(슬라이더, 배너, 영상)는 일시 정지, 중지, 숨기기 기능을 제공해야 합니다.
<!-- 자동 슬라이더 with 제어 버튼 --><section aria-label="주요 배너"> <div class="slider" aria-live="polite"> <div class="slide" aria-label="1 / 3"> <img src="banner1.jpg" alt="봄 신상품 최대 50% 할인"> </div> </div> <div class="slider-controls"> <button id="pause-btn" aria-label="자동 슬라이드 일시 정지" onclick="toggleSlider()" > 일시 정지 </button> <button aria-label="이전 슬라이드">‹</button> <button aria-label="다음 슬라이드">›</button> </div></section>let isPlaying = true;let slideInterval;function startSlider() { slideInterval = setInterval(nextSlide, 4000);}function toggleSlider() { const btn = document.getElementById('pause-btn'); if (isPlaying) { clearInterval(slideInterval); btn.textContent = '재생'; btn.setAttribute('aria-label', '자동 슬라이드 재생'); isPlaying = false; } else { startSlider(); btn.textContent = '일시 정지'; btn.setAttribute('aria-label', '자동 슬라이드 일시 정지'); isPlaying = true; }}깜빡임과 발작 — WCAG 2.3.1
1초에 3회 이상 깜빡이는 콘텐츠는 발작을 유발할 수 있습니다. 이를 완전히 피하거나, 깜빡임 영역이 화면의 25% 미만이어야 합니다.
/* 깜빡임 애니메이션 제거 */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}prefers-reduced-motion 미디어 쿼리는 OS의 "모션 줄이기" 설정을 감지합니다. 이를 항상 적용하면 전정장애, 뇌전증 등이 있는 사용자를 보호합니다.
// JavaScript에서 모션 선호 감지const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');if (motionQuery.matches) { // 애니메이션 비활성화 document.body.classList.add('no-motion');}motionQuery.addEventListener('change', () => { document.body.classList.toggle('no-motion', motionQuery.matches);});자동 업데이트 콘텐츠
실시간으로 업데이트되는 뉴스 피드, 주가 표시 등도 일시 정지 기능이 필요합니다.
<!-- 실시간 뉴스 피드 --><section aria-label="실시간 뉴스"> <button aria-pressed="false" onclick="toggleFeed(this)" > 자동 업데이트 일시 정지 </button> <ul aria-live="polite" aria-atomic="false"> <!-- 새 뉴스가 추가될 때 스크린리더가 읽어줌 --> </ul></section>단계별 실습
따라하기: 모션 선호 설정 테스트
- macOS: 시스템 설정 → 손쉬운 사용 → 모션 → "모션 줄이기" 켜기.
- Windows: 설정 → 접근성 → 시각 효과 → "애니메이션 효과" 끄기.
- 사이트의 애니메이션이 줄어드는지 확인합니다.
변형하기: 카운트다운 타이머 개선
기존 카운트다운 타이머에 접근성을 추가합니다.
<!-- 수정 전: 시각적으로만 표시 --><div id="timer">05:00</div><!-- 수정 후: 스크린리더 지원 추가 --><div id="timer" role="timer" aria-live="off" aria-label="남은 시간 5분"> <span aria-hidden="true">05:00</span></div><!-- 1분 간격으로 스크린리더에 알림 --><div id="timer-announcement" role="status" aria-live="polite" class="sr-only"></div>function updateTimer(minutes, seconds) { const display = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; document.querySelector('#timer span').textContent = display; document.getElementById('timer').setAttribute('aria-label', `남은 시간 ${minutes}분 ${seconds}초`); // 1분 단위로만 스크린리더 알림 if (seconds === 0 && minutes > 0) { document.getElementById('timer-announcement').textContent = `남은 시간 ${minutes}분`; }}정리와 확인
핵심 내용 요약
- WCAG 2.2.1: 시간 제한 — 끄기/조정/연장 중 하나 제공
- WCAG 2.2.2: 자동 재생 5초 이상 — 일시 정지/중지/숨기기 필수
- WCAG 2.3.1: 초당 3회 이상 깜빡임 금지
prefers-reduced-motion: OS 모션 줄이기 설정 존중role="alertdialog": 세션 만료 경고 대화상자에 적합한 역할
확인 문제
문제 1. 자동 슬라이더가 WCAG 2.2.2를 준수하려면 무엇을 제공해야 하는가?
5초 이상 자동 재생되므로 일시 정지, 중지, 또는 숨기기 기능 중 하나를 제공해야 합니다.
일시 정지 버튼이 가장 일반적인 방법입니다.
문제 2. prefers-reduced-motion이 왜 중요한가?
전정장애, 뇌전증 등의 사용자는 과도한 애니메이션으로 어지럼증이나 발작을 경험할 수 있습니다.
OS에서 모션 줄이기를 설정한 사용자의 의사를 CSS/JS에서 감지하여 존중해야 합니다.
다음 챕터에서는 페이지 내비게이션과 랜드마크를 다룹니다. 스크린리더 사용자가 긴 페이지를 효율적으로 탐색하는 방법을 알아봅니다.