Lighthouse 97점을 받은 페이지인데, 막상 시각장애 사용자가 "뭘 눌러야 할지 모르겠다"는 글을 올린 게 계기가 됐거든요

배포할 때마다 자동으로 접근성 감사를 돌리는 AI 에이전트를 만든 개발자 이야기예요. Lighthouse 97점을 받은 페이지인데, 막상 시각장애 사용자가 "뭘 눌러야 할지 모르겠다"는 글을 올린 게 계기가 됐거든요.

문제는 이랬어요. "Get Started" 버튼이 aria-label이 "hero section"인 div 안에 있어서 스크린 리더가 행동 버튼이 아닌 랜드마크로 읽었고, h1에서 h4로 바로 건너뛰는 헤딩 구조도 시각적으로만 맞춰놨어요. 명암비는 4.52:1로 기준은 통과했지만, 14px 텍스트에 복잡한 배경이미지 위에 올려놓으니 규정상 적합, 실제론 못 쓰는 상황이 됐죠.

그래서 CI 파이프라인에 Claude 기반 에이전트를 붙였어요. axe-core JSON 결과물, DOM 스냅샷, Playwright로 찍은 스크린샷을 한꺼번에 넘기면 접근성 전문가처럼 룰 기반 도구가 못 잡는 문제를 추론해줘요.

규정 준수와 실제 사용 가능성은 다른 문제라는 걸 AI가 다리를 놓아주고 있는 사례예요.