[웹 UI 개발] 표 - 1 / 표 접근성
2023. 3. 23. 13:22
테이블 태그 역시 스크린리더가 올바르게 읽을 수 있도록 th, td에 속성을 추가해 주어야 한다.
scope
모든 제목 셀(th)에는 scope 속성을 추가해서 어떤 내용 셀(td)에 대한 것인지 알려주어야 한다.
scope의 값으로는 "col, row, colgroup, rowgroup"을 사용할 수 있는데, 같은 열의 제목에는 col을, 같은 행의 제목에는 row 값을 추가하면 된다.
- th scope = "col / row"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 접근성</title>
<style>
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Delivery slots:</caption>
<thead>
<tr>
<th></th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">09:00 - 11:00</th>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th scope="row">11:00 - 13:00</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
</tbody>
</table>
</body>
</html>
제목 셀(th)이 열에 대한 설명이라면 'scope="col"' 속성을 추가하고, 행에 대한 설명이라면 'scope="row"' 속성을 추가해주면 된다.
- th scope = "colgroup"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 접근성</title>
<style>
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col span="2"></col>
<col span="2"></col>
</colgroup>
<thead>
<tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Mars</th>
<th colspan="2" scope="colgroup">Venus</th>
</tr>
<tr>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Teddy Bears</th>
<td>50,000</td>
<td>30,000</td>
<td>100,000</td>
<td>80,000</td>
</tr>
<tr>
<th scope="row">Board Games</th>
<td>10,000</td>
<td>5,000</td>
<td>12,000</td>
<td>9,000</td>
</tr>
</tbody>
</table>
</body>
</html>
제목 셀(th)이 두 개 이상의 열에 대한 설명이라면 'scope="colgroup"' 속성을 추가한다.
- th scope = "rowgroup"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 접근성</title>
<style>
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Poster availability</caption>
<colgroup>
<col>
<col>
<col span="3">
</colgroup>
<thead>
<tr>
<th scope="col">Poster name</th>
<th scope="col">Color</th>
<th colspan="3" scope="colgroup">Sizes availability</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup">Zodiac</th>
<th scope="row">Full color</th>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th scope="row">Black and white</th>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<th scope="row">Sepia</th>
<td>A3</td>
<td>A4</td>
<td>A5</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">Angels</th>
<th>Black and white</th>
<td>A1</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th scope="row">Sepia</th>
<td>A2</td>
<td>A3</td>
<td>A5</td>
</tr>
</tbody>
</table>
</body>
</html>
제목 셀(th)이 두 개 이상의 행에 대한 설명이라면 'scope="rowgroup"' 속성을 추가한다.
id / headers
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 접근성</title>
<style>
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Availability of holiday accommodation</caption>
<thead>
<td></td>
<th id="stud" scope="col">Studio</th>
<th id="apt" scope="col">Apt</th>
<th id="chal" scope="col">Chalet</th>
<th id="villa" scope="col">Villa</th>
</thead>
<tbody>
<tr>
<th id="par" colspan="5" scope="colgroup">Paris</th>
</tr>
<tr>
<th headers="par" id="pbed1" scope="row">1 bedroom</th>
<td headers="par pbed1 stud">11</td>
<td headers="par pbed1 apt">20</td>
<td headers="par pbed1 chal">25</td>
<td headers="par pbed1 villa">23</td>
</tr>
<tr>
<th headers="par" id="pbed2" scope="row">2 bedroom</th>
<td headers="par pbed2 stud">-</td>
<td headers="par pbed2 apt">43</td>
<td headers="par pbed2 chal">52</td>
<td headers="par pbed2 villa">32</td>
</tr>
<tr>
<th id="rome" colspan="5" scope="colgroup">Rome</th>
</tr>
<tr>
<th headers="rome" id="rbed1" scope="row">1 bedroom</th>
<td headers="rome rbed1 stud">13</td>
<td headers="rome rbed1 apt">21</td>
<td headers="rome rbed1 chal">22</td>
<td headers="rome rbed1 villa">3</td>
</tr>
<tr>
<th headers="rome" id="rbed2" scope="row">2 bedroom</th>
<td headers="rome rbed2 stud">-</td>
<td headers="rome rbed2 apt">23</td>
<td headers="rome rbed2 chal">43</td>
<td headers="rome rbed2 villa">30</td>
</tr>
</tbody>
</table>
</body>
</html>
표가 복잡한 경우에는 id와 headers 속성을 추가해서 스크린리더를 통해 표를 확인하는 사용자가 더 편하게 이해할 수 있게 한다.
보통의 경우 이런 식으로 복잡한 표는 잘 사용하지 않기 때문에 scope 속성만으로 구현한다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 표 - 3 / 표의 border 속성 (0) | 2023.03.23 |
|---|---|
| [웹 UI 개발] 표 - 2 / 표와 position (0) | 2023.03.23 |
| [웹 UI 개발] 표 - 0 (0) | 2023.03.23 |
| [웹 UI 개발] 이미지 리스트 - 7 / 이미지 리스트 추가 기능 제작 (0) | 2023.03.23 |
| [웹 UI 개발] 이미지 리스트 - 6 / 마우스 오버 시 버튼 노출 (0) | 2023.03.22 |
