현재 페이지 위치

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

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

체크리스트 보기

2.3.1<table><caption>이 적절하게 선언되었는가?

장애 유형

장애 유형
전맹, 저시력
오류 설명
  • 전맹, 저시력의 경우 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등을 활용하여 화면을 읽음.
  • 스크린리더나 점자정보단말기, VoiceOver, TalkBack은 <table>에 제공된 <caption>(제목)과 summary(요약정보)로 테이블의 구조를 파악함
  • 테이블은 복잡한 구조로 되어 있기 때문에 전맹, 저시력인은 caption,summary가 없으면 표의 구조를 이해하는데 매우 어려움.

오류 유형

<table><caption>이 제공되지 않았거나 summary 속성만 제공된 경우

오류 예시
<table><caption>이 없는 경우
참고 이미지

해결 방법
테이블의 제목을<caption>으로 제공해야함.<caption><table>요소 바로 다음에 선언함.
테이블의 제목이 UI상 표현하지 않아야 한다면 blind 스타일을 적용하여 감출 수 있음.
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<caption>경매관련판례 전체 목록</caption>
blind 스타일은 아래 CSS로 구현할 수 있음.
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
오류 예시
<table><caption>없이 summary만 제공된 경우
참고 이미지

해결 방법
summary는 표를 한눈에 알아보기 어려운 환경에서 표의 구조나 전체 내용을 요약하기 위한 용도임.
표의 제목은<caption>으로 반드시 제공하며, summary는 필요에 따라 선택적으로 제공.
테이블의 제목이 UI상 표현되지 않는다면 blind 스타일을 적용하여 감출 수 있음
<table width="100%" cellspacing="0" cellpadding="0" border="0"  summary="최다조회 리뷰를 순위별로 정렬하였으며 영화 제목, 리뷰 제목, 작성자, 조회수 정보를 제공합니다.">
<caption>최다조회 리뷰 목록</caption>
blind 스타일은 하단 CSS로 구현할 수 있음.
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}

<caption>이나 summary 속성에 잘못된 정보가 제공된 경우

오류 예시
국내펀드 수익률 상위펀드 테이블에 "해외펀드 수익률 상위펀드"라는<caption>이 제공됨
참고 이미지
해결 방법
"국내펀드 수익률 상위펀드"로<caption>수정하고, summary도 테이블의 요약정보로 제공해야 함.

레이아웃 테이블에<caption>혹은 summary 속성을 제공된 경우

오류 예시
레이아웃 테이블에<caption>이 제공됨
참고 이미지
해결 방법
레이아웃 테이블에 <caption>이나 summary가 제공되면 오히려 시각 장애인에게 혼란스러움을 줄 수있으므로 레이아웃 테이블에는<caption>이나 summary 속성을 제공하지 않아야 함.

모바일 환경에서<table>에 적절한 caption이 선언되지 않은 경우

오류 예시
모바일 환경에서 제공되는<table>에 caption이 제공되지 않음
참고 이미지
해결 방법
PC환경에서와 동일하게, 테이블의 제목을<caption>으로 제공해야함.<caption><table>요소 바로 다음에 선언함.
테이블의 제목이 UI상 표현하지 않아야 한다면 blind 스타일을 적용하여 감출 수 있음.
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<caption>달력</caption>
blind 스타일은 아래 CSS로 구현할 수 있음.
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}

바른 예시

표의 <caption> 과 summary의 바른 예시

<caption>의
바른 예시
표의 제목은 <caption>요소를 사용해야 함
<table>
<caption>최근 시세</caption>

summary의
바른 예시
summary에는 표의 요약, 구조나 탐색방법을 제공해 주어야 함
<table summary="이 표는 기준일에 따른 경기도 매매가와 경기도 전세가를 나타내고 있으며, 매매가와 전세가는 면적단가, 변동액을 나누어 표현하였다.">

모바일 환경에서 표의 <caption> 에 대한 바른 예시

바른 예시

주의 사항

  • 원칙적으로<caption>요소 와 summary 속성을 모두 제공해야 하며, 이중<caption>을 적절히 제공한 경우 준수한 것으로 인정.
  • <caption>요소는 표의 제목을 summary 속성에는 표의 요약, 구조나 탐색 방법을 기술해 주어야 함<caption>과 summary의 용도를 잘 못 사용한 경우 오류임.

평가 방법

  • 테이블<table>이 없는 경우 해당 없음 처리

<caption>유무 확인

평가 도구
N-WAX
평가 방법
'2.3.1 표 제목(<caption>)' 항목에서 모든 테이블에 캡션이 바르게 제공되고 있는지 확인.
[Case.1]<caption>이 있을 경우 셀이 하얀색으로 표시되며 캡션과 summary의 내용이 표시됨.
[Case.2]<caption>이 없을 경우 셀이 빨간색으로 표시되며 오류 처리.

모바일 환경에서<caption>유무 확인

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

평가 도구 전체 설치 방법