레이아웃 표는 함정입니다

몇 년 전에는 개발자들이 표 요소로 페이지 레이아웃을 만들었습니다. 이러한 습관은 오래된 코드에 남아 있으며 오늘날에도 실제 접근성 문제를 일으킵니다.

스크린 리더는 모든 표를 데이터로 처리합니다. 따라서 레이아웃의 행, 열, 셀 개수를 알려 주며 의미 없는 구조로 사용자를 혼란스럽게 합니다.

레이아웃 표는 콘텐츠를 혼란스러운 순서로 셀에 흩어 놓는 경우가 많습니다. 시각적 순서와 읽기 순서가 서로 어긋나 사용자가 길을 잃게 됩니다.

현대적인 레이아웃은 CSS로 구현해야 합니다. 페이지를 배치할 때는 플렉스박스나 그리드를 사용하고, 표 요소는 진정한 표 형식의 데이터에만 사용하십시오.

항목을 행이나 열로 나열할 때는 플렉스박스가 자연스러운 도구입니다. 표의 의미 구조가 방해하지 않으면서 콘텐츠에 맞게 조정됩니다.

행과 열을 함께 배치할 때는 CSS 그리드가 진정한 레이아웃 시스템을 제공합니다. 페이지의 모양과 마크업의 의미를 분리할 수 있습니다.

CSS 레이아웃을 사용하면 HTML에서 header, nav, main과 같은 실제 랜드마크를 사용할 수 있습니다. 스크린 리더 사용자는 셀 개수 대신 의미 있는 구조를 파악할 수 있습니다.

기존 레이아웃 표를 정말 제거할 수 없다면 role=presentation을 추가하십시오. 표의 의미 구조를 제거하여 보조 기술이 격자를 무시하게 합니다.

role=presentation은 임시 처방으로만 사용하십시오. 진정한 해결책은 CSS로 이전하는 것이며, 문제를 단순히 숨기지 않고 제거합니다.

caption도 없고 th도 없으며, 셀에 값 대신 전체 섹션이 들어 있다면 위험 신호입니다. 이러한 패턴은 거의 항상 개선이 필요한 레이아웃 표를 의미합니다.

모든 표에 간단한 질문을 던져 보십시오. 서로 관련된 값이 행과 열로 구성된 데이터를 보여 줍니까? 그렇지 않다면 레이아웃 표이므로 CSS로 대체해야 합니다.

절대로 표로 페이지를 배치하지 마십시오. 플렉스박스나 그리드를 사용하고, 표는 실제 데이터에만 사용하며, role=presentation은 기존 코드의 임시 방편으로만 취급하십시오.