ARIA 접근성 가이드

역할 · 라이브 리전

role="marquee"

주식 시세, 흐르는 광고처럼 자주 바뀌지만 중요하지 않은 정보를 담는 라이브 리전입니다. 기본적으로 자동 낭독하지 않습니다.

심화

한눈에 보기

분류
라이브 리전
대응 HTML
없음
이름 정하는 방법
작성자 (author)
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

marquee는 필수적이지 않은 정보가 자주 바뀌는 영역입니다. 주식·환율 시세판, 회전하는 광고 문구, 뉴스 속보 흐름 등이 예입니다. log와 달리 내용 변화에 의미 있는 순서가 없습니다.

암묵적 속성과 이름

marquee의 암묵적 aria-live 값은 off입니다. 내용이 바뀌어도 화면낭독기가 자동으로 읽지 않고, 사용자가 그 영역으로 이동했을 때 읽습니다. 이름이 필수이므로 aria-label이나 aria-labelledby로 “환율 시세”처럼 이름을 줍니다.

움직임 제어 (WCAG 2.2.2)

5초 넘게 자동으로 움직이거나 바뀌는 정보에는 일시 정지·정지·숨기기 수단을 반드시 제공해야 합니다. 또 사용자가 prefers-reduced-motion을 설정했다면 흐르는 애니메이션을 멈추는 것이 좋습니다. 사용 중단된 HTML <marquee> 요소는 쓰지 않습니다.

지원 참고

marquee 역할을 따로 안내하는 화면낭독기는 많지 않습니다. 이름과 정지 버튼을 제공하는 것이 실제 사용성에 더 중요합니다.

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

정지 버튼이 있는 시세판

권장HTML
<div role="marquee" aria-label="오늘의 환율">
  <span>USD 1,380원</span> <span>JPY 9.2원</span> <span>EUR 1,490원</span>
</div>
<button type="button" aria-pressed="false">흐름 멈추기</button>

HTML marquee 요소 (비권장)

비권장HTML
<marquee>오늘의 환율 USD 1,380원</marquee>

사용 중단된 요소이며 정지 수단도 없습니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
영역으로 이동해 읽기오늘의 환율, USD 1,380원 JPY 9.2원 EUR 1,490원

사용 지침

이렇게 쓰세요

  • 이름을 반드시 붙입니다.
  • 자동으로 움직이는 내용에는 정지 수단을 제공합니다.

이렇게 쓰지 마세요

  • 중요한 정보를 marquee에만 두지 않습니다.
  • aria-live="assertive"로 바꿔 계속 낭독되게 하지 않습니다.
logtimerstatus

이 역할을 쓰는 패턴

캐러셀(슬라이드)

참고 자료