ARIA 접근성 가이드

역할 · 위젯

role="scrollbar"

어떤 영역의 내용이 얼마나 스크롤되었는지 보여 주고 조절하는 스크롤 막대입니다. 브라우저 기본 스크롤바로 충분하면 쓰지 않습니다.

심화

한눈에 보기

분류
위젯
대응 HTML
없음 (브라우저·운영체제의 기본 스크롤바가 자동으로 제공됨)
이름 정하는 방법
작성자
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

scrollbar는 스크롤 가능한 영역의 현재 위치를 범위 값으로 표현합니다. 필수 속성은 두 가지입니다.

브라우저 기본 스크롤바는 이미 접근 가능하고, 키보드 사용자는 스크롤 영역에 포커스를 두고 방향키·Page Down으로 스크롤합니다. 그래서 대부분은 이 역할이 필요 없습니다. 디자인 때문에 기본 스크롤바를 숨기고 가짜 막대를 그렸을 때, 그 막대가 실제 스크롤 위치를 나타낸다는 것을 알릴 때만 씁니다.

스크롤 영역 자체를 키보드로 쓸 수 있어야 합니다

커스텀 스크롤바를 만들 때 가장 흔한 결함은 키보드로 스크롤할 방법이 없어지는 것입니다. 스크롤 영역에 tabindex="0"과 이름(예: role="region" + aria-label)을 주어 포커스를 받게 하면 브라우저 기본 키보드 스크롤이 그대로 동작합니다. 스크롤바 막대를 별도로 포커스 가능하게 만든다면 슬라이더처럼 방향키·Home·End를 구현해야 합니다. APG에는 scrollbar 전용 패턴이 없습니다.

테스터 관점

  • 마우스 없이 내용 끝까지 스크롤할 수 있는지 확인합니다(WCAG 2.1.1 키보드).
  • aria-valuenow가 실제 스크롤 위치에 맞게 갱신되는지 확인합니다.

함께 쓰는 속성

필수 속성

aria-controlsaria-valuenow

지원 속성

aria-disabledaria-orientationaria-valuemaxaria-valueminaria-valuetext

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

키보드 동작

키보드 동작
키동작
↓(스크롤 영역 또는 포커스 가능한 스크롤바) 아래로 조금 스크롤합니다. 가로 스크롤바는 →.
↑위로 조금 스크롤합니다. 가로 스크롤바는 ←.
Page Down한 화면만큼 아래로 스크롤합니다.
Page Up한 화면만큼 위로 스크롤합니다.
Home맨 처음으로 스크롤합니다.
End맨 끝으로 스크롤합니다.

사용 예

커스텀 세로 스크롤바

HTML
<div id="log" role="region" aria-label="채팅 기록" tabindex="0" class="no-native-scrollbar">
  ...
</div>
<div role="scrollbar" aria-controls="log" aria-orientation="vertical"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
  <div class="thumb"></div>
</div>

스크롤 위치 동기화

JavaScript
log.addEventListener('scroll', function () {
  var max = log.scrollHeight - log.clientHeight;
  var pct = max ? Math.round(log.scrollTop / max * 100) : 0;
  bar.setAttribute('aria-valuenow', String(pct));
});

aria-controls 누락

비권장비권장: 필수 속성 누락
<div role="scrollbar" aria-valuenow="30"></div>
<!-- 무엇을 스크롤하는지 알 수 없습니다 -->

직접 해 보기

아래 영역에 포커스를 두고 ↓·Page Down·End로 스크롤해 보세요(마우스 휠도 됩니다). 오른쪽의 커스텀 스크롤바는 포커스를 받지 않고, 스크롤 위치에 맞춰 aria-valuenow만 갱신됩니다. 막대를 클릭해도 이동합니다.

제1조 목적 — 이 약관은 서비스 이용 조건을 정합니다.

제2조 정의 — 회원이란 약관에 동의한 사람입니다.

제3조 약관의 효력 — 게시한 날부터 효력이 생깁니다.

제4조 회원 가입 — 가입 신청서를 작성해 신청합니다.

제5조 개인정보 — 관련 법령에 따라 보호합니다.

제6조 서비스 변경 — 변경 7일 전에 알립니다.

제7조 계약 해지 — 언제든 탈퇴할 수 있습니다.

제8조 분쟁 해결 — 관할 법원은 민사소송법에 따릅니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
가상 커서로 스크롤바에 도달스크롤 막대, 세로, 40

사용 지침

이렇게 쓰세요

  • 기본 스크롤바를 숨겼다면 스크롤 영역이 키보드 포커스를 받게 합니다.
  • aria-controls와 aria-valuenow를 반드시 넣고, 스크롤할 때마다 값을 갱신합니다.

이렇게 쓰지 마세요

  • 기본 스크롤바로 충분한데 커스텀 스크롤바를 만들지 않습니다.
  • 스크롤바를 포커스 가능하게 만들고 키보드 동작을 빠뜨리지 않습니다.
sliderprogressbarregion

참고 자료