A Stranger Audited My AI Product for Free. Here's What They Found.

개요

AgentKit이 Provia의 AI 제품에 대한 무료 접근성 감사를 수행했으며, 이 과정에서 발견된 4가지 위반 사항(심각 1건, 보통 3건)과 이에 대한 조치 및 교훈을 공유합니다.

주요 내용

* 감사 과정: Dev.to 게시글에 대한 댓글이 계기가 되어 AgentKit이 Provia의 AI 쇼핑 챗 제품에 대한 접근성 감사를 진행했으며, 감사를 받은 Provia 측은 실제 스토어 URL과 함께 모든 위반 사항을 공개하도록 요청했습니다.
* 발견된 접근성 문제:
* 심각한 문제: 제품 카드 레일(가로 스크롤 가능한 카드 목록)이 키보드 사용자에게 완전히 보이지 않아 마우스 없이는 스크롤이 불가능합니다. tabindex 속성이 없었고, 포커스 가능한 자식 요소도 없었습니다.
* 보통 문제:
* 챗 입력 필드에 접근 가능한 이름(label)이 없어 플레이스홀더("Type a message...")만으로는 필드의 기능을 파악하기 어렵습니다.
* 제품 카드가 <ul>, role="list", role="listitem"과 같은 리스트 의미론 없이 5개의 <div> 요소로 렌더링되어 스크린 리더 사용자에게 각 카드의 구분이나 목록 정보가 제공되지 않습니다.
* 전체 챗 인터페이스에 <main>과 같은 랜드마크 구조가 없어 화면의 주요 영역을 구분하기 어렵습니다.
* 잘못된 부분과 잘된 부분:
* <div>로만 구성된 구조, 접근 가능한 이름 부재, 리스트 의미론 누락 등이 잘못된 부분으로 지적되었습니다.
* 제품 카드 내 모든 <img> 요소에 실제 제품 이름이 포함된 alt 속성이 제대로 적용되어 있어, AI가 생성한 제품 설명을 이미지 alt 텍스트로 활용한 점은 긍정적으로 평가받았습니다.
* 개선 조치: 키보드 탐색 문제는 즉시 수정에 착수했으며, 스크롤 가능한 카드 컨테이너에 tabindex="0"을 추가하고 화살표 키로 포커스를 관리할 예정입니다. 또한, 챗 입력 필드에 aria-label을 추가하고, 카드 컨테이너에 role="list", 각 카드에 role="listitem"을 적용하며, <main> 랜드마크를 추가할 계획입니다.
* "Build in Public"의 투명성: 공개적인 감사를 요청한 이유는 "build in public"이 단순히 성공 사례뿐만 아니라 문제점까지 포함해야 하며, 다른 개발자들에게 실제적인 문제 해결 과정을 보여주기 위해서입니다. 또한, 문제점이 공개되어야만 실제 사용자가 피해를 보기 전에 수정할 수 있다고 강조합니다.
* 개선 후 결과: 수정 후 AgentKit은 동일한 스캐너와 쿼리로 재감사를 진행하고, 수정 전후 비교를 담은 두 번째 기사를 발행할 예정입니다.

시사점

이 사례는 AI 제품 개발 과정에서 접근성을 간과할 경우 사용자 경험에 치명적인 문제를 야기할 수 있음을 보여주며, "build in public" 정신을 통해 투명하게 문제점을 공유하고 해결하는 과정을 공개하는 것이 기술 커뮤니티에 실질적인 도움을 줄 수 있다는 점을 시사합니다.