HTML title 전역 특성: 추가 도움말 제공

HTML title 전역 특성은 요소에 대한 추가 도움말을 제공합니다.

<iframe src="https://www.w3.org/WAI/WCAG21/Techniques/html/H65"
        title="Techniques for WCAG 2.1: title 특성으로 input 요소 설명하기">
</iframe>

title 특성의 내용은 보통 마우스를 올리면 나타나는 툴팁의 형태로 표현되며, <iframe>의 접근성 레이블을 추가할 때도 사용합니다.

<abbr>과 <link>에서는 title이 추가 도움말 외의 다른 의미를 가집니다. 각 문서에서 자세한 내용을 알아보세요.

예제

여러 줄의 title

title 특성이 한 줄이어야 할 필요는 없으며, 값에 포함된 U+000A LINE FEED (LF) 문자로 줄을 바꿀 수 있습니다. 반대로 말하면 title 특성 값을 입력할 때 주의를 기울여야 하는 이유기도 한데, 다음 예제에서의 title은 줄바꿈을 의도하지 않았더라도 두 줄로 나타나기 때문입니다.

<p><code>title</code> 값의 줄바꿈 문자를 주의하세요. <span class="example" title="줄바꿈을 정말
의도한 걸까요?">이 예제처럼요.</span>

.example {
  text-decoration: dotted underline;
}

title 상속

title 특성을 명시하지 않은 요소는 부모 노드의 title을 상속합니다. 그리고 title에 빈 문자열을 명시하면 부모의 특성을 상속하지 않고, 툴팁도 보이지 않겠다는 의미입니다.

<div title="title 상속 예제입니다.">
  <p>이 문단에 마우스를 올리면 도움말이 나타납니다.</p>
  <p title="">하지만 이 문단에는 마우스를 올려도 도움말이 나타나지 않습니다.</p>
</div>

접근성 고려사항

일관적이지 못한 브라우저 및 접근성 도구 지원으로 인해, title 특성은 다음 유형의 사용자들에게 문제가 될 수 있습니다.

• 터치 전용 장치 사용자
• 키보드로만 탐색하는 사용자
• 스크린 리더와 돋보기 등 보조 기술을 사용해 탐색하는 사용자
• 운동조절 장애를 겪는 사용자
• 인지력이 저하된 사용자

툴팁 효과가 필요하면 위 사용자들에게도 문제가 없을 기법을 대신 사용하는 편이 좋습니다.

명세

HTML Living Standard

브라우저 호환성