현재 페이지 위치

Home> 나눔> 웹접근성 가이드> PC/모바일 웹 접근성 체크리스트

PC/모바일 웹 접근성 체크리스트

체크리스트 보기

7.1.2 프레임이 사용될 때 프레임의 제목이 title 속성 값에 제대로 반영이 되었는가?

장애 유형

장애 유형
전맹, 저시력
오류 설명
  • 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등은 <frame>, <iframe> 에 제공된 title속성 값을 읽어줌.
  • 프레임에 title이 없을 경우 "프레임시작, 프레임끝" 으로 읽어주며 어떤 프레임인지 알 수 없기 때문에 시각장애환경에서 웹페이지 사용에 어려움이 있음.
  • 개발 필요에 의해 쓰인 프레임이라도 '빈프레임', '내용없음' 등으로 제공하여 빠르게 스킵할 수 있도록 해야함.

오류 유형

<iframe> 엘리먼트에 title 속성/속성값이 없거나 내용이 부적절한 경우

오류 예시
<iframe> 엘리먼트에 title 속성이 없거나 속성값이 없음
참고 이미지
title 속성이 없는 경우
<iframe id="loginframe" name="" src="" width="350" height="168" frameborder="0" scrolling="no"></iframe>
title 속성은 제공하나 title 속성값이 없는 경우
<iframe id="loginframe" name="" src="" width="350" height="168" frameborder="0" scrolling="no" title=""></iframe>
해결 방법
프레임 제목은 프레임내에 포함된 콘텐츠를 유추할 수 있는 간결한 제목을 제공해야 함.
ex) "메인메뉴", "참고문서", "빈프레임", "내용없음" 등은 적절
"top프레임", "메인프레임", " " 등은 부적절

동적으로 <iframe> 제공시 title 속성을 제공하지 않은 경우

오류 예시
Javascript로 제공하는 <iframe>엘리먼트에 title 속성이 없거나 속성값이 없음
참고 이미지
동적으로 제공되는iframe에title이 없는 예
해결 방법
Javascript로 iframe을 제공시에도 iframe에 포함된 콘텐츠를 유추할 수 있는 간결한 title을 제공해야 함.

모바일 환경에서 <iframe> 엘리먼트에 title 속성/속성값이 없거나 내용이 부적절한 경우

오류 예시
<iframe> 엘리먼트에 title 속성/속성값이 없거나 내용이 부적절한 경우
참고 이미지
해결 방법
프레임 제목은 프레임내에 포함된 콘텐츠를 유추할 수 있는 간결한 제목을 제공해야 함.
ex) "메인메뉴", "참고문서", "빈프레임", "내용없음" 등은 적절
"top프레임", "메인프레임", " " 등은 부적절

바른 예시

프레임 제목을 title로 제공하고 있음.

참고 이미지

주의 사항

  • 기능이나 내용이 없는 프레임에도 "빈프레임", "내용없음" 등의 title을 넣어주어야 함

평가 방법

<frame>, <iframe>에 title속성/ 속성값이 존재하는 지 확인

평가 도구
N-WAX
평가 방법
'7.1.2 프레임 사용' 항목에서 <frame>, <iframe>의 title 속성값을 확인
[Case.1] title이 선언된 경우, 하얀색 셀로 표시되며 <frame>, <iframe> 경로(src)와 title 속성값이 출력됨. 출력된 속성값이 적절한지 평가.
[Case.2] title이 선언되지 않은 경우, 빨간색 셀로 표시되며 오류 처리

모바일 환경에서 <frame>, <iframe>에 title속성/ 속성값이 존재하는 지 확인

평가 도구
User Agent Switcher(파이어폭스 부가기능), N-WAX
평가 방법
Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX를 활용해 PC환경에서의 평가와 동일하게 진행함

평가 도구 전체 설치 방법