ARIA 접근성 가이드

속성 · 위젯 상태

aria-orientation

위젯이 가로 방향인지 세로 방향인지 알려, 어떤 방향키로 조작하는지 짐작할 수 있게 합니다.

중급

한눈에 보기

구분
속성 (Property)
분류
위젯 상태
값 형식
토큰 (horizontal / vertical / undefined)
기본값
undefined (역할별 암묵적 기본값 있음)
적용 범위
특정 역할에만 사용
HTML 대체
<hr>(가로 구분선), <input type="range">(가로 슬라이더)

설명

aria-orientation은 slider, scrollbar, separator, tablist, toolbar와 이를 상속하는 listbox, menu, menubar, radiogroup, tree, treegrid의 배치 방향을 알립니다. 방향은 사용자가 어떤 방향키를 쓸지와 직결됩니다. 가로 탭 목록은 왼쪽·오른쪽 방향키로, 세로 탭 목록은 위·아래 방향키로 이동하는 것이 APG의 관례입니다.

역할마다 암묵적 기본값이 있어서, 기본값과 같은 방향이면 쓰지 않아도 됩니다. tablist, toolbar, menubar, slider, separator는 가로(horizontal), listbox, menu, tree, scrollbar는 세로(vertical)가 기본입니다. radiogroup 등은 방향이 정해져 있지 않습니다(undefined). 따라서 이 속성은 주로 기본값과 다른 방향일 때, 예를 들어 화면 왼쪽에 세로로 쌓인 탭 목록이나 세로 툴바, 세로 슬라이더(볼륨 조절)에 씁니다.

값을 바꾸면 키보드 동작도 함께 바꿔야 합니다. aria-orientation="vertical"인 탭 목록이 여전히 왼쪽·오른쪽 방향키에만 반응하면, 화면낭독기가 알린 방향과 실제 동작이 어긋납니다. 반응형 레이아웃에서 좁은 화면에서는 세로, 넓은 화면에서는 가로로 바뀌는 위젯이라면 값과 키 처리를 함께 전환하거나, 두 방향의 방향키를 모두 지원합니다.

separator의 경우, 포커스를 받아 크기를 조절하는 분할선(창 분할 막대)에서 방향이 특히 중요합니다. 세로로 선 분할선은 좌우 영역을 나누므로 aria-orientation="vertical"입니다.

테스트할 때는 위젯의 시각적 방향과 값이 일치하는지, 그 방향의 방향키로 조작되는지 확인합니다. 화면낭독기에 따라 방향을 직접 읽지 않을 수도 있지만, 일부 화면낭독기는 방향 정보를 이용해 방향키 안내를 바꿉니다.

값

값
값의미
horizontal가로 방향입니다. 보통 왼쪽·오른쪽 방향키로 조작합니다.
vertical세로 방향입니다. 보통 위·아래 방향키로 조작합니다.
undefined 기본값방향이 정해지지 않았거나 알 수 없습니다. 역할의 암묵적 기본값이 적용됩니다.

사용 예

세로 탭 목록

권장HTML
<div role="tablist" aria-label="설정" aria-orientation="vertical">
  <button type="button" role="tab" aria-selected="true" aria-controls="p-1" id="t-1">일반</button>
  <button type="button" role="tab" aria-selected="false" aria-controls="p-2" id="t-2" tabindex="-1">알림</button>
</div>

방향에 따라 방향키 고르기

JavaScript
var vertical = el.getAttribute('aria-orientation') === 'vertical';
var NEXT = vertical ? 'ArrowDown' : 'ArrowRight';
var PREV = vertical ? 'ArrowUp' : 'ArrowLeft';
el.addEventListener('keydown', function (e) {
  if (e.key === NEXT) { e.preventDefault(); focusNext(); }
  if (e.key === PREV) { e.preventDefault(); focusPrev(); }
});

세로 분할선

HTML
<div role="separator" tabindex="0" aria-orientation="vertical"
     aria-valuenow="30" aria-valuemin="10" aria-valuemax="90" aria-label="목록 패널 크기"></div>

값과 키 동작이 다른 경우 (비권장)

비권장HTML
<!-- 세로라고 알렸지만 좌우 방향키만 처리함 -->
<div role="toolbar" aria-label="정렬" aria-orientation="vertical">…</div>

직접 해 보기

툴바에 Tab으로 들어간 뒤 방향키로 이동해 보세요. 방향을 바꾸면 aria-orientation과 함께 쓸 수 있는 방향키도 바뀝니다.

툴바 방향

이동 키: 왼쪽·오른쪽 방향키

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
세로 툴바에 포커스글자 정렬, 도구 모음, 세로, 왼쪽, 토글 버튼, 눌림
세로 탭 목록의 탭에 포커스일반, 탭, 선택됨, 1/2

사용 지침

이렇게 쓰세요

  • 역할의 기본 방향과 다를 때 씁니다(세로 탭 목록, 세로 툴바, 세로 슬라이더 등).
  • 값과 방향키 동작을 항상 함께 바꿉니다.
  • 반응형으로 방향이 바뀌면 값도 함께 갱신합니다.

이렇게 쓰지 마세요

  • 기본값과 같은 방향에 습관적으로 중복해서 쓰지 않아도 됩니다.
  • 지원하지 않는 역할(버튼, 목록 항목 등)에 쓰지 않습니다.
  • 시각적 배치와 다른 값을 쓰지 않습니다.

사용할 수 있는 역할

tablisttoolbarsliderscrollbarseparatorlistboxmenumenubarradiogrouptreetreegrid
aria-valuenowaria-activedescendantaria-selected

이 속성을 쓰는 패턴

탭슬라이더리스트박스

참고 자료