역할 · 문서 구조
role="document"
화면낭독기가 읽기 모드로 탐색하기를 기대하는 콘텐츠 영역입니다. 주로 위젯·application 안의 읽을거리에 씁니다.
심화
한눈에 보기
- 분류
- 문서 구조
- 대응 HTML
- 없음
- 이름 정하는 방법
- 작성자 (author)
- 이름 필수
- 아니요
- 필수 상위 요소
- 없음
- 필수 하위 요소
- 없음
설명
document는 사용자가 읽기(브라우즈) 모드로 훑어 읽고 싶어 할 내용을 담는 요소입니다. 웹 페이지 자체(문서 루트)는 브라우저가 이미 document로 노출하므로, 작성자가 직접 쓸 일은 많지 않습니다.
언제 쓰나
명세에 따르면 document 역할이 실제로 의미 있는 경우는 application이나 위젯 안에 포커스 가능한 정적 텍스트 영역을 둘 때뿐입니다. 예를 들어 application 안의 도움말 텍스트에 role="document"와 tabindex="0"을 주면, 사용자가 Tab으로 그 영역에 갔을 때 화면낭독기가 다시 읽기 모드로 바뀌어 화살표로 한 줄씩 읽을 수 있습니다.
또 대화상자 안에 긴 글이 있을 때, 일부 화면낭독기가 대화상자 안에서 읽기 모드를 쓰지 않는 문제를 보완하려고 내용을 role="document"로 감싸는 경우가 있습니다. 최신 화면낭독기에서는 대개 필요 없습니다.
함께 쓰는 속성
전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.
사용 예
application 안의 읽을거리
<div role="application" aria-label="악보 편집기">
…
<div role="document" tabindex="0" aria-label="사용 안내">
<h2>사용 안내</h2>
<p>화살표로 음표를 옮깁니다.</p>
</div>
</div>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| document 영역에 Tab으로 포커스 | 사용 안내, 문서 (읽기 모드로 전환) |
사용 지침
이렇게 쓰세요
- application·위젯 안의 정적 텍스트를 읽을 수 있게 할 때 포커스 가능한 document로 감쌉니다.
이렇게 쓰지 마세요
- 일반 웹 페이지 본문에
role="document"를 붙이지 않습니다(의미 없는 중복).