ARIA 접근성 가이드

역할 · 문서 구조

role="toolbar"

자주 쓰는 버튼·컨트롤을 한 줄로 모은 도구 모음입니다. Tab으로 한 번에 들어가고 화살표 키로 항목을 옮깁니다.

중급

한눈에 보기

분류
문서 구조
대응 HTML
없음
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

toolbar는 글자 서식(굵게·기울임·밑줄), 정렬, 확대·축소처럼 자주 쓰는 기능 버튼을 압축해 모아 둔 컨테이너입니다. 대응 HTML 요소는 없습니다. group의 하위 역할이며 흔히 menubar의 일부 기능을 빠르게 쓰게 하는 용도입니다.

키보드: 하나의 탭 정지

APG 도구 모음 패턴은 toolbar 전체를 Tab 순서에서 한 칸으로 만듭니다. Tab으로 들어오면 하나의 항목에 포커스가 가고, 그 안에서는 화살표로 이동합니다. 구현은 보통 로빙 tabindex(현재 항목만 tabindex="0", 나머지는 -1)로 하거나, toolbar에 포커스를 두고 aria-activedescendant로 현재 항목을 가리킵니다. 다시 들어오면 마지막으로 포커스했던 항목으로 돌아가는 것이 좋습니다.

이름과 방향

  • toolbar가 둘 이상이면 이름이 필수입니다(명세의 MUST). 하나여도 aria-label(예: “글자 서식”)을 주면 도움이 됩니다.
  • 기본 방향은 가로(horizontal)이며, 세로로 배치하면 aria-orientation="vertical"을 주고 위·아래 화살표로 이동합니다.

주의할 점

  • 토글 버튼은 aria-pressed로 눌림 상태를 알립니다.
  • 컨트롤이 3개 이상일 때 toolbar가 의미가 있습니다. 버튼 두 개는 그냥 두는 편이 낫습니다.
  • 도구 모음 안에 텍스트 입력란이나 좌우 화살표를 쓰는 컨트롤(슬라이더, 스핀 버튼)이 있으면 그 컨트롤의 화살표 동작과 충돌하지 않게 설계합니다. APG는 그런 컨트롤은 가능하면 마지막에 두라고 권장합니다.
  • 비활성 항목도 화살표 이동 대상에 포함하면 사용자가 기능의 존재를 알 수 있습니다(APG 권장 사항).

테스터 관점

Tab 한 번으로 도구 모음에 들어가고 한 번 더 누르면 밖으로 나가는지, 안에서 화살표로 이동되는지, 토글 상태가 들리는지 확인합니다. 모든 버튼이 Tab 순서에 있다면 패턴 미준수입니다(접근성 위반은 아니지만 비효율적).

함께 쓰는 속성

지원 속성

aria-orientationaria-activedescendantaria-disabled

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

키보드 동작

키보드 동작
키동작
Tab도구 모음으로 들어가 현재(또는 마지막) 항목에 포커스합니다. 한 번 더 누르면 도구 모음 다음 요소로 나갑니다.
→다음 항목으로 이동합니다(가로). 끝에서 처음으로 돌아갈 수 있습니다(선택).
←이전 항목으로 이동합니다(가로).
Home(선택) 첫 항목으로 이동합니다.
End(선택) 마지막 항목으로 이동합니다.

사용 예

로빙 tabindex 도구 모음

권장HTML
<div role="toolbar" aria-label="글자 서식" aria-controls="editor">
  <button type="button" aria-pressed="false" tabindex="0">굵게</button>
  <button type="button" aria-pressed="false" tabindex="-1">기울임</button>
  <button type="button" aria-pressed="false" tabindex="-1">밑줄</button>
</div>

화살표 이동

JavaScript
toolbar.addEventListener('keydown', (e) => {
  const items = [...toolbar.querySelectorAll('button')];
  let i = items.indexOf(document.activeElement);
  if (e.key === 'ArrowRight') i = (i + 1) % items.length;
  else if (e.key === 'ArrowLeft') i = (i - 1 + items.length) % items.length;
  else if (e.key === 'Home') i = 0;
  else if (e.key === 'End') i = items.length - 1;
  else return;
  e.preventDefault();
  items.forEach((b, k) => b.tabIndex = k === i ? 0 : -1);
  items[i].focus();
});

이름 없는 도구 모음 여러 개 (비권장)

비권장HTML
<div role="toolbar">…</div>
<div role="toolbar">…</div>

도구 모음이 둘 이상이면 각각 이름이 필수입니다.

직접 해 보기

Tab으로 도구 모음에 들어간 뒤 ←/→, Home/End로 이동하고 Space·Enter로 서식을 켜 보세요. 실시간 코드에서 tabindex와 aria-pressed가 바뀝니다.

미리 보기: 도서관은 매주 월요일 휴관합니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
Tab으로 도구 모음 진입글자 서식, 도구 모음, 굵게, 전환 버튼, 눌리지 않음
→ 키기울임, 전환 버튼, 눌리지 않음
Space로 켜기눌림

사용 지침

이렇게 쓰세요

  • 도구 모음 전체를 하나의 Tab 정지로 만들고 화살표로 이동하게 합니다.
  • 도구 모음이 여러 개면 각각 이름을 붙입니다.
  • 토글 버튼에 aria-pressed를 씁니다.

이렇게 쓰지 마세요

  • 버튼 한두 개를 toolbar로 감싸지 않습니다.
  • 화살표 키를 쓰는 입력 컨트롤을 중간에 두어 이동과 충돌시키지 않습니다.
groupmenubarbuttonseparatorradiogroup

이 역할을 쓰는 패턴

버튼과 토글 버튼

참고 자료