전문가 상담

HOME > 지식마당 > 온라인 자문서비스 > 전문가 상담
DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요?
DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요?
작성일 2017-05-16 오후 2:40:28 작성자 한정기
첨부파일
  • 등록된 첨부파일이 없습니다.
[질문]

DIV로 (display: table 이나 table-cell을 통한) 테이블을 구성하였는데
이러한 경우에 웹접근성을 맞추려면 어떻게 해야할까요?

//////////////////////소스/////////////////////////////////

<!-- DIV로 테이블 교체 -->
<style>
.table {
display: table;
border-collapse: collapse;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
padding: 10px;
border: 1px solid #666;
vertical-align: middle;
text-align: center;
}
.th {
display: table-cell;
padding: 10px;
border: 1px solid #666;
vertical-align: middle;
background: #6e6f73;
color: #fff;
text-align: center;
}
.table_inner {
display: table;
}
.table_inner .td {
padding: 0;
border: none;
}
</style>

<div class="table" style="width: 100%;">
<div class="tr">
<p class="th">학과명</p>
<p class="th">대상</p>
<p class="th">모집</p>
<p class="th">지원</p>
<p class="th">비율</p>
</div>

<!-- 임상병리과 -->
<div class="tr">
<!-- 학과명 -->
<div class="td">
<h3>임상병리과</h3>
</div>
<!-- 대상 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">일반</p></div>
<div class="tr"><p class="td">지역고교</p></div>
<div class="tr"><p class="td">리더쉽</p></div>
</div>
</div>
<!-- 모집 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">60</p></div>
<div class="tr"><p class="td">35</p></div>
<div class="tr"><p class="td">4</p></div>
</div>
</div>
<!-- 지원 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">391</p></div>
<div class="tr"><p class="td">104</p></div>
<div class="tr"><p class="td">4</p></div>
</div>
</div>
<!-- 비율 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">6.52</p></div>
<div class="tr"><p class="td">2.97</p></div>
<div class="tr"><p class="td">1</p></div>
</div>
</div>
</div>
</div>




[답변]
안녕하세요.
웹 접근성 연구소 담당자 입니다.

div를 이용해서 table을 대신한 경우의
웹 접근성 확보 방법에 대해서 질문 주셨는데요.

사실 이런 경우는 table을 지나치게 배제한
경우라고 보여지는데요.

table을 사용해야 하는 데이터 구조 임에도 불구하고
div를 이용하여 오히려 접근성이 낮은 데이터를 제공하고 있습니다

해결방법은
table을 접근성에 맞게 사용하시는 방법 혹은
div를 사용하되 정보(th 부분)를 중복적으로 제공하는 방법이 있을 것 같습니다.

감사합니다.


전문가상담 목록
번호 분류 제목 작성자 작성일
10265 일반 DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요? 손동찬 2017-05-16
10267 일반  전문가 답변DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요? 한정기 2017-05-16

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)

위로가기