표의 내용을 이해하기 쉽게 제공하기
오류 유형으로 살펴보는 웹 접근성 지침
표는 어떤 내용을 일정한 형식과 순서에 따라 알아 보기 쉽게 나타낸 것입니다. 그러므로 우리가 표를 만들 때는 표의 일정한 형식과 순서를 알 수 있게 만들어야 합니다. 그렇지 않으면 우리가 표를 통해 전달하고자 하는 내용이 제대로 전달되지 않을 수 있습니다.
그럼, 웹콘텐츠로서 표의 내용을 사용자가 이해하기 쉽게 하려면 어떻게 표를 구현해야 할까요?
이번 글에서는 표를 제공할 때 주의해야 할 웹 접근성 오류 유형 3가지를 알아 보겠습니다.
표의 제목과 요약 정보를 제공하지 않거나 불충분하게 제공한 경우
HTML5에서는 표의 제목과 요약정보는 <caption> 요소를 사용하여 제공할 수 있습니다. 제목(caption)이 없거나, 표의 내용을 충분히 대변하지 못하는 caption을 제공하는 것은 사용자에게 나름대로 표를 분석해서 내용을 이해하라고 요구하는 것과 같습니다.
Example
제목이 없는 열차별 예약현황 표
Do Not
<table>
<thead>
<tr>
<td>구분</td>
<td>열차 번호</td>
...
간혹 Do Not과 같이 표의 제목이 없으면, 우리는 표의 내용을 전체적으로 훑어 보아야만 해당 표가 무엇을 나타내고 있는지 알 수 있는 어려움이 있습니다. 하지만 사용자에 따라 표의 내용을 훑어봐도 이해하기가 어려울 수 있고, 보조 기술을 이용하는 경우 내용을 훑어보는 것 자체가 힘들 수도 있습니다.
Do
<table>
<caption>열차별 예약 현황</caption>
<thead>
<tr>
<th scope="col">구분</td>
<th scope="col">열차 번호</td>
...
반면에 Do와 같이 '열차별 예약현황'이라는 적절한 제목이 있는 경우, 우리는 표를 훑어보지 않아도 표의 내용이 무엇인지 알 수 있고, 표의 내용을 이해하는 데 도움이 됩니다.
하지만 표의 제목을 caption이 아닌 제목 요소(h1, h2 등)를 사용하여 제공하지 않도록 주의해야 합니다. 제목 요소는 caption과 달리 table에 결합하지 않았기 때문에, 표 제목을 읽지 못하고 지나칠 수 있는 가능성이 있기 때문입니다. 그러므로 표의 제목은 caption으로 제공하는 것이 좋습니다.
제목 셀과 내용 셀을 구분하지 않거나 잘못 구분한 경우
표의 제목(caption)을 제공했다 하더라도 제목 셀과 내용 셀을 구분하지 않거나 잘못 구분하여 제공한 경우, 사용자는 여전히 표의 내용을 이해하기 어려울 수 있습니다. 스크린리더 사용자가 표에 담긴 데이터를 오해하지 않고 정확히 이해할 수 있게 하려면 제목 셀은 <th> 요소로 구현하고, 내용 셀은 <td>로 구분하여 구현해야 합니다.
Do Not
표의 제목 셀이 구분되지 않는 예시
<table>
<caption>월별 생활비 지출표</caption>
<tr>
<td rowspan="2" scope="col">구분</td>
<td colspan="2" scope="col">11월</td>
<td colspan="2"scope="col">12월</td>
</tr>
<tr>
<td scope="col">예상지출</td>
<td scope="col">실제지출</td>
<td scope="col">예상지출</td>
<td scope="col">실제지출</td>
</tr>
...생략...
<tr>
<th scope="row">저축</th>
<td>50만원</td>
<td>45만원</td>
<td>50만원</td>
<td>55만원</td>
</tr>
</tbody>
</table>
스크린 리더 음성
...생략...
저축
50만원
45만원
50만원
55만원
위와 같이 표의 제목 셀과 내용 셀이 구분되어 있지 않으면, 사람은 무엇을 기준으로 표를 읽어야 할지 표를 분석하게 됩니다. 하지만 스크린리더는 Do Not과 같은 표를 읽으면 개별 셀을 순차적으로 읽기 때문에, 스크린리더 사용자는 표의 내용을 이해할 수가 없습니다.
Do
표의 제목 셀을 분명하게 구분할 수 있는 예시
<table>
<caption>월별 생활비 지출표</caption>
<thead>
<tr>
<th rowspan="2" scope="col">구분</th>
<th colspan="2" scope="col">11월</th>
<th colspan="2" scope="col">12월</th>
</tr>
<tr>
<th scope="col">예상지출</th>
<th scope="col">실제지출</th>
<th scope="col">예상지출</th>
<th scope="col">실제지출</th>
</tr>
</thead>
...생략...
<tr>
<th scope="row">저축</th>
<td>50만원</td>
<td>45만원</td>
<td>50만원</td>
<td>55만원</td>
</tr>
</tbody>
</table>
스크린 리더 음성
...생략...
저축
11월 예상지출 50만원
11월 실제지출 45만원
12월 예상지출 50만원
12월 실제지출 55만원
따라서 Do Not의 표를 Do와 같이 수정해야 합니다. 표의 제목 셀은 th 태그로 구현하고, 내용 셀은 td 태그로 구현하여 구분을 해줍니다. 이렇게 하면 스크린리더는 제목 셀과 내용 셀을 연관지어 읽어 줄 수 있기 때문에, 스크린리더 사용자가 표의 내용을 이해하기 쉬워집니다.
Do 예시와 같이 제목 셀과 내용 셀을 구분하여 디자인하면, 시각적으로 표를 읽는 기준을 인지하기 쉬워지는 효과도 있습니다.
복잡한 구성의 표를 scope 속성만을 사용하여 제목을 구분한 경우
Example
여러 개의 제목 셀이 얽혀있는 성적통지표
Do Not
<table>
<caption>2019학년도 대학수학능력시험 성적통지표</caption>
<thead>
<tr>
<th scope="col">수험번호</th>
<th scope="col">성명</th>
<th scope="col">생년월일</th>
<th scope="col">성별</th>
<th scope="col" colspan="4">출신고교(반 또는 졸업년도)</th>
</tr>
...생략...
<tbody>
<tr>
<th scope="col" rowspan="2">구분</th>
<th scope="col" rowspan="2">한국사 영역</td>
<th scope="col" rowspan="2">국어 영역</td>
<th scope="col" >수학 영역</td>
<th scope="col" rowspan="2">영어 영역</td>
<th scope="colgroup" colspan="2">사회탐구 영역</td>
<th scope="col">제2외국어</br>/한문 영역</td>
</tr>
...생략…
<tr>
<th scope="row">등급</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
스크린 리더 음성
...생략...
등급
성명 2
생년월일 2
성별 2
출신고교(반 또는 졸업년도) 1
출신고교(반 또는 졸업년도) 사회탐구 영역 4
출신고교(반 또는 졸업년도) 사회탐구 영역 2
출신고교(반 또는 졸업년도) 2
Do
<table>
<caption>2019학년도 대학수학능력시험 성적통지표</caption>
<thead>
<tr>
<th scope="col">수험번호</th>
<th scope="col">성명</th>
<th scope="col">생년월일</th>
<th scope="col">성별</th>
<th scope="col" colspan="4">출신고교(반 또는 졸업년도)</th>
</tr>
...생략...
<tbody>
<tr>
<th scope="col" rowspan="2">구분</th>
<th scope="col" id="k_h" rowspan="2">한국사 영역</td>
<th scope="col" id="k" rowspan="2">국어 영역</td>
<th scope="col" id="m">수학 영역</td>
<th scope="col" id="e" rowspan="2">영어 영역</td>
<th scope="colgroup" id="st" colspan="2">사회탐구 영역</td>
<th scope="col" id="f_c">제2외국어</br>/한문 영역</td>
</tr>
...생략…
<tr>
<th scope="row" id="r">등급</th>
<td headers="k_h r">2</td>
<td headers="k r">2</td>
<td headers="m m_b r">2</td>
<td headers="e r">1</td>
<td headers="st l_e r">4</td>
<td headers="st s_c r">2</td>
<td headers="f_c a r">2</td>
</tr>
</tbody>
</table>
스크린 리더 음성
...생략...
한국사 영역 등급 2
국어 영역 등급 2
수학 영역 나형 등급 2
영어 영역 등급 1
사회탐구 영역 생활과 윤리 등급 4
사회탐구 영역 사회 문화 등급 2
제2외국어/한문 영역 아랍어 등급 2
대학수학능력시험 성적통지표와 같이 복잡한 구성의 표는 Do Not과 같이 제목 셀과 내용 셀을 구분하고 scope 속성을 사용하여도 표의 내용이 올바르게 전달되지 않을 수가 있습니다.
스크린리더 사용자가 복잡한 구성의 표를 이해하기 위해서는 Do와 같이 연결이 필요한 제목 셀에는 id 값을 주고, 내용 셀에는 참조하는 제목 셀들의 id 값들을 모두 headers 값으로 할당해야 합니다. 그러면 스크린리더가 각 내용 셀을 읽을 때 참조되는 셀들을 순서대로 읽어서 표의 내용을 보다 이해하기 쉽게 제공할 수 있습니다.
요약
누가 무엇을 어떻게 읽느냐에 따라 다른 정보를 전달받지 않게, 우리는 읽는 사람의 입장에서 표의 내용을 이해하기 쉽게 구현해야 한다는 것을 잊지 말아야 합니다.
우리가 앞으로 표를 제공할 때는 항상 표의 제목과 요약정보를 제공하고, 표의 제목 셀과 내용 셀을 구분하고, scope를 이용하여 표를 읽는 방향을 설정하는 것도 잊지 말아야 합니다. 또한 복잡한 표를 구현할 때는 셀의 속성으로 id와 headers를 사용하여 서로 연관된 셀이 무엇인지 알 수 있게 해준다면 누가 읽어도 이해하기 쉬운 표가 될 것입니다.
