Completion 0%

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

2.3.3 표의 머릿글은 <th>로 마크업 했으며 scope 속성을 제공하는가?

장애 유형

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

오류 유형

제목 셀이 <th>로 마크업 되지 않음

오류 예시
시즌, 경기, 순위, 승, 패, 승률이 제목 셀에 해당하지만 <th>로 마크업 되지 않음
참고 이미지
해결 방법

시즌, 경기, 순위, 승, 패, 승률 셀을 <th>로 마크업하고 scope 속성 선언

...
<thead>
<tr>
<th scope="col">시즌</th>
<th scope="col">경기</th>
<th scope="col">순위</th>
<th scope="col">승</th>
<th scope="col">패</th>
<th scope="col">승률</th>
</tr>
</thead>
<tbody>
...

제목 셀이 <th>로 마크업 되었으나 scope 속성이 선언되지 않음

오류 예시
산업, 제목, 증권사, 첨부, 작성일 제목 셀이 <th>로 마크업 되었으나 scope 속성이 선언되지 않음
참고 이미지
해결 방법

산업, 제목, 증권사, 첨부, 작성일 제목 셀은 해당 열을 대표하는 제목 셀이므로 scope 속성을 col로 선언

...
<th scope="col">산업</th>
<th scope="col">제목</th>
<th scope="col" class="tl">증권사</th>
<th scope="col">첨부</th>
<th scope="col">작성일</th>
...

제목 셀이 아닌 셀이 <th>로 마크업 됨

오류 예시
레이아웃 테이블에 사용된 셀이 <th>로 마크업 됨
참고 이미지
해결 방법

레이아웃 테이블에 사용된 제목 셀이 아닌 셀은 <th> 대신 <td>로 마크업 해야 함

모바일 환경에서 테이블의 제목 셀이 th로 마크업 되지 않거나 scope 속성이 제공되지 않음

오류 예시
모바일 환경에서 제공되는 표의 KOSPI200, 다우존스, 나스닥 제목 셀이 <th>로 마크업 되었으나 scope 속성이 선언되지 않음
참고 이미지
해결 방법
제목 셀은 해당 행을 대표하는 제목 셀이므로 scope 속성을 row로 선언

바른 예시

제목셀 바른 제공 예시1

참고 이미지
  • 제목셀과 내용셀을 연결하면 스크린리더에서 선택된 셀이 어떤 제목셀과 매칭되는지 알려주어 표에서 제공되는 정보를 바르게 인식할 수 있다.
  • 제목셀과 내용셀을 연결하는 방법으로 <th> 요소에 scope 속성을 선언한다.
  • 제목셀과 같은 열에 해당하는 내용셀을 연결하려면 scope 속성값을 col로 지정하고, 제목셀과 같은 행에 해당하는 내용셀을 연결하려면 scope 속성값을 row로 지정한다.
바른 코드
<table>
<caption>공지사항</caption>
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">말머리</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>100000473</td>
<td>안내</td>
...

제목셀 바른 제공 예시2

참고 이미지
  • 제목셀이 복잡하게 구성된 경우는 idheaders 속성을 이용하여 제목셀과 내용셀을 보다 더 정확하게 연결할 수 있다.
  • 제목셀마다 각각 다른 id값을 부여하고, 내용셀과 관련이 있는 제목셀의 id값을 headers에 나열한다.
  • 스크린리더에서는 headers에 나열된 id값 순서대로 제목셀을 읽어준다.
바른 코드
<thead>
<tr>
<th rowspan="2" scope="col" id="date">기준일</th>
<th colspan="2" scope="col" id="gsale">경기도 매매가</th>
</tr>
<tr>
<th scope="col" id="price">면적단가</th>
<th scope="col" id="change">변동액</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="d20101001">2010.10.01</th>
<td headers="date d20101001 gsale price">902</td>
<td headers="date d20101001 gsale change">유지 0</td>
...

주의 사항

  • 레이아웃용 테이블에 <th>scope이 사용될 경우에는 오류임

레이아웃용 테이블로 간주할 수 있는 테이블 예시

레이아웃용
테이블 예시
하단의 테이블 처럼 왼쪽 -> 오른쪽 순서로 탐색했을 때 내용 파악에 문제가 없는 경우에 <table>요소로 마크업이 되어 있다면 레이아웃용 테이블로 간주하며, 해당 테이블의 경우에는 불필요한 <caption>, <thead>,<tfoot>,<tbody>,<th>, scope 를 선언하지 않아도 무방하다.
참고 이미지

평가 방법

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

테이블 확인 및 <th>와 scope 속성 확인

N-WAX에서 오류로 표기가 되었어도 레이아웃용 테이블인지 데이터 테이블인지 파악을 하여 평가를 해야 함

평가 도구
N-WAX
평가 방법
2.3.2 표 구조화에서 <table> 별로 항목이 생성되는데 항목별로 <th>가 제공되었는지 scope 속성이 사용되었는지 확인
[Case.1] 제목 셀이 <th>로 제공되지 않은 경우 오류 처리. (빨간 배경으로 표시됨)
[Case.2] 제목 셀이 없지만 표 구조상 필요하다고 판단되는 표에서 blind로 <th>를 제공하지 않는 경우 오류 처리. (빨간 배경으로 표시됨)
[Case.3] 제목 셀이 <th>로 제공되었지만 적절한 scope 속성이 제공되지 않은 경우 오류 처리. (빨간 배경으로 표시됨)
scope 속성이 없음: 업종별(X)
scope="col": 업종별(col)
scope="row": 업종별(row)

모바일 환경에서 테이블 확인 및 <th>와 scope 속성 확인

N-WAX에서 오류로 표기가 되었어도 레이아웃용 테이블인지 데이터 테이블인지 파악을 하여 평가를 해야 함

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

평가 도구 전체 설치 방법