AccessPatch: 장애인을 위한 웹 접근성 장벽 낮추기

AI 요약

AccessPatch는 접근성 문제를 브라우저 안에서 보완하는 Chrome 확장 프로그램입니다. 제작자는 시각장애인 친구가 겪는 문제를 듣고, 화면 판독기나 키보드로 웹사이트 컨트롤에 접근하지 못하는 사례를 해결하고자 프로젝트를 시작했습니다. 예를 들어 검색 아이콘은 눈으로 보면 용도를 알 수 있지만, 화면 판독기에는 이름 없는 버튼으로 읽힐 수 있습니다. 클릭은 되지만 키보드 탐색에서 건너뛰는 메뉴도 문제입니다.

AccessPatch는 Gemma 3 4B를 Ollama에서 로컬로 실행해 지원 대상 컨트롤의 접근성 이름을 제안합니다. 별도 규칙은 마우스로만 조작하는 일부 사용자 지정 버튼에 키보드 초점과 활성화 동작을 추가합니다. 변경 사항은 웹사이트 서버가 아니라 사용자의 브라우저 페이지에 적용되며, 되돌릴 수 있습니다. 확장 프로그램에는 자동, 디버그, 일시 중지 모드가 있습니다. 자동 모드는 모델 응답 뒤 지원 가능한 수정을 조용히 적용하고, 디버그 모드는 문제와 제안, 근거를 전후 카드로 보여준 뒤 사용자가 적용 대상을 고르게 합니다. 일시 중지 모드에서는 자동 방문 분석을 멈추지만 수동 분석은 계속 쓸 수 있습니다.

이름 없는 컨트롤을 찾아 수정합니다

콘텐츠 스크립트는 화면에 보이는 후보 컨트롤과 주변 텍스트, 레이블, 플레이스홀더, 아이콘 메타데이터를 수집합니다. 입력한 폼 값과 편집 가능한 텍스트, 스크립트 내용, URL 쿼리 문자열은 분석 데이터에서 제외합니다. 다만 컨트롤 주변의 페이지 문구에는 민감한 정보가 들어갈 수 있다고 제작자는 설명합니다.

Gemma에는 이름이 없는 컨트롤 하나씩 요청을 보냅니다. 모델은 제안 이름과 인용한 근거, 설명을 스키마가 제한된 JSON으로 반환합니다. 확장 프로그램은 대상 요소와 출력 길이, 근거를 검증한 뒤 제안을 사용합니다. 예를 들어 검색 버튼에 aria-label="Search catalog"를 추가해도 기존 아이콘과 애플리케이션 동작은 유지합니다. 입력은 텍스트와 메타데이터로 구성하며, 이 버전은 이미지나 화면 캡처를 비전 모델에 보내지 않습니다.

키보드 수정을 모델과 분리합니다

데모의 메뉴는 클릭 가능한 div입니다. 키보드 수정 규칙은 여기에 버튼 역할과 탭 순서 진입점을 추가하고, 기존 클릭 동작을 호출하는 이벤트 리스너를 붙입니다. Enter는 keydown에서 동작하고 Space는 keyup에서 동작합니다. 키를 누른 채 반복 입력이 발생해도 활성화가 반복되지 않도록 처리합니다.

이 동작은 확장 프로그램 코드가 담당합니다. Gemma는 접근성 이름을 제안할 뿐 실행 가능한 수정 스크립트를 만들지 않습니다. 모델 제안은 실제 요소와 당시 컨텍스트 스냅샷에 연결합니다. 컨트롤이 바뀌거나 페이지를 이동하면 제안을 무효화할 수 있습니다. 실행 취소는 AccessPatch가 적용한 값과 현재 속성이 일치할 때만 원래 속성으로 되돌려, 이후 웹사이트가 가한 변경을 덮어쓰지 않습니다.

모델 크기와 테스트 결과

제작자는 처음에 Gemma 1B를 사용했습니다. 초기 프롬프트에서는 입력 내용을 되풀이하는 답이 나왔습니다. JSON 형식을 제한해 출력 문제를 해결했지만, 작은 모델은 레이블을 추측하거나 페이지 문맥에 삽입된 지시를 따르는 경우가 있었습니다. 근거 필드를 분리하고, 답을 유보하는 예시를 넣고, 요청마다 대상 하나만 보내는 방식으로 개선했습니다.

최종 프롬프트를 합성 검사로 비교한 결과 Gemma 3 1B는 16개 중 11개를 통과했고, 모호하거나 지시문만 있는 사례에서 잘못된 레이블을 3개 냈습니다. Gemma 3 4B는 16개를 모두 통과했고 해당 사례에서 잘못된 레이블은 없었습니다. 제작자는 이를 소규모 합성 스모크 테스트라고 설명하며, 실제 환경의 정확도와 악의적인 페이지 텍스트에 대한 저항성은 더 폭넓게 평가해야 한다고 덧붙였습니다.

프로젝트에는 출력 검증, 폼 값 제외, 키보드 활성화와 정리, 오래된 대상 처리, 페이지 이동, 자동·디버그 모드, 추론 중 사용자가 일시 중지했을 때 자동 적용을 멈추는 동작을 확인하는 자동화 테스트 22개가 있습니다. 확장 프로그램은 한 번에 후보 컨트롤을 최대 24개까지 검사합니다. 현재 최상위 문서만 다루며 이미지 설명, 캔버스 인터페이스, 교차 출처 프레임, shadow root 내부, 복잡한 사용자 지정 위젯의 전체 상호작용 패턴은 지원하지 않습니다. 같은 경로에서 페이지가 다시 그려지면 새 검사가 필요할 수 있고, 자동 모드에서도 모델 제안이 틀릴 수 있습니다.

로컬 실행과 남은 과제

설치 뒤 ollama pull gemma3:4b와 ollama run gemma3:4b로 모델을 준비합니다. 확장 프로그램 설정에는 http://localhost:11434/v1을 API 기본 주소로, gemma3:4b를 모델 이름으로 입력합니다. 일반적인 로컬 Ollama 설정에서는 API 키를 비워 둡니다. 방문 분석을 쓰려면 웹사이트 접근 권한이 필요하며, Ollama에서 확장 프로그램의 출처를 OLLAMA_ORIGINS 허용 목록에 추가해야 할 수도 있습니다. 같은 컴퓨터에서 사용할 때는 서버가 localhost에 바인딩된 구성이 작동합니다.

로컬 추론은 설치한 모델을 사용하므로 원격 추론 API에 접속하지 않아도 계속 실행합니다. 추론 요청별 서비스 요금은 없지만 하드웨어와 전력 비용은 듭니다. 확장 프로그램은 OpenAI 호환 주소를 설정할 수 있어 다른 호환 모델이나 실행 환경으로 교체할 수 있습니다. 제작자의 다음 단계는 보조 기술을 사용하는 사람들과 테스트해 실제 일상 작업을 돕는 수정이 무엇인지 확인하는 일입니다.

dev.to 반응

• @muhammadmurtuzahussain — 좋은 프로젝트네요.
  • @axrisi — 고마워요! ))
• @svgicons — 아이콘 메타데이터를 이미 추출한다고 하셨는데, SVG, aria-hidden, 컴포넌트·아이콘 이름을 서로 다른 근거 신호로 다루나요? 이런 정보도 모델이 제안을 보류할지 판단하는 데 도움이 될 수 있습니다.
  • @axrisi — SVG 아이콘이 포함되는지 묻는 거라면, 네. 먼저 프로그램이 접근성 이름이 빠졌는지 확인한 뒤 관련 문맥과 아이콘 메타데이터를 로컬 Gemma 모델에 보냅니다. 예를 들어 lucide-search라는 이름은 주변 버튼이 검색 기능을 한다고 추론하는 데 도움을 줄 수 있습니다. SVG를 포함해 기존 접근성 이름이 있는지도 제안 요청 전에 확인합니다. 모델은 이름을 제안하고 확장 프로그램은 이를 검증해 적용합니다.

원문: dev.to / 번역·요약: Trawling