웹 접근성 지침(KWCAG에 대해) - 20 / 표의 구성

• 웹 접근성 지침(KWCAG에 대해) - 0
• 웹 접근성 지침(KWCAG에 대해) - 1 / 적절한 대체 텍스트 제공
• 웹 접근성 지침(KWCAG에 대해) - 2 / 자막제공
• 웹 접근성 지침(KWCAG에 대해) - 3 / 색에 무관한 콘텐츠 인식
• 웹 접근성 지침(KWCAG에 대해) - 4 / 명확한 지시 사항 제공
• 웹 접근성 지침(KWCAG에 대해) - 5 / 텍스트 콘텐츠의 명도 대비
• 웹 접근성 지침(KWCAG에 대해) - 6 / 자동 재생 금지
• 웹 접근성 지침(KWCAG에 대해) - 7 / 콘텐츠 간의 구분
• 웹 접근성 지침(KWCAG에 대해) - 8 / 키보드 사용 보장
• 웹 접근성 지침(KWCAG에 대해) - 9 / 초점 이동
• 웹 접근성 지침(KWCAG에 대해) - 10 / 조작 가능
• 웹 접근성 지침(KWCAG에 대해) - 11 / 응답 시간 조절
• 웹 접근성 지침(KWCAG에 대해) - 12 / 정지 기능 제공
• 웹 접근성 지침(KWCAG에 대해) - 13 / 깜빡임과 번쩍임 사용 제한
• 웹 접근성 지침(KWCAG에 대해) - 14 / 반복 영역 건너뛰기
• 웹 접근성 지침(KWCAG에 대해) - 15 / 제목 제공
• 웹 접근성 지침(KWCAG에 대해) - 16 / 적절한 링크 텍스트
• 웹 접근성 지침(KWCAG에 대해) - 17 / 기본 언어 표시
• 웹 접근성 지침(KWCAG에 대해) - 18 / 사용자 요구에 따른 실행
• 웹 접근성 지침(KWCAG에 대해) - 19 / 콘텐츠의 선형 구조

---

표는 이해하기 쉽게 구성해야 한다.

 

 

오류 사례와 준수 사례

 

비장애인들은 표를 보면 인식할 수 있지만 볼 수 없는 사용자들은 내용을 들으며 인식한다.

스크린리더가 마크업에 따라 표를 읽어주기 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목 셀과 데이터셀이 구분되도록 구성해야 한다.

 

XHTML, HTML4

 

HTML5

제목 셀은 th로, 내용 셀은 td로 마크업하면 된다.

또한 제목 셀이 가로, 세로로 있는 경우 scope로 행의 제목인지 열 제목인지 구분 가능하도록 제공해야 한다.

 

복잡한 표의 경우

id와 headers 속성을 이용하여 제목 셀과 내용 셀을 보다 정확하게 연결한다.

제목 셀마다 각각 다른 id값을 부여하고 내용 셀과 관련있는 제목 셀의 id값을 headers에 나열하면 된다.

스크린리더에서는 이 headers에 나열된 id값 순서대로 제목 섹을 읽어준다.

 

'902'의 경우 스크린리더는 headers를 참고해 '기준일 2018년 10월 20일 경기도 매매가 면적단가 902'라고 읽어주게 된다.

 

 

레이아웃 테이블

데이터 테이블이 아닌 레이아웃 테이블의 경우 테이블로 마크업하지 않고 구조적으로 마크업하는 것이 좋다.

만약 테이블로 마크업할 경우 데이터 테이블로 착각하여 혼란을 줄 수 있기 때문에 caption, summary, th를 제공하지 않아야 한다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발