fffo
웹 접근성 향상 실습 - 데이터 테이블 본문
웹 접근성에 대해 이해하기 위해 구체적인 요소를 대상으로 웹 접근성 분석을 해봤다. 이번에 다룰 요소는 데이터 테이블이다. 접근성이 좋지 않은 표를 고쳐보는 방식으로 접근했는데, 평소에 옷을 사는 사이트에 마침 괜찮은 예시가 있었다.
웹 접근성이 좋지 않은 데이터 테이블 예시
가장 큰 문제점은 표를 하나의 이미지로 대체했다는 점이다. 심지어 대체 텍스트도 없는 이미지이다. 표의 규모가 작기 때문에 표 내부의 문제점은 그리 크진 않지만, 적어도 표의 머리 행과 열은 잘 구분될 수 있게끔 경계 강조나 색 대비를 넣어 주는 편이 더 나을 것 같다. 또한 표의 내용면에서도 문제점을 발견할 수 있었는데, 맨 마지막 행을 보면 머리 열이 비어있어 해당 행의 숫자가 무엇을 표현하는 지 추측을 할 수밖에 없다. 물론 해당 숫자는 옷 사이즈에서의 매우 보편적인 숫자이고 해당 열의 머리 행을 보면 숫자의 의미를 짐작 할 수 있다. 표 아래에 보충 설명으로도 해당 행에 대한 설명을 따로 기재했지만 좀 더 직관적인 표를 위해 개선이 필요할 것 같다. 그렇다면 옷 사이즈 표의 좋은 예는 어떤 것이 있는지 대형 의류 브랜드의 옷 사이즈 표를 찾아봤다.
옷 사이즈 표에 대한 좋은 예시
우선 나이키의 옷 사이즈 표는 짝수 열에 배경색을 다른 색으로 두어 행 구분을 쉽게 할 수 있었다. 또한 이전 예와는 다르게 한국사이즈라는 정보를 따로 표기해 명확하게 정보를 전달하고 있다. 추가로 단위를cm와 inch로 바꿀 수 있게 버튼을 따로 만들어 편의를 제공하고 있다. 한 가지 아쉬운 점은 사이즈 표가 커서 그런지 버튼 클릭을 통해 표가 나오도록 만들었는데, 접근하는 버튼이 작고 흐릿한데다가 버튼처럼 보이지 않아 접근성이 떨어졌다.
데이터 테이블 체크리스트
WCAG에 근거해 데이터 테이블이 지켜야할 몇 가지 기준을 체크리스트화 해 보았다
1. 인식 : 모든 사용자는 서비스 콘텐츠를 인식할 수 있어야 함
1-1. 테이블을 보기 위해 제공되는 수단은 적절한가? (버튼 가시성 등)
1-2. 테이블의 위치는 적절한가?
1-3. 테이블의 행과 열은 적절히 구분 되는가?
2. 운용 : 모든 사용자는 서비스의 기능을 운용할 수 있어야 함
2-1. 테이블의 데이터 값이 마크업되어 있는가?
2-2. 테이블의 행과 열은 적절히 분리되어 있는가?
3. 이해 : 모든 사용자가 서비스의 콘텐츠, 기능 사용법 등을 이해하기 쉬워야 함
3-1. 테이블의 머리 행/열의 내용은 적절한가?
3-2. 테이블의 데이터 단위가 표기 되어있는가?
4. 견고 : 사용자가 이용하는 모든 기기 및 브라우저에서 접근, 사용 가능해야 함
4-1. 테이블은 모든 기기 및 브라우저에서 지원하는 기술을 사용하여 만들어졌는가?
4-2. 테이블은 화면에 따라 적절하게 변화 하는가?
구현
html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="Put your description here.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PERSONALPACK [[신상할인]premium solid SWEATSHIRT [overfit](melangegray)]</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
<h3>PERSONALPACK SIZE</h3>
<p>오버핏으로 제작된 이 제품은 가슴, 어깨 부분이 넉넉히 제작된 제품입니다. <br>체구가 크신 분들도 착용이 유용한 제품입니다.</p>
<table class="size-table">
<caption class="blind">사이즈 안내 표 안내 - 구분(기성사이즈), S(90~100), M(100~105), L(105~110), XL(110~115) 별 가슴너비, 어깨너비, 소매길이(팔기장), 총기장(앞/뒤) 사이즈 참고 표, cm 단위</caption>
<thead>
<tr>
<th scope="col">구분<br><span class="additional-text">(기성사이즈)</span></th>
<th scope="col">S<br><span class="additional-text">(90~100)</span></th>
<th scope="col">M<br><span class="additional-text">(100~105)</span></th>
<th scope="col">L<br><span class="additional-text">(105~110)</span></th>
<th scope="col">XL<br><span class="additional-text">(110~115)</span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">가슴너비</th>
<td>61</td>
<td>64</td>
<td>66</td>
<td>68</td>
</tr>
<tr>
<th scope="row">어깨너비</th>
<td>54</td>
<td>56</td>
<td>58</td>
<td>59</td>
</tr>
<tr>
<th scope="row">소매길이(팔기장)</th>
<td>59</td>
<td>60</td>
<td>61</td>
<td>62</td>
</tr>
<tr>
<th scope="row">총기장(앞/뒤)</th>
<td>68</td>
<td>70</td>
<td>72</td>
<td>73</td>
</tr>
</tbody>
</table>
<p class="table-unit">( 단위 : cm )</p>
</div>
</body>
</html>
css 코드
@charset "utf-8";
.blind {
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
}
.table-container {
display: inline-block;
}
.table-unit {
text-align: right;
font-size: 15px;
margin: 5px;
}
.additional-text {
font-size: 13px;
}
.size-table {
border-collapse: collapse;
text-align: center;
}
.size-table thead th {
background-color: #ccc;
width: 150px;
padding: 10px;
font-weight: bold;
}
.size-table tr:nth-child(even) {
background-color: #eee;
}
.size-table tbody th {
width: 150px;
padding: 10px;
font-weight: bold;
}
@media (prefers-color-scheme: dark) {
body {
background: rgb(32, 43, 56);
}
h1,
h2,
h3 {
color: #fff;
}
p{
color: #dbdbdb;
}
.size-table {
color: #dbdbdb;
}
.size-table thead th {
background-color: rgb(72,83,96);
}
.size-table tr:nth-child(even) {
background-color: rgb(42, 53, 66);
}
}
html, css문법 검사와 크롬 개발자도구 라이트하우스의 모든 부문을 통과 하였다
후기
개선 중에 가장 고민스러웠던 것은 맨 마지막 행에 있는 권장 사이즈였다. 표는 기본적으로 머리 행과 열을 통해 정보를 전달하는데, 권장 사이즈는 따로 행을 내어서 표기하기엔 머리 행(S,M,L,XL)와 중복되는 느낌이었다. 이를 해결하는 데에 좋은 아이디어가 되었던 곳이 우체국 요금 안내표였다. 좋은 데이터 테이블의 예시로 우체국 사이트의 요금 안내표가 있었는데 필요한 정보들을 정갈하게 전달하는 느낌이었다. 주목해서 본 점은 하나의 행에 두 가지 정보가 함께 있는 행이 번잡하지 않았다는 점인데 여기서 아이디어를 얻어 옷 사이즈 테이블에 적용했다.
표를 설명하는 캡션의 내용도 고민이었다. 여러 사이트를 조사해본 결과 일반적으로 캡션에는 테이블을 설명하는 문구를 넣고 화면에는 보이지 않게 처리해서 시각적 장애가 있는 사람을 위한 정보를 넣었다. 그래서 처음에는 캡션에 표에 대한 설명을 넣었는데 사이즈 표의 단위를 표시하기가 애매했다. 캡션을 화면에 보이지 않게 하면 사이즈 표의 단위를 일반 사용자가 보지 못하는데, 따로 단위를 명시하자니 마크업 상에서 테이블 데이터와 떨어지는 느낌이었다. 결국 캡션에는 설명을 넣고 단위를 테이블태그 바깥의 p태그에 넣었다. 대신 같은 테이블 정보라는 느낌을 주기 위해 display가 inline-block으로 설정한 div로 table과 단위를 설명하는 태그를 감싸주었다.
그런데 문제가 생겼다. 표의 머리행과 몸체 사이에 border-collapse 속성이 먹히질 않았다. 해당 속성 값으로 collapse를 주면 표의 각 셀의 border 값이 겹쳐져야 하는데 다른 곳은 다 겹쳐지고 맨 위 머리행과 그 다음행이 겹쳐지질 않았다. border-space도 0으로 설정해봤지만 고쳐지지 않았다. 알고보니 caption 태그에 넣었던 blind 클래스가 문제였다. blind 클래스는 예전에 썼었던 IR기법을 그대로 가져왔었다. 그러다 보니 해당 요소가 레이아웃에 영향을 끼치지 않도록 position속성 값으로 absolute를 넣었는데 이게 thead와 tbody사이의 border를 띄워서 문제였다. 왜 그런지는 아직 답을 찾고 있는 중이다.. position 값이 absolute, fixed일 때 문제가 생기고 static, relative, sticky 일 때 정상 작동한다.
어차피 caption은 position의 영향을 받지 않으니 position 속성을 없애니 정상적으로 border가 겹쳐졌다. 하지만 최종 결과물에는 border를 아예 빼고 배경색으로 행을 구분하였다. 그 편이 훨씬 가독성이 좋아 보였기 때문이였다.
구현을 하다 보니 자연스레 다크모드를 지원하게끔 구현을 했는데, 다크모드는 웹 접근성과 관련 있는 내용인지 고민스러웠다. 다크모드는 사용자에 따라 접근성을 높일 수도, 떨어뜨릴 수도 있는 속성이기 때문에 편의상 다크모드를 지원만 하고 본문에는 구현 내용을 따로 넣지 않았다.
행의 구분에 대한 고민도 있었다. 배경색을 색맹을 위해 그레이 스케일로 결정하는 건 어렵지 않았지만 적절하게 명도를 조절하는 데에 엉뚱하게 꽂혔다. 그 과정에서 css 색표현을 #rrggbb보다 rgb(r,g,b)로 표현하는 것이 명도 조절이 좀 더 편하다는걸 깨달았다. 전자는 값이 16진수이기 때문에 명도 조절을 할 때 rgb 각 값을 똑같이 더하고 빼기가 불편했다. 물론 그레이 스케일에선 rgb 값이 각각 같으니 상관 없지만, 앞서 언급한 다크모드에서는 body의 배경색이 완전한 검은색이 아닌 푸른빛을 띄는 색이여서 해당 색의 값에 맞게끔 명도를 조절해야 했다. 본질과는 조금 동떨어진 고민이었지만 나는 이런 디테일한 부분을 고민하는것이 좋았다.
한 동안 코딩테스트 문제풀이와 js 문법만 공부하다가 이렇게 눈으로 보이는 작업을 하니 기분이 좋았다. 역시 나는 눈에 보이는 작업과 맞는 사람인 것 같다. 다만 다른 사람들과 함께 작업했으면 좀 더 재밌었을거 같다.
'Programming > HTML, CSS' 카테고리의 다른 글
| SCSS(SASS) 간단 사용법 (0) | 2022.02.10 |
|---|---|
| html, css 요약 (0) | 2022.02.01 |
| article과 section의 사용법, 차이점 (0) | 2021.11.11 |
