HTML5 캔버스 접근성 혁신 방안

초록

본 논문은 HTML5 캔버스가 시각 장애인에게 제공하는 정보의 부재 문제를 해결하기 위해, 콘텐츠 기반 이미지 검색(CBIR)과 코드 매핑을 활용한 파이어폭스 확장 프로그램을 제안한다. 이 확장은 캔버스를 자동으로 접근 가능한 HTML 요소로 변환하여, 개발자가 별도의 접근성 규칙을 따를 필요 없이 기존 캔버스 애플리케이션을 그대로 사용할 수 있게 한다.

상세 분석

HTML5 캔버스는 픽셀 단위로 그래픽을 그리는 저수준 API이기 때문에, 스크린 리더와 같은 보조 기술이 내부에 그려진 의미를 해석할 수 없다. 기존 연구들은 캔버스 제작 단계에서 ARIA 속성을 삽입하거나, 대체 텍스트를 수동으로 제공하도록 개발자에게 의무를 부과하는 방식을 주로 사용했다. 이러한 접근법은 개발 비용을 증가시키고, 기존 코드베이스와의 호환성을 저해한다는 한계가 있다. 논문은 이러한 문제점을 극복하기 위해 두 가지 핵심 기술을 결합한다. 첫째, 콘텐츠 기반 이미지 검색(CBIR) 알고리즘을 이용해 캔버스에 그려진 그래픽을 분석하고, 객체 인식, 색상 분포, 형태 특징 등을 추출한다. 이를 통해 캔버스 내부에 존재하는 버튼, 아이콘, 텍스트 박스 등 UI 구성 요소를 자동으로 식별한다. 둘째, 식별된 요소와 개발자가 사전에 정의한 코드 매핑 테이블을 매칭시켜, 각 UI 요소에 대응하는 접근 가능한 HTML 마크업(예: <button>, <input>, <label>)과 ARIA 속성을 동적으로 생성한다. 파이어폭스 확장 프로그램은 페이지 로드 시 스크립트를 가로채어 캔버스 요소를 탐지하고, 위의 두 과정을 순차적으로 수행한다. 변환이 완료되면 원본 캔버스는 DOM에서 제거되고, 동일한 레이아웃과 인터랙션을 제공하는 HTML 구조가 삽입된다. 이 과정은 완전 자동화되어 있어 개발자는 기존 캔버스 코드를 수정할 필요가 없으며, 사용자는 스크린 리더를 통해 모든 기능에 접근할 수 있다. 실험 결과, 제안된 시스템은 85% 이상의 UI 요소를 정확히 인식했으며, 변환된 페이지의 접근성 점수가 WCAG 2.1 기준에서 AA 수준을 초과했다. 그러나 복잡한 애니메이션이나 실시간 그래픽 업데이트가 빈번한 경우, CBIR 기반 인식률이 떨어지는 단점이 존재한다. 향후 딥러닝 기반 객체 검출 모델을 통합하면 이러한 한계를 보완할 수 있을 것으로 기대된다.