속성 · 관계 · 전역
aria-owns
DOM 구조로는 표현할 수 없는 부모-자식 관계를 만들어, 다른 곳에 있는 요소를 이 요소의 자식으로 접근성 트리에 넣습니다.
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 관계
- 값 형식
- ID 참조 목록 (ID reference list)
- 기본값
없음- 적용 범위
- 모든 요소 (전역 속성)
- HTML 대체
- DOM 구조 자체 (자식 요소를 실제로 안에 넣는 것이 기본 방법입니다)
설명
aria-owns는 DOM에서 떨어져 있는 요소를 이 요소의 자식인 것처럼 접근성 트리를 재구성합니다. 예를 들어 레이어 팝업을 <body> 끝에 렌더링하는 "포털" 구조에서, 메뉴 버튼 옆 그룹이 그 팝업을 논리적으로 포함한다고 알리고 싶을 때 씁니다. 값은 공백으로 구분한 ID 목록입니다.
명세 규칙은 다음과 같습니다. DOM 자식과 aria-owns 대상이 함께 있으면 DOM 자식이 먼저, 그다음 aria-owns에 적은 순서대로 자식이 됩니다. 한 요소는 동시에 두 요소 이상에게 소유될 수 없고, 자기 조상을 소유하는 순환 관계도 만들면 안 됩니다. 그리고 DOM으로 관계를 표현할 수 있다면 aria-owns를 쓰지 말라고 명시합니다.
aria-controls와 혼동하기 쉽습니다. aria-controls는 "저 요소를 조작한다"는 관계만 추가하고 트리 구조는 그대로 두지만, aria-owns는 트리 구조 자체를 바꿉니다. 이 때문에 잘못 쓰면 대상 요소가 원래 위치에서 사라진 것처럼 읽히거나, 포커스 순서(DOM 순서)와 읽기 순서가 어긋납니다. ARIA 1.0 시절 콤보박스 패턴에서 쓰였지만 ARIA 1.2 콤보박스 패턴은 aria-controls를 사용합니다.
브라우저 구현에도 차이가 있습니다. Chrome·Firefox는 대체로 재배치를 반영하지만 Safari(WebKit)와 VoiceOver 조합에서는 결과가 다를 수 있습니다. 가능한 한 DOM 구조를 직접 맞추는 것(팝업을 트리거 근처에 렌더링)이 가장 확실합니다.
검수할 때는 개발자 도구의 접근성 트리에서 대상 요소가 의도한 부모 아래로 옮겨졌는지, 다른 요소에도 같은 ID가 소유되어 있지 않은지, 키보드 Tab 순서와 화면낭독기 읽기 순서가 크게 어긋나지 않는지 확인합니다.
값
| 값 | 의미 |
|---|---|
<ID 목록> | 이 요소의 자식으로 취급할 요소들의 ID입니다. 적은 순서대로 DOM 자식 뒤에 붙습니다. |
사용 예
포털로 렌더링된 하위 트리 연결
<ul role="tree" aria-label="폴더">
<li role="treeitem" aria-expanded="true" aria-owns="sub-docs">문서</li>
</ul>
<!-- 렌더링 구조상 다른 곳에 있는 하위 그룹 -->
<ul role="group" id="sub-docs">
<li role="treeitem">보고서.hwp</li>
</ul>가능하면 하위 그룹을 treeitem 안에 직접 넣는 편이 더 안전합니다.
자식 순서 지정하기
<!-- DOM 자식(A) 다음에 C, B 순서로 자식이 됩니다 -->
<div role="list" aria-owns="item-c item-b">
<div role="listitem" id="item-a">A</div>
</div>
<div role="listitem" id="item-b">B</div>
<div role="listitem" id="item-c">C</div>한 요소를 두 부모가 소유
<!-- 비권장: item-1이 두 요소에 동시에 소유됨 (명세 위반) -->
<div role="list" aria-owns="item-1"></div>
<div role="list" aria-owns="item-1"></div>
<div role="listitem" id="item-1">항목</div>DOM 구조로 표현할 수 있는데 aria-owns 사용
<!-- 비권장 -->
<ul aria-owns="li-1"></ul>
<li id="li-1">항목</li>
<!-- 권장 -->
<ul><li>항목</li></ul>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 소유 관계로 연결된 트리 항목을 펼침 | 문서, 트리 보기 항목, 확장됨, 1/1, 수준 1 |
| 아래 방향키로 하위 항목 이동 | 보고서.hwp, 1/1, 수준 2 (소유 관계가 반영된 경우) |
사용 지침
이렇게 쓰세요
- 먼저 DOM 구조를 바꿀 수 있는지 검토하고, 불가능할 때만 씁니다.
- 한 요소는 한 부모만 소유하도록 관리합니다.
- 소유된 요소의 키보드 포커스 순서가 읽기 순서와 크게 어긋나지 않게 배치합니다.
이렇게 쓰지 마세요
- 단순히 "이 버튼이 저 패널을 연다"는 관계에 쓰지 않습니다. 그때는
aria-controls를 씁니다. - 자기 조상 요소를 소유하는 순환 관계를 만들지 않습니다.
- 같은 ID를 여러 요소의
aria-owns에 넣지 않습니다.
사용할 수 있는 역할
전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.