대시보드 표는 시각적으로는 단순해 보여도, 가상 스크롤과 고정 열을 결합하면 스크린리더 사용자에게는 완전히 다른 지도가 됩니다. 저희는 최근 ‘웹 핵심 경로 감사’에서 반복된 사례를 모아, 헤더 셀과 본문 셀의 프로그램적 연결이 끊기는 지점을 세분화했습니다.

첫째, 렌더링 중간에 열 순서가 바뀌면 assistive technology가 캐시한 헤더 정보를 버리는 경우가 있습니다. 이를 막기 위해 헤더 ID를 안정적인 키로 유지하고, 본문 셀의 headers 속성을 동기화하는 작은 유틸을 제안합니다.

둘째, 툴팁이나 배지가 헤더 셀 안에 겹쳐 있으면 읽기 순서가 뒤섞입니다. 이 경우 헤더 텍스트를 별도의 sr-only 블록으로 분리하는 편이 안전했습니다.

셋째, 표가 아닌 그리드로 구현된 UI를 표처럼 읽히게 만들려다 오히려 혼란을 주는 사례도 있었습니다. 역할을 명확히 나누는 것이 먼저입니다.

표 컴포넌트에서 헤더 ID를 잃어버릴 때