role="timer"

설명

timer는 시작 시점부터 흐른 시간이나 끝 시점까지 남은 시간을 숫자로 보여 주는 라이브 리전입니다. 시험 남은 시간, 세션 만료까지 남은 시간, 경매 마감, 스톱워치 등에 씁니다. 텍스트 내용이 현재 시간 값이며, 명세는 일시 정지나 종료 시점이 아니라면 일정한 간격으로 갱신하라고 합니다.

암묵적 속성: aria-live="off"

timer의 암묵적 aria-live 값은 off입니다. 매초 바뀌는 숫자를 계속 읽으면 다른 내용을 들을 수 없기 때문입니다. 사용자는 원할 때 timer로 이동해 현재 값을 확인합니다.

중요한 시점은 따로 알리기

“5분 남았습니다”, “1분 남았습니다”처럼 꼭 알아야 할 시점에는 별도의 status(또는 매우 급하면 alert)로 한 번만 알립니다. timer 자체에 aria-live="polite"를 주면 갱신될 때마다 읽히므로 피합니다.

시간 제한 (WCAG 2.2.1)

시간 제한이 있는 기능이라면 끝나기 전에 경고하고 연장할 수 있게 하는 등 WCAG 2.2.1(충분한 시간)을 함께 충족해야 합니다. 보이는 이름(“남은 시간”)을 aria-labelledby로 연결하면 이동했을 때 무엇의 값인지 알 수 있습니다.

함께 쓰는 속성

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

사용 예

<p><span id="t-l">자동 로그아웃까지</span>
  <span role="timer" aria-labelledby="t-l">09:59</span></p>
<div role="status" id="t-warn"></div>
<!-- 1분 남았을 때 t-warn에 "1분 후 자동 로그아웃됩니다. 연장하려면 연장 버튼을 누르세요." -->
<button type="button">시간 연장</button>

<div role="timer" aria-live="assertive">09:59</div>

직접 해 보기

시작을 누르면 타이머가 1초마다 갱신됩니다. timer는 매번 읽히지 않고, 10초 남았을 때만 상태 메시지가 한 번 알립니다.

화면낭독기에서는

사용 지침

관련 역할·패턴

이 역할을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: timer 역할 (새 창)
• WCAG 2.2.1 충분한 시간 이해 (새 창)
• MDN: ARIA 라이브 리전 (새 창)