Accessibility 본문

2.4.2 제목 제공

페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

필요성

적절한 제목은 페이지, 프레임, 콘텐츠 블록을 유추하여, 사용자가 웹 콘텐츠를 운용하기 쉽게 도와준다.

  • 웹 페이지 제목

    문서 내용을 표현하는데 사용하여야 하며, 여러 페이지간 콘텐츠 파악 용도 사용된다. 서로 다른 내용의 페이지를 동일한 제목 제공 시 문서 내용을 파악하는데 어려움이 발생한다.

  • 프레임 제목

    사용자(시각 장애인, 인지장애인, 심각한 지체장애인)는 프레임에 초점 이동시 어떠한 프레임인지 쉽게 알 수 있도록 한다.

  • 콘텐츠 블록 제목

    <h1>, <h2> 등 제목요소를 사용할 경우, 제목과 본문을 구분할 수 있으며, 제목간 이동 기능을 가능하게 한다. 또한 목차 기능으로 활용하여 문맥을 파악하는데 도움을 준다. 이 외 다양하게 활용할 수 있다.

대상

모두

적용기술

  • 웹 페이지 제목 제공

    웹 사이트의 어느 페이지와도 다른 제목이어야 하며, 제목은 웹 페이지의 내용을 적절히 표현하며 간단하고 명료하게 제공

  • 프레임 제목 제공

    모든 웹 페이지의 프레임에는 각 프레임을 설명하는 간단명료한 제목을 제공 (예: 아무런 내용이 없는 프레임이라면 "내용 없음" 등으로 제목을 제공)

    "빈 프레임" 경우 스크린 리더에서 "프레임"을 두번 읽어주는 이슈로 사용하지 않음

  • 콘텐츠 블록 제목 제공

    <h1>, <h2> 요소 등을 부여하여 제목과 본문을 구분할 수 있도록 제공 (콘텐츠 블록 : 특정내용에 관해 설명하거나 기술하고 있는 정보의 묶음 혹은 영역)

검사방법 및 QA 지표 산정방법

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
자동 검사방법
  • <head> 내의 <title> 요소 유무 체크
  • <iframe> 요소의 title 속성 유무 체크
  • <<frame> 요소의 title 속성 유무 체크
발견수(건)

<head>, <iframe>, <frame> 요소 수

준수수(건)
  • title 속성이 있는 <iframe>, <frame> 요소 수
  • <title> 요소가 있는 <head> 요소 수
수동 검사방법
  • <head> 내의 <title> 요소 값 체크
  • <iframe> 내의 <title> 요소 값 체크
  • <frame> 내의 <title> 요소 값 체크
  • <frame> 의 title 속성 값 체크
  • <iframe> 의 title 속성 값 체크
  • <h> 요소 체크
오류수(건)
  • <title> 요소 값을 적절히 제공하지 않은 경우
  • title 속성 값을 적절히 제공하지 않은 경우
  • <h> 요소를 제공하지 않은 경우

<h> 요소 값은 해당 서비스 콘텐츠 및 기획안등 콘텐츠 모두를 파악해야하는 이슈로 평가하지 않음

평가점수

((자동 준수수 / 자동 발견수) * 100) - (수동 오류수 * 5)점

사례

웹 페이지 제목 제공 사례
오류사례

적절하지 않은 웹 페이지 제목이 제공됨

제목 제공 오류사례이미지
<head>
	<title>블로그 홈 | Daum 블로그</title>
</head>
개선방법

이미지 컨텐츠를 용도와 의미에 맞게 모두 대체 텍스트로 제공

<head>
	<title>블로그스킨 | Daum 블로그</title>
</head>
우수사례

웹 페이지에 적절한 제목이 제공됨

제목 제공 우수사례이미지
<head>
	  <title>안철수 대선출마 – 실시간 토론 | Daum 아고라</title>
</head>
프레임 제목 제공 사례
오류사례

배너 내 iframe에 title값이 적용되지 않은 컨텐츠

제목 제공 오류사례이미지
<iframe...></iframe>
개선방법

title="배너영역"의 제공

<iframe...title="배너영역"></iframe>
우수사례

iframe에 적절한 title값이 적용되어 있는 컨텐츠

제목 제공 우수사례이미지
<iframe...title="댓글 영역"></iframe>