title 전역 특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.
<p>
Use the <code>title</code> attribute on an <code>iframe</code> to clearly
identify the content of the <code>iframe</code> to screen readers.
</p>
<iframe
title="Wikipedia page for the HTML language"
src="https://en.m.wikipedia.org/wiki/HTML"></iframe>
<iframe
title="Wikipedia page for the CSS language"
src="https://en.m.wikipedia.org/wiki/CSS"></iframe>
iframe {
height: 200px;
margin-bottom: 24px;
width: 100%;
}
다음과 같은 경우 많이 쓰입니다.
- 보조 기술을 위해
<iframe>요소에 이름 붙이기 - 진짜
<label>을 표시하지 못할 때에 대비해<input>요소에 프로그래밍을 통한 레이블 추가하기 <table>요소 컨트롤에 레이블 추가하기
<link>, <abbr>, <input>, <menuitem> 요소의 title 특성은 추가적인 뜻을 가지고 있습니다..
여러 줄의 제목
title 특성은 여러 줄을 가질 수 있으며, 모든 U+000A LINE FEED (LF) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.
HTML
<p>
<code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다. 이
<abbr
title="This is a
multiline title"
>예제</abbr
>처럼요.
</p>
특성 상속
요소가 title 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.
title에 빈 문자열을 지정한 경우 조상의 title이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.
HTML
<div title="CoolTip">
<p>여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.</p>
<p title="">하지만 여기에서는 나타나지 않죠.</p>
</div>
접근성 고려사항
title 특성은 다음과 같은 경우에 문제가 많습니다.
- 터치 전용 장치 사용자
- 키보드로 탐색하는 사용자
- 스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자
- 섬세한 운동조절이 힘든 사용자
- 인지력 문제를 가진 사용자
일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, 위에 해당하는 사용자도 접근하기 좋은 다른 기법을 사용하는 것이 좋습니다.
- 3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
- Using the HTML title attribute – updated | The Paciello Group
- Tooltips & Toggletips - Inclusive Components
- The Trials and Tribulations of the Title Attribute - 24 Accessibility
같이 보기
- All global attributes.
HTMLElement.titlethat reflects this attribute.