접근성 있는 HTML table은 어떻게 만드나요?

Question

Accepted Answer

HTML table은 **표 형식 데이터**(관련 데이터의 행과 열)를 표현하기 위한 것이지 레이아웃을 위한 것이 아닙니다. 접근성 있는 table은 적절한 구조를 사용해 스크린 리더가 각 셀과 함께 헤더를 안내할 수 있게 합니다. ```html

Q2 Sales by Region
Region	Revenue
North	$12,000
South	$9,500
Total	$21,500

``` ## accessibility에 결정적인 부분들 - **`scope`가 있는 ``** — 헤더 셀을 표시합니다. 열 헤더는 `scope="col"`, 행 헤더는 `scope="row"`입니다. 그러면 스크린 리더가 맥락 없이 셀을 읽는 대신 "North, Revenue: $12,000"라고 안내합니다. - **``** — 테이블 전체의 제목으로 ``의 첫 번째 자식이며, 사용자에게 방향을 알려주기 위해 읽힙니다. - **``/``/``** — 헤더, 본문, 요약 행을 그룹화하여 내비게이션을 돕고 인쇄 시 헤더가 반복되게 합니다. ## 레이아웃에 table을 사용하지 마세요 ```html

sidebar

content

``` 레이아웃 table은 스크린 리더를 혼란스럽게 하고(데이터 테이블 semantic을 안내함) 유연하지 못합니다. 페이지 레이아웃에는 CSS Grid/Flexbox를 사용하십시오. ## 왜 중요한가 적절한 table semantic(``, ``, 섹션 구분)은 데이터 테이블을 스크린 리더 사용자가 사용할 수 있게 만드는 요소입니다. 각 값을 그 행과 열 헤더에 묶어줍니다. ``은 오직 진짜 표 형식 데이터에만 사용하십시오.