역할 · 문서 구조
role="note"
본문에 덧붙인 참고·보충 설명 구획을 나타냅니다.
중급
한눈에 보기
- 분류
- 문서 구조
- 대응 HTML
- 없음
- 이름 정하는 방법
- 작성자 (author)
- 이름 필수
- 아니요
- 필수 상위 요소
- 없음
- 필수 하위 요소
- 없음
설명
note는 주 내용에 딸린 괄호 같은, 부가적인 내용입니다. 문서의 “참고”, “팁”, “주의” 상자 등에 쓸 수 있습니다. 대응 HTML 요소는 없습니다.
화면낭독기 지원은 제한적이어서 note를 따로 알리지 않는 경우가 많습니다. 따라서 상자 안에 “참고:”, “주의:” 같은 보이는 머리말을 두는 것이 가장 확실합니다. 상자가 꼭 바로 이동해야 할 만큼 중요하다면 이름을 붙인 <aside>(complementary)를 고려합니다. 동적으로 나타나는 알림이라면 note가 아니라 status나 alert가 맞습니다.
함께 쓰는 속성
전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.
사용 예
참고 상자
<div role="note">
<p><strong>참고:</strong> 연체 중에는 새 대출이 제한됩니다.</p>
</div>동적 메시지에 note (비권장)
<div role="note" id="msg"></div> <!-- 저장 완료 메시지를 나중에 넣음 -->내용이 바뀌어도 알려지지 않습니다. role="status"를 씁니다.
화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 참고 상자 읽기 | 참고: 연체 중에는 새 대출이 제한됩니다. |
사용 지침
이렇게 쓰세요
- 보충 설명 상자에 쓰고, 보이는 머리말(“참고:”)을 함께 둡니다.
이렇게 쓰지 마세요
- 동적으로 바뀌는 알림에 note를 쓰지 않습니다.