금리표 2단 헤더

About this offer

th scope로 되는지, headers/id까지 가야 하는지 스크린리더는 표를 통째로 보지 못하고 칸 하나씩 읽습니다. 그래서 숫자 칸에 갔을 때 "이 숫자가 무슨 숫자인지" 제목을 같이 읽어줘야 하는데, 어느 제목 칸(th)이 어느 숫자 칸(td)의 제목인지를 HTML이 알려줘야 합니다. 그걸 알려주는 방법이 둘이고, 그게 scope와 headers/id입니다. 1단 표: scope로 충분 | 기간 | 금리 | | 6개월 | 3.0% | | 12개월 | 3.2% | <th scope="col">기간</th> <th scope="col">금리</th> <th scope="row">6개월</th> <td>3.0%</td> scope는 "나는 이 열(col)의 제목이다", "나는 이 행(row)의 제목이다"라고 방향만 알려줍니다. 리더가 3.0%에 가면 위로 올라가 "금리", 왼쪽으로 가서 "6개월"을 찾아 "6개월, 금리, 3.0%"라고 읽습니다. 제목이 한 줄이면 이걸로 끝입니다. 2단 표: 제목이 두 줄이라 scope가 모자람 광주은행 금리표가 이랬습니다. 기간 아래에 기본·우대·최고가 또 있습니다. | | 6개월 | 12개월 | | | 기본 | 우대 | 최고 | 기본 | 우대 | 최고 | | 100만원 | 3.0 | 3.3 | 3.5 | 3.2 | 3.5 | 3.8 | 3.5에 갔을 때 사람 눈은 "6개월의 최고금리"라고 바로 압니다. 그런데 scope만 있으면 리더가 바로 위 제목 "최고"만 잡고, 그 위에 여러 칸을 합쳐서 걸쳐 있는 "6개월"은 못 붙이는 경우가 있습니다. 그러면 "최고, 3.5"만 들립니다. 6개월 최고인지 12개월 최고인지 모르는 겁니다. 심사에서 "열 제목이 읽히지 않음"으로 잡힌 게 이겁니다. headers/id: 칸마다 제목을 직접 적어줌 <th id="m6" colspan="3">6개월</th> <th id="max6">최고</th> <th id="r100">100만원</th> <td headers="r100 m6 max6">3.5%</td> 제목 칸마다 이름표(id)를 붙이고, 숫자 칸에 "내 제목은 이 셋이다"(headers)라고 직접 적습니다. 그러면 리더가 방향을 찾아갈 필요 없이 "100만원, 6개월, 최고, 3.5%"라고 정확히 읽습니다. 대신 칸이 열두 개면 열두 번 적어야 하고, 하나라도 틀리면 엉뚱한 제목이 읽힙니다. 그래서 1단 표에는 안 쓰고, 2단처럼 scope로 안 될 때만 씁니다. 면접에서 말할 땐 이 정도면 됩니다. "scope는 제목 칸에 '이건 이 열 제목'이라고 방향만 알려주는 거고, headers/id는 숫자 칸마다 '내 제목은 이것들'이라고 직접 적어주는 겁니다. 금리표는 기간 아래 기본·우대·최고가 또 있는 2단이라, 방향만으로는 위쪽 제목인 기간이 안 읽혀서 headers/id까지 갔습니다."

Offer details

Provider

velog

Source

velog-rss

Score

54.39

Confidence

49%