(웹표준/웹접근성) table

메모)

HTML5 혹은 HTML5 보다하위 버전에 따른 table summary, caption 웹접근성


#HTML5 보다 하위 버전
summary="요약정보"
caption="테이블제목"

ex)
<h3>고객 정보 입력</h3>
<table summary="이 표는 이름, 성별 항목으로 구성되어있습니다">
  <caption>고객 정보 입력</ caption>
  <colgroup>
    ~
  </colgroup>
  <thead>
  <tr>
    <th>이름</th>
    <th>성별</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>김매력</td>
    <td>여자</td>
  </tr>
  </tbody>
</table>


#HTML5
summary 사용하지않음
caption="테이블제목+요약정보"
(참고 : 요약정보가 너무 길 경우에는 strong 태그 등을 이용하여 따로 담아준다. 그러면 스크린리더 사용자가 방향키를 눌러 다음으로 넘길 수 있다.)

ex)
<h3>고객 정보 입력</h3>
<table>
  <caption>고객 정보 입력 테이블입니다. 이름, 성별 항목으로 구성되어 있습니다.</ caption>
  <colgroup>
    ~
  </colgroup>
  <thead>
  <tr>
    <th>이름</th>
    <th>성별</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>김매력</td>
    <td>여자</td>
  </tr>
  </tbody>
</table>


#caption을 날릴 때 주의할 점(또는, blind 처리 할 때 컨텐츠는 읽어줘야하는 경우)

- display:none;
- visibility:hidden;
- font-size:0;
스크린 리더기에서 읽어주지 못하므로 사용하지 않도록 한다.


(그냥추가 : tfooter 태그는 thead와 tbody 사이에 위치해야한다.)