표 태그 table 세번째 (scope 속성)

scope는 범위, 살피다 라는 의미가 있네요

scope를 사용하는 이유는 웹접근성을 위해 표의 특정 칸에 대한 정보를 제공하기 위함이지만 간혹 table 두번째 강좌에서 언급한 col태그를 사용하지 않았을 경우 scope 속성으로 지정된 요소들을 디자인 할 수도 있습니다.

 

대부분의 스크린리더기는 기본적으로 각 칸을 좌에서 우로 한줄씩 읽어나갑니다.

 

 

쿠팡 → 1000원 → 100원 → 500원 → 옥션 → 110원.... 이렇게 읽어 나갑니다.

 

그리고 th가 존재하는 표의 경우는 th를 읽어주고 칸을 읽어 오기는 스크린 리더기도 있습니다.

구분 → 모니터 → 키보드 → 책상 → 쿠팡 → 모니터 1000원 → 키보드 100원 ...

 

스크린리더기도 많은 종류가 있으며 스크린리더기처럼 보조로 사용되는 프로그램들은 복잡한 표에서 종종 잘못 인식을 할수도 있다고 합니다. 그래서 명시적으로 scope를 지정하여 th가 열의 제목임을 알려주고 

쿠팡, 옥션처럼 구분이 되는 요소들이 기준이다라고 알려 주는 것입니다. 보조 프로그램들이 정확히 알수 있도록 말이지요

 

디자인적으로도 보통 thead의 요소들은 글자 색상을 바꾼다던지 배경색을 바꾸어 구분하기도 하지요. 쿠팡, 옥션처럼 구분이 되는 행들도 마찮가지구요. col 태그를 선언하지 않은 표에서는 이러한 칸들은 scope를 통해 마크업 해두는 것은 좋은 방법이라 생각합니다. css를 통해 디자인이 가능해지기 때문입니다.

scope = "row"	행에 포함된 칸들의 기준임을 명시
scope = "col"	열에 포한된 칸들의 기준임을 명시
scope = "rowgroup"	scope = "row" 칸들의 기준임을 명시
scope = "colgroup"	scope = "col" 칸들의 기준임을 명시

 

rowgroup, colgroup의 경우는 좀더 복잡한 표에서 사용하실 수 있습니다.

그림처럼 모니터, 키보드는 컴퓨터 용품이라는 기준으로 나누어 진 것이므로 colgroup,

쿠팡, 옥션은 쇼핑몰의 기준으로 나누어진 것이므로 rowgroup이 됩니다.

<table>
    <thead>
        <tr>
            <th rowspan="2" colspan="2" scope="col">구분</th>
            <th colspan="2" scope="colgroup">컴퓨터 용품</th>
            <th colspan="2" scope="colgroup">가구</th>
        </tr>
        <tr>
            <th scope="col">모니터</th>
            <th scope="col">키보드</th>
            <th scope="col">책상</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2" scope="rowgroup">쇼핑몰</td>
            <td scope="row">쿠팡</td>
            <td>1000원</td>
            <td>100원</td>
            <td>500원</td>
        </tr>
        <tr>
            <td scope="row">옥션</td>
            <td>1100원</td>
            <td>90원</td>
            <td>450원</td>
        </tr>
        <tr>
            <td scope="rowgroup">마트</td>
            <td scope="row">이마트</td>
            <td>1000원</td>
            <td>100원</td>
            <td>500원</td>
        </tr>
    </tbody>
</table>

 

scope는 반드시 준수해야 되는 사항은 아닙니다. 최소한의 기본만을 소개하려는 강좌의 취지에도 어긋납니다. 그럼에도 알려드리려고 하는 것은 웹접근성과 디자인적으로도 위와 같은 장점 때문이니 기억하시길 바랍니다.

 

실무에서는 scope 속성을 사용하지 않는 경으 매우 흔합니다. 대부분은 col태그를 이용해서 표를 디자인 하지요. 하지만 만들려고 하는 사이트가 장애인들을 위한 것이라면 scope는 꼭 사용해야 할 것 같습니다.