[WEB] 웹 접근성이 낮은 데이터 테이블 찾아 수정하기
in WEB on Web
- 목차
html, css 에 대해 더욱 깊게 공부를 하며, 웹 접근성과 표준의 중요성에 대해 다시금 깨달았다.
나는 장애를 갖고 있지 않고, 때문에 스크린리더를 사용할 기회가 없었기에, “얼마나 웹 표준을 잘 지키는 가”가 스크린리더에 차이가 크다는 사실을 알 지 못했었다.
하지만 학습을 진행할수록, 그 중요성을 다시 알게 되어 이 프로젝트를 진행하고자 한다.
현재 서비스되고 있는 사이트 중에 접근성이 낮은 데이터 표를 가진 사이트를 찾아 웹 표준에 맞게 수정하는 작은 프로젝트를 진행하고자 한다.
1. 웹 접근성 관점 체크리스트
웹 접근성 관점 체크리스트에는 무엇이 있을까?
정말 다양한 내용이 있지만 이 프로젝트는 데이터 테이블에 중점을 두고 있으므로, 테이블에 관련된 체크 리스트만 살펴 보겠다.
일반인은 표를 보고 데이터를 파악하는데 문제가 없지만, 시각 장애가 있는 사용자의 경우 스크린리더를 통해 표의 왼쪽에서 오른쪽으로 cell의 내용만 듣고 판단해야하기 때문에,
대표 cell의 주제를 알기 쉽도록 하는 것이 웹 접근성을 높이는 것이다.
html5가 등장하며, 웹 접근성을 향상시킬 수 있는 다양한 태그들이 새롭게 등장하였는데, 이것을 잘 지킨 사이트가 접근성이 높은 사이트라고 볼 수 있다.
- table 내부에 thead, tbody 태그로 데이터가 나뉘어져 있는가
- table의 제목을 나타내는 caption 태그가 있는가 (필수 요소는 x)
- table 태그의 summary 속성을 사용하였는가
- th 태그를 사용하여 header cell을 정의하였는가
- th 태그의 scope 속성을 사용하였는가(또는 headers, id)
- cell 내부의 데이터가 없는 경우 빈 셀로 두지 않았는가
colgroup 은 열별로 css 속성을 주기 위해 사용되며 html5부터는 span 속성 외에 공식적으로 지원하지 않으므로 사용을 지양하도록 하자.
2. 접근성이 좋지 않은 테이블 찾기
사실 내가 자주 이용하는 사이트에서는 접근성이 낮은 테이블을 찾기가 굉장히 어려웠다.
과제를 진행하기 위해 서칭하는 시간이 더 오래 걸려서 비록 나는 힘들었지만, 웹 접근성이 낮은 장애인, 고령자에게는 다행인 일이다.😂
(무신사, 기상청, 하다못해 유지보수를 전혀 하지 않는 것 같은 나의 대학교조차 웹 접근성을 잘 갖춘 데이터 테이블로 구성되어 있었다.)
그렇게 열심히 서칭하여 찾은 접근성이 낮은 데이터 테이블은 충청남도 경제 진흥원의 조직도 이다.
아래 이미지가 접근성이 좋지 않은 데이터 테이블이다.
3. 웹 표준, 웹 접근점 관점에서의 문제점 분석
위의 이미지만 봐서는 사실 뭐가 잘 못 된건지 알 수가 없을 것이다.
(나도 개발자모드로 살펴보기 전까지는 어떤게 웹 접근성이 좋은지 알 지 못했다.)
문제점은 내부 html 코드를 보면 쉽게 분석이 가능하다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table style="min-width: 520px;">
<thead>
<tr>
<th style="width: 20%;">구분</th>
<th style="width: 25%;">직책</th>
<th style="width: 20%;">성명</th>
<th style="width: 25%;">현 소속 및 지위</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" rowspan="4" style="border-right-color: rgb(222, 226, 230); border-right-width: 1px; border-right-style: solid;">당연직(4)</td>
<td class="text-center">이사장</td>
<td class="text-center">이필영</td>
<td class="text-center">충청남도<br>
행정부지사</td>
</tr>
<tr>
<td class="text-center">이사</td>
<td class="text-center">오광옥</td>
<td class="text-center">충청남도경제진흥원<br>
원장</td>
</tr>
<tr>
<td class="text-center">이사</td>
<td class="text-center">김영명</td>
<td class="text-center">충청남도<br>
경제실장</td>
</tr>
<tr>
<td class="text-center">이사</td>
<td class="text-center">황승기</td>
<td class="text-center">충남지방중소벤처기업청<br>
조정협력과장</td>
</tr>
<tr>
<td class="text-center" colspan="1" rowspan="5" style="border-right-color: rgb(222, 226, 230); border-right-width: 1px; border-right-style: solid;">선임직(5)</td>
<td class="text-center">이사</td>
<td class="text-center">김동복</td>
<td class="text-center">한국여성경제인협회<br>
세종▪충남지회장</td>
</tr>
<tr>
<td class="text-center">이사</td>
<td class="text-center">장태석</td>
<td class="text-center">
<p>선문대학교</p>
<p>교수</p>
</td>
</tr>
<tr>
<td class="text-center">이사</td>
<td class="text-center">이춘호</td>
<td class="text-center">
<p>한서대학교</p>
<p>교수</p>
</td>
</tr>
<tr>
<td class="text-center" style="height: 65px;">이사</td>
<td class="text-center" style="height: 65px;">김바올</td>
<td class="text-center" style="height: 65px; vertical-align: middle;">
<p>변호사</p>
</td>
</tr>
<tr>
<td class="text-center">
<p>노동자</p>
<p>이사</p>
</td>
<td class="text-center">신용식</td>
<td class="text-center">충청남도경제진흥원</td>
</tr>
<tr>
<td class="text-center" style="border-right-color: rgb(222, 226, 230); border-right-width: 1px; border-right-style: solid;">당연직(1)</td>
<td class="text-center">감사</td>
<td class="text-center">이성일</td>
<td class="text-center">충청남도<br>
소상공기업과장</td>
</tr>
<tr>
<td class="text-center" style="border-right-color: rgb(222, 226, 230); border-right-width: 1px; border-right-style: solid;">선임직(1)</td>
<td class="text-center">감사</td>
<td class="text-center">전병훈</td>
<td class="text-center">삼도회계법인<br>
회계사</td>
</tr>
</tbody>
</table>
</body>
</html>
소스코드가 길지만 정확한 이해를 위해 전부 사용한 점 이해 바란다.😭
문제점은 위에서 작성한 체크리스트와 비교해보면 더욱 쉽게 찾을 수 있다.
- table의 summary 가 없다.
- thead 내부의 th 태그의 scope 속성이 없다.
- table 의 caption 태그가 없다.
- 구분에 속하는 cell (당연직, 선임직)이 td 로서 선언되어 있다.
4. WCAG 가이드라인에 맞춰 수정 계획 선정
WCAG 란?
웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침이다.
WCAG 가이드라인1 바로가기 WCAG 가이드라인2 바로가기
WCAG 가이드라인은 크게 네 부분으로 이루어져 있다.
- Perveivable (인식 가능하고)
- Operable (조작 가능하며)
- Understandable (쉽게 이해할 수 있고)
- Robust (견고해야 한다.)
위의 내용이 이해가 안간다면 다음의 물음에 Yes!👍 가 가능하면 가이드라인에 맞는 웹사이트인 것이다.
- 시/청각 장애를 가진 사용자가 서비스를 인식하는데 문제가 없습니까?
- 마우스 없이 서비스를 이용할 수 있고, 성공적으로 수행할 수 있습니까?
- 명확하고 이해하기 쉬운 콘텐츠를 제공하고 있습니까?
- 특정 운영체제 또는 브라우저에서만 서비스를 이용할 수 있지 않습니까?
수정 계획
우선 위의 질문들에는 나의 주제가 html/css 로만 이루어진 데이터 테이블 구조이기 때문에 문제가 없다!
따라서 2, 3번 과정에서 발견한 문제점을 어떻게 해결 할 것인지를 정리하겠다.
- table 태그 내의
summary 속성을 추가하여 테이블의 요약 추가한다. - caption 태그를 추가하여 테이블의 요약을 더욱 명시적으로 표현한다. (css 로 가릴 예정)
- 열의 주체가 되는 행들은
th 속성의scope="col"속성을 추가하여 대표 열임을 강조한다. - 행의 주체가 되는 행들은
th 속성의scope="row"속성을 추가하여 대표 행임을 강조한다.
5. html, css 통해 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="웹 접근성이 낮은 데이터 테이블 찾아 수정하기">
<title>웹 접근성이 낮은 데이터 테이블 찾아 수정하기</title>
<style>
* {
text-align: center;
}
caption {
display: none;
}
td {
border-right: 1px solid rgb(222, 226, 230);
border-bottom: 1px solid rgb(222, 226, 230);
line-height: 30px;
}
.first-col {
width: 20%;
}
.second-col {
width: 25%;
}
.third-col {
width: 20%;
}
.firth-col {
width: 25%;
}
.th-row {
border-right: 1px solid rgb(222, 226, 230);
border-bottom: 1px solid rgb(222, 226, 230);
}
.th-col {
border-right: 1px solid rgb(222, 226, 230);
border-bottom: 1px solid rgb(222, 226, 230);
}
</style>
</head>
<body>
<table summary="이사회 구성원의 직책, 성명, 현 소속 및 지위 안내">
<caption>이사회 조직도 - 구분, 직책, 성명, 현 소속 및 지위 로 구성</caption>
<thead>
<tr>
<th scope="col" class="first-col th-row">구분</th>
<th scope="col" class="second-col th-row">직책</th>
<th scope="col" class="third-col th-row">성명</th>
<th scope="col" class="firth-col th-row">현 소속 및 지위</th>
</tr>
</thead>
<tbody>
<tr>
<th class="th-col" rowspan="4" scope = "row">당연직(4)</th>
<td>이사장</td>
<td>이필영</td>
<td>충청남도<br>행정부지사
</td>
</tr>
<tr>
<td>이사</td>
<td>오광옥</td>
<td>충청남도경제진흥원<br>원장
</td>
</tr>
<tr>
<td>이사</td>
<td>김영명</td>
<td>충청남도<br>경제실장
</td>
</tr>
<tr>
<td>이사</td>
<td>황승기</td>
<td>충남지방중소벤처기업청<br>조정협력과장</td>
</tr>
<tr>
<th class="th-col" rowspan="5" scope="row">선임직(5)</th>
<td>이사</td>
<td>김동복</td>
<td>한국여성경제인협회<br>세종▪충남지회장</td>
</tr>
<tr>
<td>이사</td>
<td>장태석</td>
<td>
<p>선문대학교</p>
<p>교수</p>
</td>
</tr>
<tr>
<td>이사</td>
<td>이춘호</td>
<td>
<p>한서대학교</p>
<p>교수</p>
</td>
</tr>
<tr>
<td >이사</td>
<td>김바올</td>
<td>
<p>변호사</p>
</td>
</tr>
<tr>
<td>
<p>노동자</p>
<p>이사</p>
</td>
<td>신용식</td>
<td>충청남도경제진흥원</td>
</tr>
<tr>
<th scope="row" class="th-col">당연직(1)</th>
<td>감사</td>
<td>이성일</td>
<td>충청남도<br>소상공기업과장</td>
</tr>
<tr>
<th scope="row" class="th-col">선임직(1)</th>
<td>감사</td>
<td>전병훈</td>
<td>삼도회계법인<br>회계사</td>
</tr>
</tbody>
</table>
</body>
</html>
일반인의 눈으로 보기에는 가독성을 위해 line-height를 증가시킨 것과, 각 행/열의 대표 cell이 bold체가 됐다는 것 말고는 없다.
6. 문법 검사 결과
html 문법 검사
html 문법 검사는 W3C validator 해당 사이트를 통해 진행하였다.
사진과 같이 table의 summary 속성에 대해서만 메세지가 출력되었다.
(이는 높은 접근성을 위해 어쩔수가 없다ㅠ)
css 문법 검사
다음으로 css 문법 검사는 W3C css-validator 해당 사이트를 통해 진행하였다.
오호 아주 기분 좋게 한번에 통과하였다🤩
7. 라이트하우스 분석 리포트
라이트하우스란?(LightHouse)
구글이 운영하는 웹/앱의 품질을 개선하는 오픈 소스 자동화 도구이다.
url 을 통해 해당 사이트의 performance, 접근성, seo 등을 분석하여 report 를 작성해준다.
라이트하우스 분석 결과
처음에는 meta-description 을 작성하지 않아서 SEO가 89점으로 낮게 나왔다.ㅠ
그래서 수정을 하니..!
모두 100점이 나왔다!!!!🤩🤩
8. 프로젝트 완료 후기
부끄럽지만 그동안은 th 속성이 단순히 글자가 두꺼워지는 효과를 위해 사용한다는 개념을 가지고 있었다.(그래서 사용을 더 안했다.)
모든 사람이 평등하게 웹 서비스를 사용한다는 생각에서 시작된 웹 접근성. 개념의 탄생부터 그 의미가 너무나도 멋있다.
하지만 난 그동안 장애를 갖지 않는 “나”의 입장에서만 사용하기 좋은 웹 사이트를 개발해 왔다는 사실에 생각이 많아졌다🤔
블로그 포스팅만 해도 mark 태그가 귀찮아서 code 태그로 강조해 온 내 자신 반성하자.
이번 반성을 통해 앞으로 텍스트 강조는 무조건 mark 태그를 사용할 것이다👍
드라마틱한 변화가 가시적으로 보였으면 더 좋았겠다는 생각에 더 나쁜(낮은 접근성) 웹 사이트를 찾지 못한 것이 조금 아쉽다.
아무리 찾아도 thead, tbody 조차 없는 테이블은 정말 볼 수가 없었다😭
개인적으로 cell 은 존재하고 data가 없는 테이블을 찾아 수정하고 싶었는데 찾지 못해서 아쉬워서 여기서라도 정리하자.
cell의 데이터가 없을 때는 null값으로 두지 않고 “없음” 등의 텍스트 처리를 한 후 css를 통해 없애자 (display:none;)
이 개념이 생각지도 못했고, 이번 프로젝트를 통해 새로 알게 된 점이어서 꼭 짚고 넘어가고 싶었다🤩
사실 데이터 테이블 관점에서 진행한 프로젝트여서 table만 다뤘지만, table 이외에도 웹 접근성을 높이기 위한 방법은 매우 많다.
대표적으로 Img 태그의 alt 속성!
놀라운건 table은 대부분 thead, tbody는 갖춰진 상태지만 이미지마다 alt 속성이 제대로 이루어진 웹사이트는 정말 보기 드믈었다는 사실이다.
(이미지 하나하나마다 지정해야해서 귀찮았을까..?)
사실 이 부분은 나도 alt 속성 지정을 잘 안해왔기 때문에 반성해야한다.😭
이번 프로젝트를 진행하며, 일반 사용자인 나의 입장에서, 나 혼자 개발할 때는 고려하기 어려웠던 웹 접근성에 대해 공부하고, 적용할 수 있어서 재밌었다.
