자동 롤링 캐러셀 배너에서 일시정지 버튼이 반드시 필요한 이유: WCAG 2.2.2 일시정지·정지·숨김

이커머스 쇼핑몰이나 대형 포털 사이트 메인 페이지의 최상단을 장식하는 대표적인 UI 컴포넌트는 단연 좌우로 부드럽게 움직이는 '자동 롤링 캐러셀(Auto-playing Carousel Slider)'입니다. 마케팅 부서는 한정된 첫 화면 공간에 수십 개의 프로모션 이벤트를 노출하기 위해 3초에서 5초 간격으로 배너가 자동으로 회전하도록 설정합니다. 그러나 웹 접근성 관점에서 자동으로 움직이는 콘텐츠는 웹사이트의 사용성을 가장 심각하게 파괴하는 주범 중 하나입니다. 글자를 천천히 읽는 고령자나 난독증 환자는 배너의 할인 조건을 채 다 읽기도 전에 다음 슬라이드로 화면이 휙 넘어가 버리는 극심한 좌절을 겪으며, 주의력 결핍 장애(ADHD)나 전정기관 질환이 있는 사용자는 화면 한구석에서 끊임없이 펄럭이는 애니메이션 때문에 본문 텍스트에 전혀 집중하지 못합니다. W3C WCAG 2.2 성공 기준 2.2.2(Pause, Stop, Hide, Level A)는 5초 이상 자동으로 시작되어 움직이는 모든 콘텐츠에 명확한 '일시정지(Pause)' 메커니즘을 제공할 것을 법적으로 의무화하고 있습니다. 이 글에서는 접근성을 보장하는 캐러셀 배너의 표준 설계법을 정리합니다.

자동 재생 슬라이더가 다양한 사용자 계층에 미치는 장벽

웹 브라우징에서 사용자의 주의(Attention)는 가장 희소한 자원입니다. 인간의 뇌는 본능적으로 시야 내에서 움직이는 물체(Motion)에 시선을 빼앗기도록 진화했기 때문에, 화면 상단의 자동 재생 배너는 사용자가 메인 내비게이션이나 검색창을 이용하는 내내 끊임없이 인지적 방해를 가합니다.

특히 보조기술을 사용하는 시각장애인에게 자동 캐러셀은 혼돈 그 자체입니다. 스크린리더로 배너 내부의 텍스트를 청취하고 있는 도중에 자바스크립트 인터벌 타이머가 발화하여 슬라이드가 다음 장으로 넘어가면, 스크린리더의 초점이 강제로 튕겨 나가거나 읽고 있던 문장이 중단되는 치명적인 포커스 유실이 발생합니다. 또한 지체 장애인 사용자가 배너의 링크를 마우스나 탭키로 클릭하려는 찰나에 슬라이드가 바뀌어 전혀 다른 엉뚱한 프로모션 페이지로 이동해 버리는 오클릭 사고도 빈발합니다.

WCAG 2.2 SC 2.2.2 (Pause, Stop, Hide)의 3대 필수 조건

W3C 성공 기준 2.2.2(A 레벨)를 충족하기 위해서는 다음 3가지 요구조건을 예외 없이 구현해야 합니다.

• 1. 5초 이상 지속되는 자동 움직임 제어: 사용자의 명시적인 요청 없이 자동으로 시작되어 5초 이상 지속되는 모든 움직임, 깜빡임, 스크롤 콘텐츠에는 사용자가 이를 멈출 수 있는 정지 수단을 제공해야 합니다.
• 2. 시각적으로 명확한 정지/재생 컨트롤 제공: 캐러셀 컴포넌트 내부나 주변에 키보드로 접근 가능한 명확한 '일시정지(Pause)' 및 '재생(Play)' 토글 버튼을 영구적으로 배치해야 합니다.
• 3. 초점 진입 시 자동 일시정지(Pause on Hover/Focus): 사용자가 마우스 커서를 배너 영역 위로 올리거나(Hover), 키보드 Tab 키로 배너 내부의 링크나 버튼으로 초점을 이동시켰을 때는 타이머가 즉각 멈추어야 합니다.

미디어 쿼리(prefers-reduced-motion) 연동을 통한 OS 설정 존중

접근성 높은 프론트엔드 엔지니어링의 정점은 사용자가 운영체제(Windows, macOS, iOS, Android) 시스템 설정에서 '동작 줄이기(Reduce Motion)' 옵션을 켰는지를 자바스크립트와 CSS로 감지하는 것입니다.

window.matchMedia('(prefers-reduced-motion: reduce)').matches 조건을 확인하여, 사용자가 동작 줄이기를 켜둔 상태라면 캐러셀이 처음 로드될 때부터 자동 재생(Autoplay)을 아예 시작하지 않고 기본 정지 상태로 초기화해야 합니다. CSS 트랜지션 역시 transition: none; 처리를 통해 슬라이드가 휙휙 날아다니지 않고 페이드 인/아웃으로 차분하게 전환되도록 구현함으로써 전정기관 장애가 있는 사용자의 어지럼증을 방지할 수 있습니다.

W3C WAI-ARIA APG 캐러셀 패턴의 완벽한 마크업

표준적인 캐러셀 컴포넌트를 구성하기 위한 시맨틱 마크업 규칙은 명확합니다.

전체 캐러셀 컨테이너에는 <section aria-roledescription='carousel' aria-label='주요 프로모션 이벤트'>를 부여합니다. 각 슬라이드 아이템에는 <div role='group' aria-roledescription='slide' aria-label='5개 중 1번째 슬라이드'>와 같이 현재 슬라이드의 순번과 전체 개수를 명확히 안내해야 합니다.

무엇보다 정지 버튼에는 현재 상태에 따라 aria-label='슬라이드 자동 롤링 일시정지' 또는 '슬라이드 자동 롤링 재생'이라는 동적 레이블을 부여하여 스크린리더 사용자가 언제든 재생 상태를 마음대로 제어할 수 있도록 보장해야 합니다.