Accessibility 본문

6.1 제목 제공

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

필요성

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

  • 웹 페이지 제목

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

  • 프레임 제목

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

  • 콘텐츠 블록 제목

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

대상

모두

적용기술

웹 페이지 제목 제공

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

(권장) 프레임 제목 제공

모바일 기기별 화면 낭독 기능이, 프레임 제목을 다루는 방법이 서로 상이하여 권장사항으로 분류함

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

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

콘텐츠 블록 제목 제공

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

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

자동 검사방법

<head> 내의 <title> 요소 유무 체크

수동 검사방법
  • <head> 내의 <title> 요소 값 체크
  • <h> 요소 체크
오류수(건)
  • <title> 요소 값을 적절히 제공하지 않은 경우
  • <h> 요소를 제공하지 않은 경우

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

사례

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

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

웹 페이지 제목 제공 오류사례이미지
<head>
    <title> Daum 영화 </title>
</head>
개선방법

현재 페이지를 가장 잘 설명할 수 있는 제목 제공

<head>
    <title> 개봉예정 | Daum 영화 </title>
</head>
우수사례

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

웹 페이지 제목 제공 우수사례이미지
<head>
    <title> 18대 대선 홈 - 제 18대 대선 | Daum 뉴스</title>
</head>
프레임 제목 제공 사례
오류사례

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

프레임 제목 제공 오류사례이미지
<iframe ... title="netUCC100"></iframe>
개선방법

title="댓글영역"의 제공

<iframe ... title="댓글영역"></iframe>
우수사례

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

프레임 제목 제공 우수사례이미지
<iframe ... title="참여글"></iframe>