Completion 0%

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

2.3.2 <thead>,<tbody>,<tfoot>으로 그룹핑 되어 있는가? (th로 그룹핑 안될경우 <thead>생략가능, tbody만 있을 경우 <tbody>생략 가능)

장애 유형

장애 유형
비장애
오류 설명
<tbody>의 내용이 긴 경우, 브라우저에 따라 테이블 인쇄 시에 <thead><tfoot>을 매 페이지에 인쇄 가능함.

오류 유형

제목 행이 <thead>로 그룹핑 되지 않음

오류 예시
업종별/전일대비/등락그래프 셀은 제목 행으로 그룹핑이 가능하지만 <thead>로 제공되지 않고 내용과 함께 <tbody>로 제공됨
참고 이미지
해결 방법

업종별/전일대비/등락그래프 셀을 <thead>로 그룹핑

...
<thead>
  <tr>
    <th scope="col">업종별</th>
    <th scope="col">전일대비</th>
    <th scope="col">등락그래프</th>
  </tr>
</thead>
<tbody>
  ...

모바일 환경에서 제공되는 표의 제목 행이 <thead>로 그룹핑 되지 않음

오류 예시
업종별/전일대비/등락그래프 셀은 제목 행으로 그룹핑이 가능하지만 <thead>로 제공되지 않고 내용과 함께 <tbody>로 제공됨
참고 이미지
해결 방법
업종별/등락률/관련종목 셀을 <thead>로 그룹핑

바른 예시

<thead>, <tfoot>, <tbody> 바른 예시

참고 이미지
코드 예시
<table>
<caption>나간돈</caption>
<thead>
<tr>
<th scope="col">사용내역</th>
...
</tr>
</thead>
<tfoot>
<tr>
<th scope="row" id="sum">합계</th>
...
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" id="item">버스비</th>
</tbody>
</table>

주의 사항

  • 레이아웃용 테이블에 데이터 테이블 엘리먼트(caption, th, tbody, thead, tfoot)를 사용한 경우 오류로 처리함.
  • th로 그룹핑 안될경우 <thead>생략가능, tbody만 있을 경우 <tbody>생략 가능

평가 방법

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

테이블 확인 및 <thead>,<tbody>,<tfoot> 그룹핑 확인

평가 도구
N-WAX
평가 방법
2.3.2 표 구조화에서 <table> 별로 항목이 생성되는데 항목별로 <thead>,<tbody>,<tfoot>가 적절히 제공되었는지 확인
참고 이미지

모바일 환경에서 테이블 확인 및 <thead>,<tbody>,<tfoot> 그룹핑 확인

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

평가 도구 전체 설치 방법