6.4.2 제목 제공

요구 사항

제목은 간단명료해야 하며 해당 페이지, 프레임, 콘텐츠 블록의 내용을 유추할 수 있어야 합니다.

• 웹 페이지 제목(title): 모든 페이지에 내용을 간단명료하게 설명하는, 페이지마다 서로 다른 제목을 제공합니다.
• 팝업창 제목: 팝업창에도 제목을 제공합니다.
• 프레임 제목: 모든 프레임(iframe)에 간단명료한 제목을 제공합니다. 내용이 없는 프레임에도 ‘빈 프레임’ 같은 제목을 줍니다.
• 콘텐츠 블록 제목: 콘텐츠 블록에는 적절한 제목(heading)을 제공합니다. 단, 본문이 없는 블록에는 제목을 붙이지 않습니다.
• 특수 기호 사용 제한: 제목에 불필요한 특수 기호를 반복해 쓰지 않습니다.

왜 필요한가요

화면낭독기 사용자는 여러 창이 열려 있을 때 페이지 제목으로 창을 구분하고, 제목(heading) 목록으로 원하는 콘텐츠 블록에 바로 이동합니다. 프레임 제목이 없으면 프레임 안에 무엇이 있는지 들어가 보기 전에는 알 수 없습니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 지적장애가 있는 사용자
• 중증 지체장애인
• 여러 탭을 오가는 모든 사용자

적용 방법

<title>은 “현재 페이지 - 상위 메뉴 - 사이트 이름” 순으로 쓰고, 단일 페이지 앱은 화면이 바뀔 때마다 document.title을 갱신합니다. 콘텐츠 블록은 h1~h6로 계층에 맞게 제목을 붙입니다(랜드마크·제목 가이드).

<head>
  <title>공지사항 상세 - 알림마당 - 한빛시청</title>
</head>
<body>
  <main>
    <h1>공지사항</h1>
    <h2>시스템 점검 안내</h2>
    …
  </main>
  <iframe src="map.html" title="시청 찾아오는 길 지도"></iframe>
</body>

// SPA: 화면 전환 시 제목 갱신
router.afterEach((to) => { document.title = to.meta.title + ' - 한빛시청'; });

사례

<title>회원가입 1단계: 약관 동의 - 한빛몰</title>

<title>★★★ 한빛몰 ★★★</title>

<iframe src="https://www.youtube.com/embed/abc"></iframe>

자주 하는 실수

• 모든 페이지의 title이 사이트 이름으로 같습니다.
• iframe에 title이 없거나 “iframe” 같은 의미 없는 값입니다.
• 시각적으로는 제목이지만 p·div에 굵은 글씨로만 표현합니다.
• 본문이 없는 영역에 제목만 있거나, 제목 계층이 의미 없이 건너뜁니다.
• 팝업창에 제목이 없습니다.

검사 방법

• 각 페이지의 title이 내용을 설명하고 페이지마다 다른지 확인합니다(SPA는 화면 전환 후에도 확인).
• 모든 iframe에 적절한 title이 있는지 확인합니다.
• 화면낭독기의 제목 목록(NVDA Insert+F7)이나 H 키로 콘텐츠 블록의 제목이 제공되는지 확인합니다.
• 제목에 불필요한 특수 기호가 반복되지 않는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목