웹 접근성을 고려한 데이터테이블
테이블 요소는 가장 많이, 가장 쉽게 사용하는 요소중 하나이지만, 알면 알수록 어려워지는것이 바로 이 테이블인 것 같습니다. 기본적으로 테이블에서 자주 사용되는 속성(summary, caption, colgroup, thead, tfoot, tbody)은 알고 있으리라 생각하고 시작하겠습니다. 간단한 테이블 하나가 있습니다.
흔히 사용되는 테이터 테이블
| 순위 | 지출 용도 | 금액 |
|---|---|---|
| 한달 총 지출비 : 400,000원 | ||
| 1 | 교통비 | 200,000원 |
| 2 | 식대비 | 100,000원 |
| 3 | 개인 용돈 | 100,000원 |
상단테이블 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample03.txt (새창은 Shitf+클릭)
마크업을 살펴보면 summary 속성과 border 속성을 가지고 있고, caption, colgroup, thead, tfoot, tbody 요소를 차례대로 가지고 있으며, 프린터 출력시 tbody 가 두 페이지 이상으로 끊어질 때 페이지마다 tfoot 요소가 출력될 수 있도록 thead 와 tbody 사이에 tfoot 이 위치하고 있습니다. border 속성의 경우 css 가 지원되지 않는 경우 시각적인 가독성을 떨어뜨리는 문제로 기본값을 1로 정의하고 css 로 표현하였습니다.
테이블 Structure 보기
웹 접근성을 고려한 데이터테이블에서는 테이블의 내용을 이해할 수 있는 정보(summary/제목, caption/요약정보)를 제공해야 한다는 것은 누구나 알고 있지만, 조금 더 의미있게 설명하는 테이블은 거의 못본 것 같습니다. summary 에서는 테이블의 상세한 제목 또는 이 테이블을 통해 정보제공자가 전달하고자 하는 핵심 제목을 넣어야 합니다.
그럼, 상단의 테이블의 summary 는 어떻게 넣어야 할까요?
결국, summary 에서는 테이블의 모든 내용을 구구절절(1열 순위, 2열 지출용도, 3열 금액등..) 설명하는 것만이 아니라는 것을 알 수 있으며, 시각장애인은 스크린리더를 통해 이 테이블의 summary 만 들어도 테이블 내용을 직감할 수 있을 것입니다. 저는 이 테이블을 통해 한달에 교통비가 제일 많이 나간다는것을 호소하고 있는 것 입니다. caption 또한 summary 와 중복되지 않는 적절한 요약정보를 넣었습니다.
scope 속성의 col(세로로읽어라)속성값 row(가로로읽어라) 속성값으로 스크린리더에서 테이블의 읽는 순서를 지정해 주었으며, 이와 비슷한 id(너는) headers(너다) 직접연결 속성은 하단에서 설명하겠습니다.. 빠른 진행을 위해 abbr 속성을 사용하였고 음성 장치는 abbr 속성값의 약자만을 읽을 것 입니다.
그럼 하단예제로 제목셀과 내용셀의 논리적인 관계를 의미있게 설정하는 몇가지 방법을 보겠습니다.
제목셀과 내용셀의 읽는 순서를 연결해주자
보통 scope 속성은 테이블형식이 가로 세로가 일정할 때 사용됩니다. 다음과 같이 말이죠.
scope 속성의 col 예제
| 번호 | 제목 | 작성자 |
|---|---|---|
| 1 | 테이터 테이블에 대해서 알고 싶습니다. | 이명박 |
| 2 | 뭔 테이블 하나에 1년을 공부해도 더 배울게 있는거냐구요 | 노무현 |
scope 속성의 col 예제 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample04.txt (새창은 Shitf+클릭)
th 제목요소에 col 을 지정하여 모든열의 범위를 지정하였으므로 스크린리더기는 다음과 같이 읽을 것 입니다.
“번호, 1, 제목, 테이터 테이블에 대해서 알고 싶습니다, 작성자, 이명박 번호, 2, 제목, 뭔 테이블 하나에 1년을 공부해도 더 배울게 있는거냐구요, 작성자, 노무현”
시각적으로 테이블을 보는것이 아니라, 음성으로 듣기 때문에 제목셀을 지그제로 한번 더 읽으므로써, 명확하게 테이블을 이해할 수 있습니다.
scope 속성의 row, id 와 headers 예제
| 작성자 | 이명박 | 회원등급 | 부유층 |
|---|---|---|---|
| 본문내용 | |||
| 부유층을 섬기겠습니다. | |||
scope 속성의 row, id 와 headers 예제 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample05.txt
row 속성값으로 범위에 속한 행에 대하여 가로로 읽게 해주었으며, id 와 headers 속성으로 직접 연결해주었습니다. 물론 id="sample-content" 대신 scope="col" 만으로도 헤더셀과 내용셀의 명시적 연결이 가능 합니다. 읽는 순서는
“작성자, 이명박, 회원등급, 부유층, 본문내용, 부유층을 섬기겠습니다. ”
간단한 테이블이라면 headers 속성 대신 scope 속성만으로도 동일한 결과를 가져 올 수 있으며, headers 는 상황이 매우 복잡한 표나 영역을 설정하기 곤란한 경우에 사용합니다.
헛! 댓글이 있어요
-
정환나라2009/04/10 01:02
내용에 상관없이 예제에 대해 트집잡는 한심한 인간들이 있을듯..
뭐 드림위버가 다 알아서 해주는줄 알았는데 그게 아니었군요 ㅋ