역할 · 문서 구조
role="separator"
내용이나 메뉴 항목 묶음을 나누는 구분선입니다. 포커스를 받으면 크기를 조절하는 분할 막대(위젯)가 됩니다.
중급HTML 요소 우선
한눈에 보기
- 분류
- 문서 구조
- 대응 HTML
<hr>- 이름 정하는 방법
- 작성자 (author)
- 이름 필수
- 아니요
- 필수 상위 요소
- 없음
- 필수 하위 요소
- 없음
설명
separator는 두 종류로 쓰입니다.
- 정적 구분선: 포커스를 받지 않는 구조 요소로, 내용 구획이나 메뉴·도구 막대 안의 항목 묶음을 시각적으로 나눕니다. HTML
<hr>이 대응합니다. - 분할 막대(window splitter): 포커스를 받을 수 있는 위젯으로, 두 영역의 상대적 크기를 키보드로 조절합니다.
포커스 가능한 separator의 필수 속성
명세는 separator가 포커스를 받을 수 있으면 aria-valuenow를 반드시 지정하고, 위치가 바뀔 때마다 갱신하도록 합니다(정적 구분선에는 필요 없음). aria-valuemin이 0이 아니거나 aria-valuemax가 100이 아니면 그 값도 줍니다. 분할 막대가 여러 개면 각각 이름을 붙이고, 보통 aria-controls로 크기가 바뀌는 주 영역을 가리킵니다.
기본 방향(aria-orientation)은 horizontal입니다. 세로로 세운 구분선(좌우 분할)은 vertical로 지정합니다.
자식이 표현용(children presentational)이므로 separator 안의 텍스트는 노출되지 않습니다.
함께 쓰는 속성
지원 속성
전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.
키보드 동작
| 키 | 동작 |
|---|---|
| ← / → | 세로 분할 막대를 왼쪽·오른쪽으로 옮깁니다. |
| ↑ / ↓ | 가로 분할 막대를 위·아래로 옮깁니다. |
| Enter | (선택) 주 영역을 접거나 이전 크기로 되돌립니다. |
| Home / End | (선택) 최소·최대 위치로 옮깁니다. |
사용 예
정적 구분선
<p>1장 내용…</p>
<hr>
<p>2장 내용…</p>메뉴 안 구분선
<ul role="menu" aria-label="편집">
<li role="menuitem">잘라내기</li>
<li role="menuitem">복사</li>
<li role="separator"></li>
<li role="menuitem">모두 선택</li>
</ul>분할 막대 위젯
<div id="toc-pane">목차…</div>
<div role="separator" tabindex="0" aria-orientation="vertical"
aria-label="목차 너비" aria-controls="toc-pane"
aria-valuenow="30" aria-valuemin="10" aria-valuemax="60"></div>
<div>본문…</div>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 정적 구분선 지나기 | 구분선 |
| 분할 막대에 포커스 | 목차 너비, 구분선, 30 |
사용 지침
이렇게 쓰세요
- 내용의 주제 전환에는
<hr>을 씁니다. - 포커스 가능한 분할 막대에는
aria-valuenow를 지정하고 갱신합니다.
이렇게 쓰지 마세요
- 단순 장식 선(CSS 테두리로 충분한 경우)에 separator를 남발하지 않습니다.
- 포커스 가능한 separator의 값을 빠뜨리지 않습니다.