정의 및 사용 방법

role 속성의 note 값은 웹 접근성 측면에서 해당 HTML 요소에
'페이지나 문서의 작성자가 제공하는 콘텐츠 단위로, 메인 콘텐츠의 일반적인 흐름(normal flow) 내에서 사용되는 추가 정보나 참고 사항 등의 노트(note)'라는 의미(semantic meaning)의 역할(role)을 부여합니다.

메인 콘텐츠 중간 중간에 나오는 콘텐츠에 대한 '참고하세요!', '주의 사항', '팁 박스(Tip Box)'처럼 작성자가 추가 정보를 제공하는 콘텐츠 단위에 사용될 수 있습니다.

특징

  • note 값은 페이지나 문서의 작성자가 제공하는 콘텐츠 단위에 사용됩니다.
  • 하지만, 페이지나 문서의 작성자의 의견이나 제안을 전달하는 용도로는 사용되지 않습니다. 이러한 목적을 위해서 comment와 suggestion 값이 더 적절합니다.
  • 메인 콘텐츠의 일반적인 흐름(normal flow) 내에서 사용되는 추가 정보나 참고 사항을 담고 있는 노트(note)입니다. 반면에 메인 콘텐츠는 아니지만, 메인 콘텐츠를 보완(complementary)하는 별도의 "부가 콘텐츠"에는 complementary 값이 더 적절합니다.
  • 의미론적 측면에서 이미 있는 HTML 요소가 있다면 note 값을 사용하기 보다는 해당 HTML 요소를 사용하는 것이 바람직합니다.

기본 예제

다음의 예제를 통해서 role 속성의 note 값이 어떻게 사용되는지 확인해 보세요.

메인 글을 쭉 읽어 내려가는 자연스러운 흐름(normal flow) 안에서 문서의 작성자가 제공하는 부가적인 팁이나 참고 사항을 짚어줄 때 사용한 예제입니다.

HTML 
<h1>모든 사람을 위한 코딩 학습서</h1>
<p>기술적으로 신뢰할 수 있고, 이해하기 쉬운 정보를 제공하기 위해서 항상 노력합니다.</p>
...
<h2>HTML</h2>
...
<p>웹 페이지를 만들기 위한 가장 기본적인 언어로써 웹 개발을 배우는 데 필수적인 언어입니다.</p>
<p role="note">
    <strong>참고하세요!</strong>
    <br>
    모든 사람을 위한 코딩 학습서는 최신 HTML5 표준안을 따릅니다.
</p>
<p>.. 1989년에 HTML이 발명된 이후로 지금까지 HTML은 꾸준히 업데이트되고 있습니다.</p>
HTML 
<p>... 테스트로 진행한 실험 결과는 다음과 같습니다.</p>
...
<div role="note">
    <p>이 페이지가 게시된 시점에는 모든 결과가 정확했습니다.</p>
    <p>테스트 결과는 사용 환경에 따라 달라질 수 있습니다.</p>
</div>
...
<p>...</p>

명세서

role 속성의 note 값에 대한 명세서 사양
명세서 사양
role="note" Accessible Rich Internet Applications (WAI-ARIA)
#note

참고문헌

같이 보기